Add a Youtube Video inside Collapsible Row Block (Accordion) on Shopify Product Page

Add a liquid field to the collapsible row block

The first thing we want to do is add a liquid field to the collapsible row block, so that we can output anything we want inside of those collapsible rows.

Create a new field in the block schema. Right between the richtext and page block types.

{
  "type": "liquid",
  "id": "liquid",
  "label": "Liquid"
},

Output that liquid field by adding {{ block.settings.liquid }} together with the other content, inside of the accordion__content div.

<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
  {{ block.settings.content }}
  {{ block.settings.liquid }}
  {{ block.settings.page.content }}
</div>

Make the video responsive

Now we can use code in there. We can output the product description, or metafields, or we can paste our iframe there.

I’m going to add an iframe. As you can see it’s too big. So I’m going to make an adjustment to it using a technique that I showed in a previous post, titled “Easy Responsive Video Embed in Shopify Themes”

Add this into your product description, blog post, or page in between <style> </style> tags.

Or create a separate css file like custom.css and then include it in theme.liquid. Then you don’t need the style tags.

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

From now on, when you embed a youtube iframe, just add the responsive-video class to it:

<iframe class="responsive-video" width="560" height="315" src="https://www.youtube.com/embed/ZabAPhin3Bs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Add a video icon to the dropdown

Open up icon-accordion.liquid and add a new ‘when’ line. I made mine the first one, right above apple.

{%- when 'youtube' -%}

Right under it paste the path of this SVG (or your own, but make sure it fits a viewbox of 0 0 20 20).

Youtube Icon SVG path:

<path 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"/>

To output that icon, you need to be able to select it in the block settings dropdown.

So once again go to the schema - we are going to add Youtube as an icon option.

I made it the first one right above apple.

{
  "value": "youtube",
  "label": "Youtube"
},

Adding a unique video for every product

Check out the tutorial for using metafields for embed code.