Set Up Size Swatches with Labels

Set Up Size Swatches with Labels

Replace size dropdowns with styled, clickable size buttons. Makes sizing selection faster and more intuitive.

Before You Start

Decide on your size naming (S/M/L or Small/Medium/Large or numeric sizes).

Step 1: Create a Size Attribute

Navigate to Products > Attributes.
Create or edit a “Size” attribute.
Set Type to Label.
Click Save Attributes.

Step 2: Add Size Options

Click Configure Terms next to your size attribute.
Add each size:

  • Name: S, M, L, XL (or your sizing system)
  • Hover Image (Optional): Upload size chart or fit guide

Click Add New Term for each size.
Click Save Changes.

Step 3: Apply and Style

Add the size attribute to your products as variations.
The sizes will display as styled buttons based on your shape and border settings.

Result

Sizes appear as clean, clickable buttons instead of a dropdown menu.