Custom CSS Selector

In this article:

• Add a selector to the product
• Available options
• How selector priority works
• Save changes

✔️ Add a selector to the product

1. Go to the app admin and open the label you want to customize.
2. Open the Position section and find the Custom CSS selector option.

3. Click on the icon near the field.
4. In the modal window, you can set the selector.

✔️ Available options

• Default selector

This selector is displayed across product pages and collection or recommendation sections.

• Primary product selector

Selector is displayed for the main product section on single product pages.

• Secondary product selector

This selector is displayed for all non-primary product contexts: collections, related, recommendations, and similar sections where multiple products are displayed.

✔️ How selector priority works

• When you set a selector for the Main product section, it will be used on product pages, and the Default selector will be ignored there.
• When you set a selector for the Related products section, it will be used in collection and recommended product sections, and the Default selector will be ignored there.
• If no specific selector is set for a section, the Default selector will be used automatically.

✔️ Save changes

Click Apply to save your changes after updating the fields.
Click Cancel or the close icon to exit without saving.

Updated on: 22/06/2026