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 oiutput 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 its too big. So I’m going to make an adjustment to it using a technique that I showed in the previous video, titled “How To Fix Video Embed in Shopify Dawn Theme - Responsive iframes”

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 ths 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"
},
Back to blog

Leave a comment

Please note, comments need to be approved before they are published.