Products

Conditional Visibility

Hide/show your Webflow elements dynamically

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.

Smootify Docs

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

Name
condition
Value
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

Name
condition
Value
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

Name
condition
Value
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

Name
condition
Value
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

Name
tagged
Value
Tag

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

Name
tagged
Value
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

Name
any
Value
true

Product is not tagged by

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

Name
not-tagged
Value
Tag

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

Name
not-tagged
Value
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

Name
any
Value
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

Name
condition
Value
in-stock

Variant has More than 5 In Stock

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

Name
condition
Value
many-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

Name
condition
Value
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

Name
condition
Value
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

Name
condition
Value
low-stock

Less than 5 Items in Stock but not last

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 but not only 1

Name
condition
Value
low-not-last-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

Name
condition
Value
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

Name
condition
Value
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

Name
condition
Value
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

Name
condition
Value
no-subscription

Add to Cart

Create the perfect purchase flow

Metafields

Extending Your Store's Data

On this page

Conditional VisibilityAvailable conditions for ProductsProduct has different prices for each variantProduct has same price for each variantProduct has multiple variantsProduct has no additional variantsProduct is tagged byProduct is not tagged byAvailable conditions for VariantsVariant is In StockVariant has More than 5 In StockVariant is Out of StockLast Item in StockLess than 5 Items in StockLess than 5 Items in Stock but not lastVariant is on saleVariant is disabledVariant is purchasable in subscriptionVariant is not purchasable in subscription