I downloaded a new dawn theme just to see what the default settings are. Most of what I showed you can be done without any code. The part that will require code (as far as I know) is showing the main photo first by default. So I did notice if you use the same photos for your variants and your features photos it ends up just showing you the variants. How I got around the was literally just duplicating the images one labeled for variant images and 1 labeled for the featured photos. Then of course the main photo with a picture of all the products is optional but I like the way it looks showing all the colors.
Here is the steps I followed:
Create a new product (just go ahead and start from scratch to make sure everything is covered)
Add new products to the main section:
Then of course move the Main image into the Main image:
Go to the Category Metafields section and Select color. After selecting color click Add new entry at the bottom:
This is how they should be filled out:
Then just keep doing the same thing for all the rest:
Until it looks something like this:
Next go down to the variants and add photos for the variant. Make sure you upload new photos that have a different name. Something like variant-red just so you can keep an eye on what images are actually showing up. This will give you a better idea for troubleshooting just incase mistakes are made.
Next if you want to show the main photo first the code I edited was the product-media-gallery.liquid. You would want to make a copy of the original dawn theme if you have made any changes to your dawn theme (code wise) that you want to keep. Otherwise, if this is a blank slate it doesn’t really matter that much if you mess up because you can just download a new dawn theme.
This is the code for the media gallery:
{% comment %}
Renders a product media gallery. Should be used with 'media-gallery.js'
Also see 'product-media-modal'
Accepts:
- product: {Object} Product liquid object
- variant_images: {Array} Product images associated with a variant
- is_duplicate: {Boolean} Prevents rendering uneeded elements and duplicate ids for subsequent instances
Usage:
{% render 'product-media-gallery', is_duplicate: true %}
{% endcomment %}
{%- liquid
if section.settings.hide_variants and variant_images.size == product.media.size
assign single_media_visible = true
endif
assign media_count = product.media.size
if section.settings.hide_variants and media_count > 1 and variant_images.size > 0
assign media_count = media_count | minus: variant_images.size | plus: 1
endif
if media_count == 1 or single_media_visible
assign single_media_visible_mobile = true
endif
if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == 'show' or section.settings.mobile_thumbnails == 'columns' and media_count < 3
assign hide_mobile_slider = true
endif
if section.settings.media_size == 'large'
assign media_width = 0.65
elsif section.settings.media_size == 'medium'
assign media_width = 0.55
elsif section.settings.media_size == 'small'
assign media_width = 0.45
endif
assign id_append = ''
if is_duplicate
assign id_append = '-duplicate'
endif
-%}