1. What is Shop by attribute?
The Shop by attribute section lets shoppers browse products by one attribute, such as color, material or finish. Each attribute value appears as a tab (a color swatch, an image or a text label). When a shopper clicks a tab, the product grid below shows only products with that value, and each product card opens with the matching variant already selected.
Use it to create shopping paths like "Shop by Shade", "Shop by Material" or "Shop by Finish" on your home page or any other page.
2. Section Components
| Section | Shop by attribute | Holds the heading, description, tab style, data source, product card, carousel and layout settings. |
|---|---|---|
| Available blocks | Item | One tab. Each Item has a display name, the variant value to match, and a swatch color or image (depending on Tab style). In Multiple mode, each Item also has its own collection. Up to 12 Items per section. |
3. Location & Setup
To add & set up the Shop by attribute section:
- Open the Shopify Theme Editor (Online store > Themes > Customize).
- Open the page template you want, e.g. Home page.
- Click "Add section".
- Select "Shop by attribute" (under the Collections category). The section is added with 3 Items.
4. Highlight Features
- Three tab styles: Show each attribute value as a Color swatch, an Image, or a Text label. Swatches can be Rounded or Square.
- Two data sources: Give each tab its own collection (Multiple), or filter one collection by variant value (Single).
- Variant pre-selection: Product cards open with the variant that matches the active tab, so a "Sage" tab shows sage images and prices.
- Smart hiding: On your live store, tabs with no matching products are hidden automatically, and the whole section is hidden if no tab has products.
- "View all" button: Links to the active tab's collection, with a label that changes per tab (e.g. "Shop Sage").
- Carousel and layout control: Separate desktop and mobile settings for carousel, pagination style, products per row, rows, spacing and padding.
5. Common Use Cases
🤔 How to set up Shop by attribute with one collection per tab (Multiple)?
Choose this when each attribute value already has its own collection, e.g. a "Sage collection" and a "Terracotta collection".
STEP 1: Set the data source.
Click the Shop by attribute section. In Data source, set Collection data type to Multiple.
STEP 2: Enter the option name.
In Option name, type the product option name exactly as it appears in your products in Shopify admin, e.g. Color.
⚠️ Option name is required: Only products that have this option are shown. If Option name is empty or does not match your product option (check spelling and spaces), the tabs show no products.
STEP 3: Set up each Item block.
- Display name: The name shown under the swatch and in the button label, e.g. Sage.
- Variant value display: The variant value exactly as on your products, e.g. Sage. Only products that have this value are shown, and their cards open on that variant. Leave it empty to show every product in the collection that has the option.
- Collection: The collection for this tab.
- Color or Image: The swatch for this tab (see the tab style use case below).
STEP 4: Add more Items.
Click "Add block" > "Item" for each extra value, up to 12. Drag Items to reorder the tabs.
STEP 5: Click "Save" when done.
🤔 How to set up Shop by attribute from a single collection (Single)?
Choose this when all products are in one collection and you want each tab to filter it by variant value.
STEP 1: Set the data source.
In Data source, set Collection data type to Single, then pick the Collection.
STEP 2: Enter the option name.
In Option name, type the product option name exactly as in Shopify admin, e.g. Color.
STEP 3: Enter a variant value for every Item.
For each Item, fill in Variant value display (e.g. Sage) and Display name. The Item's own Collection setting is not used in Single mode.
⚠️ Items with an empty Variant value display are hidden on your live store in Single mode. They still appear in the Theme Editor so you can finish setting them up.
STEP 4: Click "Save" when done.
⚠️ Note: In Single mode, the "View all" button opens the selected collection filtered by the active tab's value, and its label is always "View all". For the collection page to filter correctly, enable this option (e.g. Color) as a filter in the Shopify Search & Discovery app.
🤔 How to change the tab style?
Click the Shop by attribute section and choose a Tab style:
- Color: Each tab is a color swatch. Pick the color in each Item's Color setting.
- Image: Each tab is an image swatch, e.g. a fabric or material photo. Upload it in each Item's Image setting.
- Text: Each tab is a text label using the Item's Display name.
For Color and Image tabs, you can also set:
- Swatch style: Rounded (circle) or Square. Square swatches get slightly rounded corners when your theme uses rounded corners.
- Enable name below swatches: Shows the Display name under each swatch. Not applied to Text tabs.
⚠️ Note: If there are more tabs than fit across the screen, the tab row scrolls and shows arrows automatically.
🤔 How to customize the heading and the "View all" button?
In the Content group:
- Heading: Default "Shop by Shade". Wrap words in [ ] to highlight them, and choose the Marker (Underline or Font highlight).
- Heading size, Heading tag and Heading alignment: The alignment also sets where the tabs line up.
- Description: Optional text under the heading.
- Show "View all" button: Shows a button under the products that links to the active tab's collection.
- Button label (Multiple mode only): Default "Shop [name]". [name] is replaced with the active tab's Display name, e.g. "Shop Sage".
- Button style: Primary, Secondary or Text link.
🤔 How to set up product cards, carousel and layout?
Product cards: Turn on or off Show vendor, Show product rating (needs a product rating app), Show highlighted features, Show highlighted attributes and Show Quick View button.
🖥️ Desktop layout: Set Products per row on desktop (2–5) and Number of rows (1–4). Each tab shows up to products per row × number of rows products. You can also set block spacing, full width, section divider and padding.
📱 Mobile layout: Set Products per row on mobile (1 or 2), block spacing, section divider and padding.
Carousel:
- 🖥️ Enable carousel on desktop and Desktop pagination style (Adapt to theme settings, None, Line, Dots).
- 📱 Enable swipe on mobile and Mobile pagination style (Adapt to theme settings, None, Line, Dots, Arrows).
⚠️ Note: Adapt to theme settings uses the pagination style set in Theme settings > Design, so this section matches the other carousels in your store.
⚠️ Note: Desktop pagination is shown when Enable carousel on desktop is on and Number of rows is 2 or more.
Color scheme: Choose Store colors, Soft, Bold or Accent for this section.
🤔 Why is a tab or the whole section not showing?
On your live store, a tab is hidden when none of its products match. Check these in order:
-
Option name matches the product option name exactly (e.g.
Color, notColour). - Variant value display matches the variant value exactly (e.g. Sage).
- The tab's collection (Multiple) or the section's collection (Single) contains products with that option and value.
- In Single mode, every Item has a Variant value display.
⚠️ Note: All tabs still show in the Theme Editor, so you can set them up. If no tab has matching products, the whole section is hidden on the live store.
6. Support Information
Need help? Contact support@omnithemes.com or visit omnithemes.com.
