Conditional Visibility

Conditional visibility refers to the ability to control the display of elements on a webpage based on certain conditions. In the context of e-commerce, this means showing or hiding elements based on product properties, variant selections, or other relevant data.

For example, you might want to:

• Display a "Limited Time Offer" banner only for specific products.
• Display a "Out of Stock" message when a specific variant is unavailable.
• Show a specific promotional block if a product has a specific tag

Available conditions for Products

By adding specific custom attributes to elements inside the Product Custom Element, you can enable conditional visibility, allowing those elements to appear or disappear depending on the current product.

Product has different prices for each variant

Apply the following custom attribute on the element that you want to appear only and exclusively when the Product Price Varies

condition

variable-price

Product has same price for each variant

Apply the following custom attribute on the element that you want to appear only and exclusively when the Product Price is always the same

condition

fixed-price

Product has multiple variants

Apply the following custom attribute on the element that you want to appear only and exclusively when the Product Has multiple variants

condition

is-variable

Product has no additional variants

Apply the following custom attribute on the element that you want to appear only and exclusively when the Product Has only the default variant

condition

is-not-variable

Product is tagged by

Apply the following custom attribute on the element that you want to appear only and exclusively when the Product Has a specific Tag/Tags

tagged-by

Tag

In the case you wish to check different tags, just divide them by comma

tagged-by

Tag 1,Tag 2

By default the match is done by checking ALL the tags you indicated inside the attribute. You can modify this behaviour by adding the optional attribute

any

true

Available conditions for Variants

By adding specific custom attributes to elements inside the Product Custom Element, you can enable conditional visibility, allowing those elements to appear or disappear depending on the currently selected variant.

Variant is In Stock

Apply the following custom attribute on the element that you want to appear only and exclusively when the currently selected variant is In Stock

condition

in-stock

Variant is Out of Stock

Apply the following custom attribute on the element that you want to appear only and exclusively when the currently selected variant is Out of Stock

condition

out-of-stock

Last Item in Stock

Apply the following custom attribute on the element that you want to appear only and exclusively when the currently selected variant has only 1 item in Stock

condition

last-in-stock

Less than 5 Items in Stock

Apply the following custom attribute on the element that you want to appear only and exclusively when the currently selected variant has less than 5 items in stock

condition

low-stock

Variant is on sale

Apply the following custom attribute on the element that you want to appear only and exclusively when the currently selected variant is On sale, and that means it has a Compare At price set and major than the Price

condition

on-sale

Variant is disabled

Apply the following custom attribute on the element that you want to appear only and exclusively when the currently selected variant is Disabled, and that means that the combination of options doesn't exists

condition

disabled

Variant is purchasable in subscription

Apply the following custom attribute on the element that you want to appear only and exclusively when the currently selected variant Can be purchased in subscription

condition

subscription

Variant is not purchasable in subscription

Apply the following custom attribute on the element that you want to appear only and exclusively when the currently selected variant Cannot be purchased in subscription

condition

no-subscription