Here is the solution which should work in all Dawn family themes, does not require editing theme code and does not break anything.
Go to the “Product information” section and add a “Custom liquid” block at the bottom of the section.
Paste the following code:
{% if product.variants.size > 1 and product.selected_variant == nil %}
<script>
var mg = document.querySelector('#shopify-section-{{section.id}} media-gallery');
var vs = document.querySelector('#shopify-section-{{section.id}} variant-selects [name]');
var pf = document.querySelector('#shopify-section-{{section.id}} product-form');
var showFeatured = () => {
/* select featured product image */
mg.setActiveMedia( '{{ section.id }}-{{ product.featured_media.id }}' );
/* disable cart button for now (for ver>=15) */
pf.toggleSubmitButton && pf.toggleSubmitButton( true, 'Select options' );
/* change variant selectors to force selection */
if (vs.tagName == "SELECT") {
vs.insertAdjacentHTML( 'afterbegin', `<option disabled>Select options</option>` );
vs.children[0].selected = true;
} else vs.checked = false;
};
if (mg && vs && pf) {
if (document.readystate == 'complete') setTimeout(showFeatured, 100)
else document.addEventListener('DOMContentLoaded', showFeatured);
}
</script>
{% endif %}
Demo is here – Absolut Vodka 700mL – BBK Market
It’s Dawn, but works same with Trade:
Works best with version 15 and newer.
Only drawback is a small LCP metric penalty.
Also, the theme already have setting to not show variant images in thumbs – “Hide other variant media after one is selected”:
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it