Selective display

Selective display allows you to exhibit or conceal elements and craft distinctive layouts based on various conditions. Unlike filters — which clarify which Collection items are visible in a Collection list — requirements specify when any element (static or dynamic) will be visible. 

This teaching session will cover the following:

1. Definition of selective display 
2. How to establish selective display
3. Criterion guidelines
4. Requirements compared to filters
5. Scenarios for selective display

Definition of selective display

Selective display determines when an element is viewable on your site based on specific conditions. 

As an illustration, you can utilize selective display to:

• Reveal or conceal an element in a Collection list based on a Collection item field or value (e.g., show an element depending on the value of a Collection field, or hide an element tied to a Collection field when that Collection field is empty) 
• Present or hide a label or accentuate an item based on a Collection item field or value (e.g., add a “featured” label to a featured blog post)
• Display or conceal a section on a Collection page
• Highlight the current Collection item
• Display or hide an element if a user isn’t logged in on your site

Each Collection field type presents diverse conditions for selection. 

How to establish selective display

To produce a condition that reveals or hides an element based on a user’s login status: 

1. Pick an element on the canvas
2. Proceed to Element settings panel > Visibility & user access
3. Click the “plus” symbol 
4. Choose the field you wish to ascertain visibility from the dropdown (e.g., User state)
5. Select a value from the following dropdown (e.g., is Logged In)
6. Click Save

You can replicate the same procedure to incorporate field- and item-based requirements in Element settings panel > Selective display.

You can include as many conditions as necessary. When multiple conditions are enforced, all criteria must be satisfied for the element to appear (or remain hidden). To remove a condition, click the “trash” symbol adjacent to the requirement.

Criterion guidelines

Criterion guidelines, similar to filter rules, are either field-based or item-based. 

Field-based conditions take effect when a specified field: 

• Is set or is not set
• Equals or doesn’t equal a particular value
• Is greater than, less than, or is a number between two numeric values
• IsON or OFF
• Belongs to a certain date range

Item-based requirements apply when a Collection item is or is not the current item. 

Requirements compared to filters

Collection list filters permit you to display or conceal Collection items in a Collection list based on a guideline, while selective display utilizes the same guidelines to exhibit or hide elements within Collection lists, on Collection pages, or on static pages.

For instance, you can utilize the guideline “Featured (switch) is on” to exhibit a “Featured” text label for featured blog posts and obscure this label for elements that have the featured switch toggled off.

Alternatively, if you desire to solely show featured posts in a list, you can establish this same guideline as a filter on the Collection list. 

Scenarios for selective display

Within Collection lists and on Collection pages

You can apply guidelines and filters to emphasize or show or hide specified content within your Collection lists or on Collection pages. Suppose you possess a Collection list of blog posts, and you intend to display a “Featured” label on featured posts. You can apply selective display based on a switch field to conceal the label for items that have the “Featured” switch off. 

To administer the subsequent guideline, you’ll need to append a switch field to your Collection and concoct an element to function as the “Featured” label. Then: 

1. Select the “Featured” label on the canvas
2. Head to Element settings panel > Selective display
3. Click the “plus” symbol 
4. Pick the email field from the dropdown
5. Choose Is set from the subsequent dropdown
6. Click Save

On Ecommerce sites

You can employ selective display to link distinct designs to unique product variations by setting selective display on variant fields like the main image, compare-at-price, SKU, etc. Or, you can insert banners or callouts depending on checkout information. For instance, you can exhibit a “free shipping” badge on the checkout page based on the cart total, subtotal, or shipping information.

To implement selective display on the checkout page:

1. Select the element you wish to reveal when a particular guideline is met
2. Visit Element settings panel > Selective display
3. Click the “plus” symbol 
4. Pick one of the shipping fields (e.g., Subtotal) from the dropdown
5. Choose the guideline (e.g., Equals or Is greater than a specific value) 
6. Insert the value for the guideline in the input field 
7. Click Save

Other example scenarios: 

• Add a “pick up in store” badge if an Ecommerce product isn’t shippable
• Show or obscure a sales badge based on whether the Compare-at-price field is set 
• Display or hide specific messaging when shipping to certain countries 

Important: When setting a guideline based on price, the amounts should be formatted using a period as the decimal (e.g., 1000.00) regardless of the price formatting settings for your store. For instance, 100,50 € should be entered as 100.50. 

Note: When setting selective display based on country or billing address, the country must be entered as a 2-letter abbreviation. For instance, the United States should be entered as “US”.

On User Accounts sites

You can establish selective display on any element (e.g., buttons, sections, etc.) on a User Accounts-enabled site to tailor experiences for your users based on whether they’re logged in. Learn more about setting element visibility based on site visitors’ logged-in status.