Theme: Dawn version 12.0.
I have a product with two sets of variant pickers. the first variant picker simply shows “Gold” or “Silver” so that the customer can select their desired metal for the jewellery. the next variant picker has the different styles of jewellery. Currently, I have all the variant images in the product section of the store defined correctly. however they are all in gold. This means that regardless of whether you pick ‘Gold’ or ‘Silver’, the first image that is displayed is the image assigned to the first variant in the second variant list.
I have two separate images; one shows a selection of gold jewellery and the other shows a selection of silver.
What I need is the selection of gold jewellery to show on page load as the main product image. i also need the selection of silver jewellery to show when ‘Silver’ is clicked (same thing when ‘Gold’ is clicked). After this, the image can change as usual if the customer selects any value in the second variant picker.
I hope this makes sense 
Below is the code in the product-media-gallery.liquid file which I have attempted by myself but cant get it to work:
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
{%- assign variant_title = product.selected_or_first_available_variant.title | handle -%}
{%- assign media_position = 0 -%}
{%- if variant_title == 'Gold' -%}
{%- assign media_position = 1 -%}
{%- elsif variant_title == 'Silver' -%}
{%- assign media_position = 2 -%}
{%- endif -%}
{%- if media_position > 0 -%}
<li
id="Slide-{{ section.id }}-{{ featured_media.id }}{{ id_append }}"
class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}"
data-media-id="{{ section.id }}-{{ featured_media.id }}"
>
{% render 'product-thumbnail',
media: featured_media,
media_count: media_count,
position: media_position,
desktop_layout: section.settings.gallery_layout,
mobile_layout: section.settings.mobile_thumbnails,
loop: section.settings.enable_video_looping,
modal_id: section.id,
xr_button: true,
media_width: media_width,
media_fit: section.settings.media_fit,
constrain_to_viewport: section.settings.constrain_to_viewport,
lazy_load: false
%}
</li>
{%- endif -%}
{%- endif -%}