How to Add Variant-Specific Blocks in Shopify Story Theme?

[yang1]

Does anyone know how to get more blocks in Shopify Story theme? I am trying to get more selected variant such as changing product colour when selecting different colour and also changing photo of different size of product when selecting different size

[DaisyVo]

Hi @yang1 

I notice that you want to display variant-specific content in the Story theme, such as updating images when a customer selects a different color or size. Shopify’s default variant selector doesn’t dynamically update blocks (like images, text, or other sections) based on variant selection, but you can achieve this by modifying the theme’s code.

Here’s how to do it:

1. Enable Dynamic Variant Media (Shopify 2.0 Feature)

Shopify’s built-in variant media feature automatically changes images when a variant is selected. Make sure your product media settings are correctly linked:

• Go to Shopify Admin > Products and open the product.
• Scroll down to Media, and ensure each variant has the correct image assigned.
• If it’s not working, check if your theme settings have “Enable variant images” toggled on (Online Store > Themes > Customize).

2. Add Variant-Specific Blocks in the Story Theme

The Story theme doesn’t provide variant-specific blocks out of the box, so you’ll need to modify the product template. Here’s how to do it:

Step 1: Edit the JSON Template

1. Go to Online Store > Themes > Edit Code.
2. Open product.json under the templates folder.
3. Look for the "blocks": [ section inside the "sections" object.
4. Add this structure inside the blocks array to include a new dynamic block:

{

  "type": "variant_block",

  "settings": [

    {

      "id": "variant_condition",

      "type": "text",

      "label": "Variant Condition"

    }

  ]

}

This allows Shopify’s theme editor to recognize the block.

Step 2: Modify the Liquid File

1. Open Sections > main-product.liquid.
2. Find the variant selector code (product.variants).
3. Insert this below the variant selector to show a block only when a certain variant is selected:

{% for variant in product.variants %}

  <div class="variant-block" data-variant-id="{{ variant.id }}" style="display: none;">

    {% if variant.title contains "Red" %}

      <p>This is a red variant block.</p>

      <img src="{{ variant.featured_image | img_url: 'large' }}" alt="{{ variant.title }}">

    {% endif %}

  </div>

{% endfor %}

Then, add this JavaScript inside theme.js (or custom.js) to make the blocks update dynamically:

document.addEventListener("DOMContentLoaded", function() {

  let variantSelector = document.querySelector('select[name="id"]');

  if (variantSelector) {

    variantSelector.addEventListener("change", function() {

      let selectedVariant = this.value;

      document.querySelectorAll(".variant-block").forEach(block => {

        block.style.display = block.getAttribute("data-variant-id") === selectedVariant ? "block" : "none";

      });

    });

  }

});

3. Alternative: Use a No-Code App

If you prefer not to edit code, you can use an app like Variant Option Product Options or Infinite Options from the Shopify App Store. These apps let you control variant-specific blocks without coding.

This method should work for adding more variant-specific blocks to your Story theme. If you’re facing issues or need more customization, just let me know and I’ll do my best to help!

Best regards,
Daisy