I’m working on a furniture store and need help organizing our product variant display. We sell chairs with multiple fabric options, and currently all our upholstery swatches are displayed in one large grid (see attached screenshot).
We have 20+ fabric variants displayed as circular color swatches
All variants are shown in a single continuous grid
Customers find it overwhelming to browse through all options
What I want to achieve:
Divide the fabric swatches into 3 distinct visual sections
Each section represents a different fabric collection we carry
Keep the current swatch styling and functionality
Add clear visual separation (headers, spacing, or dividers)
My questions:
What’s the best approach - theme customization, metafields, or a third-party app?
Has anyone implemented similar grouped variant displays?
Should I use variant metafields to categorize the fabrics by collection?
Any recommended apps that handle variant grouping well?
I’m comfortable with basic Liquid templating but would prefer a solution that doesn’t require major theme overhaul. Our current setup works great functionally - just needs better visual organization.
Any guidance, code snippets, or app recommendations would be greatly appreciated!
This definitely can be done in Liquid.
Editing theme code will make it more complex to update to newer theme versions, but, probably not a deciding factor if you’ve already modified theme code.
Now, say your theme has code like this:
{% for value in option.values %}
{% render 'swatch', value: value %}
{% endfor %}
you can modify it like this:
{% assign order = "Colors:Red,Blue,Green|Metals:Gold,Silver,Bronse|Woods:Oak,Birch" %}
{% assign groups = order | split: "|" %}
{% assign seen = "" %}
{% for group in groups %}
{% assign parts = group | split: ":" %}
<p>{{ parts.first }}</p>
{% assign values = parts.last | split: "," %}
{% for v in values %}
{% assign value = option.values | find: "name", v %}
{% if value %}
{% render 'swatch', value: value %}
{% assign seen = seen | apppend: "," | append: v %}
{% endif %}
{% endfor %}
{% endfor %}
{% # in case some option values are not in "order" yet %}
{% for value in option.values %}
{% unless seen contains value.name %}
{% render 'swatch', value: value %}
{% endunless %}
{% endfor %}
You can use Easify Product Options to group your fabric swatches into clear sections (e.g. Wood, Cotton, Velvet) instead of one big grid. It keeps the same swatch style, adds headers/dividers for clarity, and doesn’t require any code.
Perfect if you want flexible customization and a smoother browsing experience. Here’s how it works:
I hope you are doing well. You can achieve a similar setup using Inkybay – Product Personalizer app. With Inkybay’sProduct Option feature, you can organize your fabric choices into clear categories (such as Cotton, Velvet, or Leather) instead of showing all swatches in one large grid. You can create separate fabric categories like Cotton, Velvet, and Leather using dropdowns, image/color swatches, radio buttons, etc. Under each category, you can add multiple fabric options so customers can pick their preferred one directly from that group instead of scrolling through a long list.
Customers can also select how many items they want for each fabric, which is great if they’re ordering multiple chairs with different materials. All the selected fabric and quantity details will be included in the order file. This setup not only keeps your product page clean and easy to navigate but also gives customers a smoother, more organized shopping experience.
The best part is that Inkybay requires no coding, the setup process is simple, and it integrates easily with Shopify. Moreover, it offers a 21-day free trial, allowing you to explore these features without committing and see whether it’s the right fit for you.
