How to hide and show product-specific content on your product template

  • Updated

When building your Product Template in Replo, you may have content that you only want visible for certain products assigned to that template.

For example, maybe some of the products that you assigned to the template have specific variants,
while some do not. Or you have three types of shoes that you’re selling, but for each shoe, you want to show a different section below talking about the designer for that shoe.

You can accomplish those tasks in Replo by using a State and the “Template Product =” option.

Screenshot 2023-12-16 at 2.33.06 PM.png

How might you add this? Follow the directions below:

  1. Select the component you want to add a state to.
  2. Find "States" at the top of the right bar of the editor.
  3. Click the "+" button to the right of the “States” header.
  4. Click the "Add Custom" option and add a Name for the state.
  5. Under “Show If”, select “Template Product”
  6. Select “equals” or “not equals”.
    1. If you select “equals”, the state will apply when the template product matches
    2. If you select “not equals”, the state will apply when the template product doesn’t match
  7. Select the products that you want to hide or show that component
  8. Finally, to ensure that the new state only works when the Product Template = to the ones you’ve selected, you must hide the component in the Default state. To do this, just unselect Desktop, Tablet, and Mobile underneath the Visibility header in the design bar. You may have to re-enable visibility for the newly created state.

To test that this is working, enter into the preview mode in the bottom toolbar. Once in the preview mode, toggle through your products. The components should hide and show as expected.

Was this article helpful?