How can I use image selection for variant picker on Dawn theme?

[LanceAllison]

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?

[VIEKIN]

@LanceAllison 

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!

[PaulNewton]

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:

• if all the options are the same for a bunch of different products/variants
• if the variant-selection setting is the pills option, 

 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" %}
<style>
{%- for value in imageSwatchOptionValues -%}
[name="{{imageSwatchOptionName}}"][value="{{value}}"] {
{%- assign image_file_name = value | append:".png" %}
{%- comment %} I.e. Buttermilk.png,Gummy.png,White.png in the themes assets folder{% endcomment -%}
 background: center center no-repeat url({{image_file_name | asset_img_url}} );
}
{%- endfor %} 
</style>
{% 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. 

https://web.archive.org/web/20230207173043/https://community.shopify.com/c/shopify-design/product-pa... 

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.

[MRamzan]

Here is the exact solution which you are looking for.

You should follow the steps from this video.