Set a custom Reveal trigger selector

When should I use a custom Reveal™ trigger selector?

Reveal™ normally places its discreet Shop Similar trigger automatically within the product-image area. Some Shopify themes use custom product galleries, sliders or carousel structures that make automatic placement less reliable. In these cases, Reveal™ may appear inside an individual slide, behind another element or outside the visible product-image area.

A custom trigger selector gives RecoMelon an explicit, stable element to attach Reveal™ to.

How to set the selector

1. Open Reveal™ in your RecoMelon settings and locate the custom trigger-selector field.
2. Open the relevant product page in the Shopify theme editor, then use your browser's inspector to inspect the product-image area.
3. Start from the product image or gallery element and move upwards through its parent elements until you find a stable container that wraps the main product-image or carousel area.
4. Choose a descriptive CSS class from that container. For example, if the element uses the class product-image-container, copy that class name.
5. Enter the class in RecoMelon with a leading dot: .product-image-container
6. Save your Reveal™ settings and refresh the Shopify theme preview.
7. Confirm that the Reveal™ trigger now appears in the intended position. Check the live storefront as well as the theme editor before considering the placement complete.

Choosing a reliable selector

Prefer a stable, descriptive parent container rather than targeting the raw img element. For carousel-based themes, select the overall product-image container so Reveal™ remains visible above the carousel instead of becoming attached to a single slide or thumbnail.

Avoid generic selectors such as .slider, .image or other classes that may appear elsewhere on the page. The more specific the container is to the product-media area, the more reliable the placement will be.

Example

If your product gallery is wrapped like this:

<div class="product-image-container">...</div>

Enter the following into the custom trigger-selector field:

.product-image-container

If Reveal™ still does not appear correctly

Refresh the preview after saving, then test the actual storefront. Shopify's theme editor can render or cache elements differently from the storefront. If placement is still incorrect, inspect the page again and move one level higher to a more stable parent container rather than selecting an individual image, slide or thumbnail.