A user seeks to add image-based variant selection to a single product with three variants on the Dawn theme, which natively only supports pill or dropdown pickers. They prefer avoiding heavy apps or finding simple custom code.
Suggested Solutions:
Official Documentation: Reference Shopify’s liquid code examples for product variant selectors as a starting point for customization.
Custom CSS Approach: Use CSS targeting hidden inputs and labels with background images stored in the theme’s assets folder. This works when variants share consistent options and the “pills” setting is enabled. Example code snippets provided for the Dawn demo site.
Video Tutorial: A YouTube guide demonstrates implementing image swatches step-by-step.
App Recommendation: Rubik Variant Images app offers image swatches and filters product images by selected variant (developer disclosed affiliation).
Important Considerations:
The product page on the Dawn theme only has two options for the variant picker, either pills or dropdown. We need image selection.
I can see that there are a lot of Apps available, but they all seem to be somewhat overkill.
We only have one product with three variants. We just want the variant picker to be images.
Can someone recommend a simple App, or even better suggest some custom code to do the same?
You can referent to this docs https://shopify.github.io/liquid-code-examples/example/product-variant-selector then customize code depend your expected.
Hope can helpful to you!
That’s an advanced customization so more than a simple forum post.
Currently an old closed issue for Dawn issues about “swatch”
https://github.com/Shopify/dawn/issues/224
Here’s some example CSS for dawn to tailor to need if:
It targets the hidden input and it’s label then apply background image, that is images that are added to the themes assets folder.
For example for html inputs rendered for the dawn demo site
https://theme-dawn-demo.myshopify.com/products/louise-slide-sandal?variant=39577004015705
{% assign imageSwatchOptionName = "Color"
{% assign imageSwatchOptionValues = "Buttermilk,Gummy,White" %}
{% comment %}
https://shopify.dev/docs/api/liquid/filters/asset_img_url
https://shopify.dev/docs/api/liquid/filters/asset_img_url#asset_img_url-size
{% endcomment %}
If you need more that than, and need advanced customizations then contact me directly by email for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.
Archived - For old shopify vintage themes there was a tutorial that could be used as starting point but has to be modified for OS2.0 themes architectures.
XYproblem be sure swatches are the goal, Image-Swatches can sometimes not be the best option when instead you need variant image-groups so only images relevant to the select options show in the products main image-gallery; aka image-sets feature in some themes. Current native behavior is a variant can only have 1 image, and there is a similar but not quite right feature in dawn product-info section settings “Hide other variants’ media after selecting a variant”
Or another alternative for visual navigation there’s also tuts floating around for linking image-gallery images to variant-options to let customers be able to click images in the main image-gallery to select options; that can be subverted into small swatches.
Performance issue, when you add an image-swatch for every value of an option that is 1 more image for every value the users browser has to download, this can quickly compound each option type that uses image-swatches and also for multiple products on a page that shows variant-options.
Further, small swatches may be good for textures,material-shots,etc but are counter-productive for large image shots which need larger images taking up more screen real-estate to the point they really aren’t a “swatch” anymore but just an inline image gallery.
Good Hunting.
Here is the exact solution which you are looking for.
You should follow the steps from this video.
Hi @LanceAllison I see this is an old post but I would like to share an answer for people coming from search. You can use Rubik Variant Images app which will allow you to show variant image swatches and also additionally it will show only selected variant images on your page. For the full transparency I am founder and developer of this app. You can watch my video to see it in action.
