Product page: Yarn properties
The Yarn Properties block displays a visual grid with color swatches for yarn products. It is a specialized block designed for yarn stores, where the customer selects a color from an image instead of a dropdown menu.
This block is only displayed on products tagged as yarn (with the tag ","fargetemplate","). Nothing is displayed on all other products.
What it displays
A grid of thumbnails representing the different yarn colors or variants available for the product. Clicking a swatch selects that variant and updates the page. The grid is responsive, with a specific number of columns for desktop, tablet, and mobile.
Settings
Setting | What it controls |
|---|---|
Columns — desktop | Number of swatch columns on large screens |
Columns — tablet | Number of swatch columns on medium screens |
Columns — mobile | Number of swatch columns on phones |
Column spacing | Space between swatches |
Image width | The width of each swatch in pixels (default 120) |
Image height | The height of each swatch in pixels (default 120) |
Margin | Space around the block |
Hide thumbnails
Products with many color variants — typically yarn products with 20, 30, or 40 colors — often end up with a row of thumbnails at the top that shows exactly the same as the color variant grid further down the page. Two places, same information.
You can use the tag ","hide_thumbnails", " on a product to hide this thumbnail row. The main image and the color variant grid are displayed as normal — only the redundant image row disappears.
Setup and visibility
- Block conditions for show/hide rules.
Tips
- Ensure that yarn products are tagged with
color templateand have the correct color variant images uploaded — without this, the block remains hidden. - On phone, 2 or 3 columns are usually enough. 4 or more makes each swatch too small to tap.
- The image width and height settings allow you to balance loading time against detail. 120 pixels is a good standard for color swatches; larger if color nuances are subtle.