Skip to main content

Adding Product Swatches

Add the product swatches to your product page

Watch this tutorial below

1. Click "Online Store"

2. Click on "Customize".

3. Next, click on the dropdown

4. Once that's done, click on "Products".

5. Afterwards, click on "Default product".

6. Click Product Information

7. Expand the Buy Buttons Group

8. Hover directly below to get the "add block" button

9. Next, click on "Product swatch group".

  1. Select your "Swatch Group" you created earlier in the "Swatch container" setting

  2. Enter the name of the field in the "List field name" spot. This is the name of the "field" inside your swatch group you created.

Additional Configuration Options​

Once you've added the Product swatch group block, you have additional options to customize it:

Selection mode​

Choose between two modes:

  • Single (radio): Ensures exactly one swatch posts as properties[Your key]. Customers can only select one option.
  • Multiple (checkboxes): Lets shoppers choose many options. The selections are saved as a comma-and-space separated value in a single property.

Styling & Layout​

Adjust the following to match your brand:

  • Heading and description copy
  • Swatch size
  • Tooltips
  • Grid spacing
  • Border styles

Note: Images from your metaobjects are used directly. If a swatch item lacks media, the theme renders a neutral fallback color swatch so you can spot incomplete entries.

Optional Features​

Add-on Fees​

You can add fees for specific swatches. Enable option-specific fees and configure them using the exact swatch names:

Demo 1|fee-product-handle
Navy Blue|premium-color-fee

The fee price will automatically appear next to the swatch when displayed. Learn more in Custom Option Fees.

Conditional Display​

Show or hide the swatch group based on the value of another property using the Conditional logic settings. The block remains hidden and its inputs are disabled until the condition is met.

Product Tag Filter​

Limit the swatch group to products with a specific tag using the Only show when product has tag setting.

Width Controls​

Choose full or half width on tablet/desktop for easier layout mixing.

Customer Experience​

  • Shoppers see large, tap-friendly swatches with tooltips and accessible fieldset/legend markup.
  • Radio mode submits exactly one value (e.g., properties[Patch Color] = Indigo twill)
  • Checkbox mode stores all selected swatches in a single property string while keeping the UI responsive for both mouse and keyboard users.
  • The resulting line item property in checkbox mode looks like Patch Color: Indigo twill, Navy Blue in the cart.

Troubleshooting​

  • Confirm each property has a unique key before testing. Shopify overwrites duplicate property keys with the last value submitted.
  • When fees are involved, preview the cart to ensure the correct fee product is added. Refer to Custom Option Fees for debugging tips.
  • If a conditional block never appears, double-check the comparison value spelling—it compares lowercase, trimmed text behind the scenes.
  • When using the Hat Lab wizard, keep property keys consistent between the wizard steps and the final product page so data flows cleanly into the cart.

See also: