Add Video Inside Collapsible Accordion – [Product Description Shopify]

Welcome back to WebSensePro! In today’s tutorial, I’ll show you how to add videos inside the collapsible rows of your Shopify product pages. Shopify’s free themes like Dawn, Craft, and Sense don’t have a built-in option to do this. But don’t worry! In this video, I’ll guide you step by step on how to add videos specific to each product using Metafields.

Step 1: Adding schema

In main-product.liquid file and below

"label": "t:sections.main-product.blocks.collapsible_tab.settings.content.label"
        },

Add the following code:

{
          "type": "liquid",
          "id": "video-liquid",
          "label": "Liquid code"
        },

Step 2: Displaying Video

In main-product.liquid file below {{ block.settings.content }} add the following code:

{{ block.settings.video-liquid }}

Step 3: Different Video for each product

Now we will display separate video for separate product, create meta field with name space custom.video and paste following code in Liquid Section of Collapsible row

{{ product.metafields.custom.video }}

Step 4: Hide empty Collapsible row

Now we will hide collapsible row on those products where we don’t have video to add.

Wrap <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}> with following if condition:

{% if block.settings.video-liquid != blank %} 
{% endif %}

Step 5: Custom Video Icon

Create new asset “icon-video.svg” with the following code:

<svg class="icon" viewBox="0 0 20 20"><path fill="currentColor" d="M4.446 3.104h11.108c.945 0 1.807.388 2.432 1.013C18.612 4.74 19 5.601 19 6.55V13.45c0 .946-.388 1.807-1.014 2.433-.623.625-1.484 1.013-2.432 1.013H4.446c-.948 0-1.81-.388-2.434-1.012l-.039-.041C1.372 15.221 1 14.376 1 13.45V6.55c0-.945.388-1.806 1.012-2.431l.002-.002C2.641 3.491 3.501 3.104 4.446 3.104zm7.935 7.333c.435-.281.434-.594 0-.842l-3.488-2.429c-.355-.222-.724-.092-.714.371l.014 4.887c.03.502 .317.639 .739.407l3.45-2.394zm3.173-5.965H4.446c-.573 0-1.092.233-1.467.608l-.002.002c-.375.375-.608.894-.608 1.467V13.45c0 .558.221 1.066.579 1.438l.032.03c.377.377 .896.611 1.467.611h11.108c.571 0 1.091-.234 1.467-.611.378-.375.611-.894.611-1.467V6.55c0-.571-.234-1.091-.611-1.467-.375-.378-.894-.611-1.467-.611z"/></svg>

Add the following code below t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label

,
            {
              "value": "video",
              "label": "Video"
            }

Step 6: Make video responsive

Add class="video-responsive" with in Iframe youtube embed code and add the following CSS:

<style>
.video-responsive {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}
</style>