The product options element shows a set of options available for the parent product card. When the user selects the options, Looop updates the price, the compare price, and the hero picture. You can design product options using a dropdown or radio button.

​
Setup

We will create a template for product options. This template will be used to create product options for each product card.

  1. Create a div block and give it the following Attribute:
looop=product-option-wrapper
  1. Inside the div block, create a text block and give it the following Attribute:
looop=product-option-name

3.. Inside the div block, create a radio element and give it the following Attribute:

looop=product-option-select

​
Checked State

When the product option is selected, the radio button should be checked. To do this, we will add a combo class of is-checked to the radio button. You can use this class to design how your checked radio buttons look.

​
Color Swatch

Radio buttons can be used to show color swatches. To do this, we will add a background color to the radio button.

We need to add following custom attributes to the radio button:

lp-is-color=true

Add the following custom attribute to the options wrapper:

lp-options-set=Color

Change the value of lp-options-set to the name of the option set.

As long as your color options names are simple colors like Black, white, Red, Blue etc. this will work. However, if you are using custom color names like Space Grey, Phntom Black, Plum Purple etc you need to use LooopConfig.

​
Custom Colors config

Add custom color to LooopConfig in the following format:

<script>
   window.LooopConfig = {
   colors : {
   "Ionic White": "#ffff00",
    "Basalt Black": "#000000",
    "Lunar Gray" :"#4e4e4e"
   }
  }
</script>

​
What will be updated?

On page load for each Shopify product option, we will duplicate the product-option-wrapper for each option set, duplicate product-option-select for each value of each option set, and update the product-option-name with the product option name.

Option Radio buttons element should be inside a Webflow Form element.

DropdownDropdown