Variation Photo Linking

Ask Me Anything Q&A Store Design with Tim
1

What’s your question? What do you want to achieve?

We link photos to our listing variations so that customers can see exactly what item they are purchasing. The first variation in our listings doesn’t show unless you choose another one first and then toggle back to the first variation. The main photo just sticks. Why is this?

(Optional) Store URL

(Optional) Upload screenshots you want feedback on

Screenshot 2026-06-02 at 4.43.05 AM.png
Screenshot 2026-06-02 at 4.43.05 AM.png2408×1328 365 KB

2

I’d call it a theme glitch.

Ideally, talk to support, try to reach out to this guy – Profile - bakura10 - Shopify Developer Community Forums

I believe it’s possible to create a small “Custom liquid” code to unselect first button if no variant is preselected.

This way clicking the first button will trigger the image change.

Ok, try this:
  1. Add a “Liquid” block to the “Product” section.
    Do not forget to add a title to this block
  2. Paste this code:
{% if product.variants.size > 1 and product.selected_variant == nil %}
  <script>

    var vs = document.querySelector('#shopify-section-{{section.id}}  .product-form__single-selector:checked');

    var showFeatured = () => {
      vs.checked = false;
    };

    if (vs) {
      if (document.readystate == 'complete') setTimeout(showFeatured, 100)
      else document.addEventListener('DOMContentLoaded', showFeatured);
    }
  </script>
{% endif %}
<style id=custom-liquid--tim>
  .product-block-list__item:has(#custom-liquid--tim) {
    display: none;
  }
</style>

The code will hide this block from display.
It will also see if no variant is selected and unselect the first checked button, this way clicking it should show the first variant’s image.