CMS: Setting Up the Selection Tags Input Element and Managing Tags

17 min read
Give visitors a way to filter the items that appear on your live site or let them submit choices to your collection with the Selection Tags element. In your CMS (Content Management System) collection, you add the Tags field and manage the values associated with each item. If you need to apply changes to a tag value, the changes automatically apply to every item using the tag, so you don't have to manually edit them everywhere in your collection. 
A screenshot of two Selection Tag elements, each used for a different purpose.

Using the Selection Tags input element to filter content on your live site

Connect the Selection Tags input element to the same dataset that connects to a repeater or gallery. Then set the element to filter content and choose which collection field's values you want to show as filter options in the Selection Tags element. When visitors click these filter options in the element, the repeater or gallery only displays items that have a matching field value. 

You can also apply advanced filtering conditions to choose an operator that controls how the filter is applied (e.g. Is any of, Equals any of, Includes any). Any filters or sorts you apply to the dataset also apply to the connected elements. This means you can add filters to the dataset to exclude items from appearing and add sorts to control their order. 
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Add the Selection Tags input element: 
    1. Go to the page or section where you want visitors to filter content by tags. 
    2. Click Add Elements  on the left side of the editor.
    3. Click Input.
    4. Click Selection Tags
    5. Click and drag the relevant Selection Tags element onto the page. 
Screenshot of adding the Selection Tags input element in the Wix Editor.
  1. Connect the Selection Tags element to the CMS:
    1. Click the Connect to CMS icon  on the Selection Tags element. 
    2. Select Filter content in the Connect Selection Tags panel on the right. 
    3. Click the Choose a dataset drop-down and select the same dataset that connects to the elements (e.g. repeater, gallery, table) that you want visitors to filter. 
    4. Click the Filter content by drop-down and choose the field that visitors will use to filter the content.
      Tip: To add a new field to your collection and use it for filtering content, select Add new field, then enter the field name and select a Text, Number, Tags, or Reference field type. You can add content to the field in your CMS collection later. 
    5. (Optional) Add a condition that affects how the filter works:
      1. Click Advanced Filtering. 
      2. Click the Condition drop-down and choose an operator that controls how the filter is applied (e.g. Is any of, Equals any of, Includes any).
        Note: The conditions vary depending on the connected field type. 
A screenshot of the Connect Selection Tags panel where you connect to the CMS.
  1. Customize the Selection Tags input element: 
    • Click the Settings icon  to edit the Field title
    • Click the Layout icon  to set the text indentation, padding, spacing and alignment. 
    • Click the Design icon  to choose a preset design and customize it further. 
    • Click the Animation icon  to choose and customize an animation effect. 
    • Click the Stretch icon  to set the element to full width. 
Screenshot of the Selection Tags customization options in the Wix Editor.
  1. Click Preview to test your Selection Tags element.
  2. Click Publish if you are ready to make the changes go live. 

Using the Selection Tags input element to collect content from site visitors

Use the Selection Tags input element to collect responses from visitors. You can use a collection field for the choices or manage the choices in the element itself. When visitors select an option from the Selection Tags element and press a 'Submit' button, their submission is saved to the relevant field in the collection you choose. 
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Add the Selection Tags input element: 
    1. Go to the page or section where you want visitors to submit their selection. 
    2. Click Add Elements  on the left side of the editor.
    3. Click Input.
    4. Click Selection Tags
    5. Click and drag the relevant Selection Tags element onto the page. 
Screenshot of adding the Selection Tags input element in the Wix Editor.
  1. Connect the Selection Tags element to the CMS collection where you will store the submissions:
    1. Click the Connect to CMS icon  on the Selection Tags element. 
    2. Connect to a dataset that binds to the collection where you will store the submissions: 
      • If your page already has a dataset:
        1. Click Collect content
        2. Click the Choose a dataset drop-down and select the relevant dataset. Alternatively, click Add a Dataset to create a new one, then choose the collection to connect, enter the dataset name and click Create.
      • If your page does not have a dataset: 
        1. Click + Add a Dataset on the right. Then choose the collection to connect, enter the dataset name and click Create.  
        2. Click Collect content
    3. Click the Tag values connect to drop-down and choose the Tags field in which you will store the submissions.
      Tip: To add a new field for storing submissions, select Add new field, then enter the field name and click Add
    4. Set the dataset mode and collection permissions:
      1. Click Dataset Settings
      2. Click the Dataset mode drop-down and select Write.
      3. (If necessary) Click the permissions type next to Collection Permissions and select Form submissions in the 1st drop-down. You can click the additional drop-downs to refine the permissions. Click Save once you're done setting the permissions. 
      4. Click Back to Selection Tags at the top of the Dataset Settings panel. 
  1. Click the Connect list items toggle to choose where to manage the choices that appear in the Selection Tags element:
    • Enabled: Use a field from another CMS collection for the choices. Choose a dataset that connects to the collection that has the field you want to use as the choices. Then click the Labels and values connect to drop-down and select the Text or Number field you want to use or select Add new field to create a new field for the choices. 
    • Disabled: Click Manage Choices on the Selection Tags element to create and manage the choices in the element itself, rather than in a CMS collection. 
  1. Customize the Selection Tags input element: 
    • Click the Settings icon  to edit the Field title or require visitors to select a tag when submitting as part of a form. 
    • Click the Layout icon  to set the text indentation, padding, spacing and alignment. 
    • Click the Design icon  to choose a preset design and customize it further. 
    • Click the Animation icon  to choose and customize an animation effect. 
    • Click the Stretch icon  to set the element to full width. 
  2. Add a 'Submit' button for visitors to click to submit after they make a selection in the Selection Tags element. 
A screenshot of a Submit button connected to the dataset where submissions are stored.
  1. Click Preview to test your Selection Tags element.
  2. Click Publish if you are ready to make the changes go live. 

Managing Tags in your CMS collection

After adding a Tags field type to your collection, you can add the tag values for each item. When adding tag values to an item, a list appears where you can select from your existing list of tag values. If you need to rename, merge, or delete tags, the changes you make to the tags apply to all items and elements on your site where the tags are in use. This lets you manage your tags efficiently, without having to manually apply your changes to them in every item in which they appear. 

To add and manage tags in your collection:

  1. Go to CMS in your site's dashboard. Alternatively, you can click CMS in your editor, then click Your Collections. 
  2. Click the relevant collection.
  3. Click Manage Fields
  4. Click + Add Field
  5. Select Tags and click Choose Field Type.  
  1. Enter a name for the field in the Field name.
  2. (Velo only) If necessary, update the Field ID, which is used in the site's code. You cannot update this ID later. 
  3. (Optional) Enter help text to include a tooltip in your collection next to the field name.
  4. Click Save.
  5. Click the Tags field of the relevant item and choose what you want to do:
Next
Learn how to add field validations to make the field a mandatory 'required' field in your collection. 

Did this help?

|