Showing or hiding an element with conditions

Conditions let you show or hide any element on a page based on who is looking at it, what is in their cart, what the product is, or the date. You set them one element at a time, in the Conditions group of the Advance tab. A common use is a banner that only signed-in customers with a certain tag can see.

Considerations

• The Advance tab only shows in Pro mode.
• Conditions sit on one element. Hiding an element hides everything inside it.
• The Product conditions only appear when you are editing a product page.
• A condition with no value is ignored, so a half-finished rule will not hide anything.
• Customer and cart conditions are checked in your customer's browser, so the element can show for a moment before it hides. Product, page and schedule conditions are applied before the page loads.
• Hide on Desktop, Hide on Tablet and Hide on Mobile are about screen size, not about who is looking.

Turn conditions on for an element

1. From your Orbit dashboard, go to Storefront, then Pages, and click the page you want. For your homepage, go to Storefront, then Themes, and click Customize.
2. Click the element on the canvas. The settings panel opens on the right.
3. Click the Advance tab, then open the Conditions group.
4. Turn on Enable conditions. The rule builder appears.
5. Under Action, click the eye button for Show element when…, or the crossed-out eye for Hide element when….
6. Click + Add condition and build your rule.
7. Save the page. The rule reaches your live site when you publish.

Note: The group header counts your rules, so it reads Conditions (2) when two are set.

Show a banner to signed-in customers with a tag

This rule needs two conditions.

1. Click the element that holds your banner on the canvas.
2. On the Advance tab, open Conditions and turn on Enable conditions.
3. Under Action, choose the eye button, Show element when….
4. Click + Add condition.
5. Click Choose… and pick Customer is logged in from the Customer group. The operator is set to is true.
6. Click + Add condition again.
7. Pick Customer tags, leave the operator on contains any of, and type your tag, for example vip.
8. Set Match to All conditions (AND).
9. Save the page. Only signed-in customers tagged vip now see the banner.

Tip: See Building customer segments for grouping customers by the same kind of rule.

Combine more than one condition

The Match box appears once you have two conditions.

• All conditions (AND): every condition has to be true.
• Any condition (OR): one true condition is enough.

What you can build a rule on

The Choose… list is grouped.

Customer

• Customer is logged in: the visitor is signed in to an account.
• Customer is a B2B company member: the customer belongs to a company account.
• Customer can manage their company (B2B): the customer holds a managing role on that account.
• Customer tags: the tags on the customer record.
• Specific customer: one named customer, matched on their customer ID.
• Customer custom field: a customer custom field. Pick the field first, then set the value.
• Customer order count: how many orders the customer has placed.
• Customer total spent: what the customer has spent in total.

Product

These use the product being viewed.

• Product tags, Product vendor, Product type and Product collections: how the product is classified.
• Product price and Product inventory: the price and the stock level.
• Product created date: when the product was added.
• Product custom field: a product custom field. Type the field key first.

Cart

• Cart item count: how many items are in the cart.
• Cart total: what the cart comes to.
• Cart contains product: a product is in the cart, matched on its product ID.

Page

• Page type: home, product, collection, cart, order, account, blog, page or other.
• Page URL: the address of the page.
• URL query parameter: a value in the link, such as a campaign tag. Type the parameter name first.
• Store language: the language the storefront is showing.

Schedule

• Current date & time: run a promotion between two dates without editing the page again.

Operators and the value box

The operator list changes with the condition you pick.

• is, is not, contains, does not contain: one value in a single box.
• is one of, is not one of, contains any of, contains all of, contains none of: several values in one box, separated by commas.
• greater than, greater than or equal, less than, less than or equal: a number.
• between: a From box and a To box.
• is before, is after: a date.
• within the last (days): a number of days.
• is empty, has any value, is true, is false: no value box.

Remove a condition or stop the rules

1. Click the ✕ button on the condition you want to drop.
2. To stop them all, turn Enable conditions off.
3. Save the page.

Related guides

• Using the element settings panel
• Getting started with the page builder
• Restricting who can see a page, category or brand
• Building customer segments