Store setup
Swatches
Show color and pattern swatches on product pages, product cards and filters using Shopify's built-in swatches.
Vellora uses the swatches you set up in Shopify. You don't need an app or special tags. When a product option has swatches, Vellora shows them on the product page, in quick view, on product cards and in filters.
How swatches work in Shopify
Shopify stores swatches on metaobject entries. When you connect a product option, such as Color, to a category metafield, each option value is linked to an entry that holds a color, an image or both. That color or image is the swatch.
Set up swatches
- Set a product category. In your Shopify admin, open a product and choose a category under Category, such as Apparel > Clothing > Shirts. Categories with a color attribute let you connect the Color option.
- Connect the option. In the Variants card, open the Color option. Under the option name, choose to connect it to the Color category metafield.
- Pick values. Choose existing color entries or create new ones, such as "Sage" or "Oatmeal".
- Set the swatch. For each new entry, choose a color, upload a pattern image, or both. You can edit entries later in Content > Metaobjects.
- Click Save.
If an entry has an image, Vellora shows the image. Otherwise it shows the color. An entry with neither shows an empty circle.
Where swatches appear
| Place | What customers see |
|---|---|
| Product page | Round swatch buttons for the option, with the selected value named next to the option label. |
| Quick view | The same swatch picker as the product page. |
| Product cards | Up to five small swatches under the product, plus a "+3" style count for the rest. |
| Filters | Swatches next to each value, when the filter is set to show swatches in Search & Discovery. |
Product page
In the Variant picker block, options with swatches always show as swatches, even when the block Style is set to Dropdown. Other options on the same product, such as Size, follow the block style.
Unavailable values stay selectable so customers can see the sold out variant, and a Back in stock form block can collect their email. See Product pages.
Product cards
Turn card swatches on or off with Theme settings > Product cards > Show color swatches. Cards show the first option that has swatches. See the theme settings reference.
Filters
- Open the Search & Discovery app and go to Filters.
- Add or edit the filter for your color option or color metafield.
- Choose to display it as swatches, and save.
Vellora then shows each filter value with its swatch. See Collections and filters.
Tips
- Use the same entries across products. One "Sage" entry used everywhere keeps colors consistent and merges into a single filter value.
- Name values for people, not for stock codes. Screen readers announce the value name, not the color.
- Add a variant image for each color. When a customer picks a color, the gallery moves to that variant's image.