Product Variant Swatch
We've developed a specialized component for both the Product Page and Product Item to enhance usability. The Product Variant Component enables you to generate a variant swatch, allowing variant selection without page reloading. It shows you what variant you're looking at and lets you change details when you choose a different one. Below, you'll find all the elements you can use.
Product Variant Component (Radio Buttons)
Here you can find all the Elements which are needed and can be used inside the Product Variant Component. The grey outlines show how the elements should be nested within one another.
product-variant-container: This Element wraps and renders the component. All the following Element need to be inside this Element.
li-element = product-variant-containeradd-to-cart: This element enables the "add-to-cart" function. Whenever someone clicks on it, the currently selected variant will be added to the cart. It needs to be inside the product-variant-container
li-element = add-to-cartcheckout-add-to-cart: This element enables the "add-to-cart" function but redirects the customer directly to the Shopify Checkout. You can choose between using either add-to-cart or checkout-add-to-cart, depending on your preferred action. It needs to be inside the product-variant-container
li-element = checkout-add-to-cartadd-to-cart-quantity: This Attribute should be added to an input field. It allows your customers to adjust the quantity before adding the variant to the cart. It needs to be inside the product-variant-container
li-element = add-to-cart-quantityproduct-options-loop: This Element generates a list containing all the options created for that specific product (e.g., Size, Color, etc.). It needs to be inside the product-variant-container
li-element = product-options-loopproduct-options-name: This Element shows the name of the option, such as "Color." It needs to be inside the product-options-loop
li-element = product-options-nameproduct-option-loop: This element generates a list of all option values inside the option (e.g., Red, Green, etc.). It needs to be inside the product-options-loop
li-element = product-option-loopproduct-option-input: This Element represents a single option value, for example, "red," "blue," etc. When the Option Value is not available, the class is-not-available will be added. It needs to be inside the product-option-loop
li-element = product-option-inputproduct-option-name: This Element needs to bin inside the product-option-input and displays the name of the current option value ("red", "blue" etc.). It needs to be inside the product-option-input
li-element = product-option-namedirect-add-to-cart: You can use this attribute without a product-variant-container if you don’t want to give users the option to select a variant. In this case, the first available variant will automatically be added to the cart.
li-element = direct-add-to-cartProduct Variant Component (Select Fields)
Here you can find all the Elements which are needed and can be used inside the Product Variant Component. The grey outlines show how the elements should be nested within one another.
product-variant-container: This Element wraps and renders the component. All the following Element need to be inside this Element.
li-element = product-variant-containeradd-to-cart: This element enables the "add-to-cart" function. Whenever someone clicks on it, the currently selected variant will be added to the cart. It needs to be inside the product-variant-container
li-element = add-to-cartcheckout-add-to-cart: This element enables the "add-to-cart" function but redirects the customer directly to the Shopify Checkout. You can choose between using either add-to-cart or checkout-add-to-cart, depending on your preferred action. It needs to be inside the product-variant-container
li-element = checkout-add-to-cartadd-to-cart-quantity: This Attribute should be added to an input field. It allows your customers to adjust the quantity before adding the variant to the cart. It needs to be inside the product-variant-container
li-element = add-to-cart-quantityproduct-options-loop: This Element generates a list containing all the options created for that specific product (e.g., Size, Color, etc.). It needs to be inside the product-variant-container
li-element = product-options-loopproduct-options-name: This Element shows the name of the option, such as "Color." It needs to be inside the product-options-loop
li-element = product-options-nameproduct-option-select: This attribute should be applied to a select element. We recommend using a Webflow custom element, as you’ll also need to add an attribute to the options within the select element. It needs to be inside the product-options-loop
li-element = product-option-selectproduct-option-select-loop: This Element represents a single option value, for example, "red," "blue," etc. This attribute needs to be placed on a option element inside the product-option-select. We recommend using a Webflow custom element for this.
li-element = product-option-select-loopdirect-add-to-cart: You can use this attribute without a product-variant-container if you don’t want to give users the option to select a variant. In this case, the first available variant will automatically be added to the cart.
li-element = direct-add-to-cartLast updated
Was this helpful?