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

Shopify Discussion

Topic summary

A user seeks to add variant-specific blocks in Shopify’s Story theme to dynamically change product images when customers select different colors or sizes.

Current Limitation:

  • Story theme doesn’t natively support dynamic block updates based on variant selection
  • Default variant selectors don’t automatically update content blocks beyond images

Proposed Solutions:

  1. Enable Dynamic Variant Media - Link product images to specific variants in Shopify Admin and verify “Enable variant images” is toggled on in theme settings

  2. Code Modification Approach:

    • Edit product.json template to add variant-specific block structures
    • Implement JavaScript in theme.js to show/hide blocks based on selected variant ID
    • Requires manual code editing in theme files

  3. No-Code Alternative - Install apps like “Variant Option Product Options” or “Infinite Options” from Shopify App Store

Status: Solution provided with technical implementation steps, awaiting user feedback on whether the approach resolves their needs.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

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

2

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 Template1. Go to Online Store > Themes > Edit Code.

  1. Open product.json under the templates folder.
  2. Look for the “blocks”: [ section inside the “sections” object.
  3. 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 File1. Open Sections > main-product.liquid.

  1. Find the variant selector code (product.variants).
  2. Insert this below the variant selector to show a block only when a certain variant is selected:

{% for variant in product.variants %}

{% if variant.title contains “Red” %}

This is a red variant block.

{{ variant.title }}

{% endif %}

{% 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