Supporting the Design Switches

The Display options section lets tenants toggle common product-card and search-panel elements on and off from the panel, without touching any template code — but that only works if your template set's markup actually reacts to the toggle. A custom template that hardcodes a piece of markup shows it regardless of what the toggle says.

To support a switch, wrap the relevant markup in a {{#flag}}...{{/flag}} block using the flag names below. If a particular element has no place in your design, you can just leave it out of your markup entirely — there's nothing to configure, the toggle simply won't have anything to affect.

Product card flags

Used in card.html:

Flag Controls
show_brand The brand element.
show_discount The discount badge. Only renders when there's an active discount to show — see Advanced conditionals.
show_add_to_cart The Add to cart button.
show_price The price element(s).
show_image The product thumbnail.
open_in_new_tab Not a visibility flag — controls the target="_blank" rel="noopener" attributes on the card's link.

Visibility example:

{{#show_image}}<img src="{{image}}" alt="{{title}}">{{/show_image}}

Attribute example:

<a href="{{link}}" {{#open_in_new_tab}}target="_blank" rel="noopener"{{/open_in_new_tab}}>...</a>

Search panel flags

Used in layout.html:

Flag Controls
show_recent_searches The recent searches bar.
show_voice_search The voice search button.
show_results_count The "N results" line.
show_usual_searches The popular searches row.

These only do something if your layout.html also includes the matching hook the widget looks for — wrapping a flag around markup that isn't there has no effect.

Flag Needs this hook in your markup
show_recent_searches An element with data-ss-recent
show_voice_search A button with data-ss-mic
show_results_count An element with data-ss-meta
show_usual_searches An element with data-ss-usual 
{{#show_voice_search}}<button type="button" data-ss-mic aria-label="{{t_voice_search}}">🎤</button>{{/show_voice_search}}