A user seeks to add a 16:9 video to the left side of the collapsible content section on a product page using Dawn 15.4.0 theme, with collapsible rows shifted to the right.
Multiple solutions proposed:
Websitediva suggests editing main-product.liquid to add a custom video block before the collapsible section, plus CSS to create a flex layout. However, the user couldn’t locate {% section 'collapsible-content' %} in their file.
devcoders requests store URL and collaborator access to provide a custom solution. The user shares credentials and video file; collaboration is accepted.
Muthwerk-Agentur recommends using a Custom Liquid block in the Theme Editor to wrap both video (via iframe) and collapsible section in a flex container.
namphan provides the most detailed approach: replacing the entire collapsible-content.liquid code with a modified version that includes CSS for responsive video/content layout and adds a video upload option in the theme customizer.
Status: Multiple solutions offered; namphan’s code modification appears most comprehensive, allowing video upload directly through Shopify’s customizer. Discussion remains open as implementation outcome is unclear.
Hi there, wonderful community! I’m using the DAWN 15.4.0 theme on my website and I am wondering if there is a way to add a video (ideally 16:9) to the left side of the collapsible content section (I have roughly indicated where in the screenshot).
Perhaps the collapsible rows could be moved to the right.
Product page: Original Hand-Painted Pomegranate Oil Painting – DrawWithDi
I would appreciate any help!
PHi @DRAWandCARE, 
Yes, it’s definitely possible to add a video on the left side of the collapsible content section in the Dawn 15.4.0 theme — you just need a small Liquid and CSS tweak.
Here’s a quick approach you can try:
Go to:
Online Store → Themes → Edit code
Open:
main-product.liquid (or main-product.liquid inside the “Sections” folder).
Find the collapsible content section — it usually starts with a line like:
{% section 'collapsible-content' %}
Before that section, add a custom video block, for example:
<div class="custom-video">
<video controls>
<source src="{{ 'your-video-file.mp4' | asset_url }}" type="video/mp4">
</video>
</div>
Then, in your theme’s CSS (base.css or global.css), add this to align it beside the collapsible content:
.custom-video {
flex: 1;
margin-right: 20px;
}
.collapsible-content {
flex: 1;
}
@media screen and (min-width: 768px) {
.product__info-container {
display: flex;
align-items: flex-start;
}
}
This layout will display the video on the left and the collapsible rows on the right side for desktop screens while stacking them on mobile.
If you’d prefer, I can share a cleaner version of the full code snippet so it fits seamlessly with your current layout.
Hi @DRAWandCARE
Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.
Hi, thank you so much for your reply!
Unfortunately, I don’t have {% section 'collapsible-content' %} in my main-product.liquid file. Is there another place where I could add it? Thanks in advance!
Hi! Will greatly appreciate your help! Thank you for your reply!
Original & Custom Oil Paintings by DrawWithDi
The code: 5430
Hi @DRAWandCARE
I’ve sent the request — please accept it and also email me the video.
Accepted! Thank you!
The video from my store files: https://cdn.shopify.com/videos/c/o/v/523d3f8e46ed4d5da7b1325ab1a9f741.mov
What a great video you’ve got there @DRAWandCARE
Thank you so much! 
If you don’t see {% section ‘collapsible-content’ %} in your main-product.liquid, it’s likely that the collapsible content is being called from a different section file.
You can try checking inside:
sections/product-template.liquid, or
sections/main-product-details.liquid (depending on your Dawn version).
Once you find where the collapsible rows are rendered, you can add the video block just before or after that section tag — the same code I shared earlier will still work there.
You’re welcome 
Have you been able to add the video on your store?
Hi @DRAWandCARE,
You want to display like this:
Please send me the code of sections > collapsible-content.liquid file, i will check and add option for you
Hi, thanks for your reply!
Here’s the code from collapsible-content.liquid file:
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'collapsible-content.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="collapsible-content collapsible-{{ section.settings.layout }}-layout isolate{% if section.settings.layout == 'section' %} page-width{% elsif section.settings.layout == 'none' %} content-container content-container--full-width{% endif %}">
<div class="collapsible-content__wrapper section-{{ section.id }}-padding{% if section.settings.layout == 'section' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}">
<div class="{% if section.settings.image == blank %}collapsible-content-wrapper-narrow{% else %}page-width{% endif %}">
<div
class="collapsible-content__header{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
style="text-align: {{ section.settings.heading_alignment }};"
>
{%- if section.settings.caption != blank -%}
<p class="caption-with-letter-spacing">
{{ section.settings.caption | escape }}
</p>
{% endif %}
{%- if section.settings.heading != blank -%}
<h2 class="collapsible-content__heading inline-richtext {{ section.settings.heading_size }}">
{{ section.settings.heading }}
</h2>
{%- else -%}
<h2 class="visually-hidden">{{ 'accessibility.collapsible_content_title' | t }}</h2>
{% endif %}
</div>
<div class="grid grid--1-col grid--2-col-tablet collapsible-content__grid{% if section.settings.desktop_layout == 'image_second' %} collapsible-content__grid--reverse{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.image != blank -%}
<div class="grid__item collapsible-content__grid-item">
<div
class="collapsible-content__media collapsible-content__media--{{ section.settings.image_ratio }} media global-media-settings gradient"
{% if section.settings.image_ratio == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"
{% endif %}
>
{%- liquid
assign padding_multiplier = 1
if section.settings.layout == 'section'
assign padding_multiplier = 2
endif
assign desktop_tablet_padding = 100 | times: padding_multiplier | append: 'px'
assign mobile_padding = 30 | times: padding_multiplier | append: 'px'
-%}
{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ desktop_tablet_padding }}) / 2),
(min-width: 750px) calc((100vw - {{ desktop_tablet_padding }}) / 2),
calc(100vw - {{ mobile_padding }})
{%- endcapture -%}
{{
section.settings.image
| image_url: width: 3200
| image_tag:
loading: 'lazy',
sizes: sizes,
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
}}
</div>
</div>
{% endif %}
<div class="grid__item">
{%- for block in section.blocks -%}
<div
class="accordion{% if section.settings.layout == 'row' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}"
{{ block.shopify_attributes }}
>
<details
id="Details-{{ block.id }}-{{ section.id }}"
{% if section.settings.open_first_collapsible_row and forloop.first %}
open
{% endif %}
>
<summary id="Summary-{{ block.id }}-{{ section.id }}">
{% render 'icon-accordion', icon: block.settings.icon %}
<h3 class="accordion__title inline-richtext h4">
{{ block.settings.heading | default: block.settings.page.title }}
</h3>
{% render 'icon-caret' %}
</summary>
<div
class="accordion__content rte"
id="CollapsibleAccordion-{{ block.id }}-{{ section.id }}"
role="region"
aria-labelledby="Summary-{{ block.id }}-{{ section.id }}"
>
{{ block.settings.row_content }}
{{ block.settings.page.content }}
</div>
</details>
</div>
{%- endfor -%}
</div>
</div>
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.collapsible_content.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "text",
"id": "caption",
"label": "t:sections.collapsible_content.settings.caption.label"
},
{
"type": "inline_richtext",
"id": "heading",
"label": "t:sections.collapsible_content.settings.heading.label",
"default": "Collapsible content"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "heading_alignment",
"label": "t:sections.collapsible_content.settings.heading_alignment.label",
"options": [
{
"value": "left",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__3.label"
}
],
"default": "center"
},
{
"type": "select",
"id": "layout",
"label": "t:sections.collapsible_content.settings.layout.label",
"options": [
{
"value": "none",
"label": "t:sections.collapsible_content.settings.layout.options__1.label"
},
{
"value": "row",
"label": "t:sections.collapsible_content.settings.layout.options__2.label"
},
{
"value": "section",
"label": "t:sections.collapsible_content.settings.layout.options__3.label"
}
],
"default": "none"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "color_scheme",
"id": "container_color_scheme",
"label": "t:sections.collapsible_content.settings.container_color_scheme.label",
"info": "t:sections.collapsible_content.settings.container_color_scheme.info",
"default": "background-2"
},
{
"type": "checkbox",
"id": "open_first_collapsible_row",
"default": false,
"label": "t:sections.collapsible_content.settings.open_first_collapsible_row.label"
},
{
"type": "header",
"content": "t:sections.collapsible_content.settings.header.content"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.collapsible_content.settings.image.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.collapsible_content.settings.image_ratio.options__1.label"
},
{
"value": "small",
"label": "t:sections.collapsible_content.settings.image_ratio.options__2.label"
},
{
"value": "large",
"label": "t:sections.collapsible_content.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.collapsible_content.settings.image_ratio.label"
},
{
"type": "select",
"id": "desktop_layout",
"options": [
{
"value": "image_first",
"label": "t:sections.collapsible_content.settings.desktop_layout.options__1.label"
},
{
"value": "image_second",
"label": "t:sections.collapsible_content.settings.desktop_layout.options__2.label"
}
],
"default": "image_second",
"label": "t:sections.collapsible_content.settings.desktop_layout.label",
"info": "t:sections.collapsible_content.settings.desktop_layout.info"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "collapsible_row",
"name": "t:sections.collapsible_content.blocks.collapsible_row.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Collapsible row",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.label",
"info": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.info"
},
{
"type": "select",
"id": "icon",
"options": [
{
"value": "none",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__44.label"
}
],
"default": "check_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.label"
},
{
"type": "richtext",
"id": "row_content",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.row_content.label"
},
{
"type": "page",
"id": "page",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.page.label"
}
]
}
],
"presets": [
{
"name": "t:sections.collapsible_content.presets.name",
"blocks": [
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
}
]
}
]
}
{% endschema %}
Thank you!
Hi @DRAWandCARE,
yes, that’s absolutely possible!
In Dawn 15.4.0, you can duplicate the FAQ section and use a Custom Liquid block to embed a video on the left while keeping the collapsible rows on the right.
Here’s how:
In the Theme Editor, open your FAQ section.
Add a Custom Liquid block above or next to it.
Paste this snippet:
<div style="display:flex;align-items:flex-start;gap:2rem;flex-wrap:wrap;">
<div style="flex:1;min-width:300px;">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
<div style="flex:1;min-width:300px;">
{% section 'collapsible-content' %}
</div>
</div>
This will place your 16:9 video on the left and the collapsible rows on the right. The layout stays responsive.
Best regards,
Rafael from Muthwerk
E-Commerce Solutions & Shopify Optimization
Hi @DRAWandCARE,
Please change all code:
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'collapsible-content.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
.collapsible-content__video {
display: flex;
flex-direction: column;
}
.collapsible-content__left {
width: 100%;
}
.collapsible-content__right {
width: 100%;
}
@media screen and (min-width: 990px) {
.collapsible-content__video {
flex-direction: row;
align-items: center;
}
.collapsible-content__left {
width: 35%;
}
.collapsible-content__right {
width: 65%;
padding-left: 1rem;
}
}
{%- endstyle -%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="collapsible-content collapsible-{{ section.settings.layout }}-layout isolate{% if section.settings.layout == 'section' %} page-width{% elsif section.settings.layout == 'none' %} content-container content-container--full-width{% endif %}">
<div class="collapsible-content__wrapper section-{{ section.id }}-padding{% if section.settings.layout == 'section' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}">
<div class="{% if section.settings.video != blank %}collapsible-content__video{% endif %} {% if section.settings.image == blank and section.settings.video == blank %}collapsible-content-wrapper-narrow{% else %}page-width{% endif %}">
{%- if section.settings.video != blank -%}
<div class="collapsible-content__left">
{{
section.settings.video
| video_tag:
image_size: '1100x',
autoplay: true,
loop: true,
controls: true,
muted: false
}}
</div>
{%- endif -%}
<div class="collapsible-content__right">
<div
class="collapsible-content__header{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
style="text-align: {{ section.settings.heading_alignment }};"
>
{%- if section.settings.caption != blank -%}
<p class="caption-with-letter-spacing">
{{ section.settings.caption | escape }}
</p>
{% endif %}
{%- if section.settings.heading != blank -%}
<h2 class="collapsible-content__heading inline-richtext {{ section.settings.heading_size }}">
{{ section.settings.heading }}
</h2>
{%- else -%}
<h2 class="visually-hidden">{{ 'accessibility.collapsible_content_title' | t }}</h2>
{% endif %}
</div>
<div class="grid grid--1-col grid--2-col-tablet collapsible-content__grid{% if section.settings.desktop_layout == 'image_second' %} collapsible-content__grid--reverse{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.image != blank -%}
<div class="grid__item collapsible-content__grid-item">
<div
class="collapsible-content__media collapsible-content__media--{{ section.settings.image_ratio }} media global-media-settings gradient"
{% if section.settings.image_ratio == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"
{% endif %}
>
{%- liquid
assign padding_multiplier = 1
if section.settings.layout == 'section'
assign padding_multiplier = 2
endif
assign desktop_tablet_padding = 100 | times: padding_multiplier | append: 'px'
assign mobile_padding = 30 | times: padding_multiplier | append: 'px'
-%}
{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ desktop_tablet_padding }}) / 2),
(min-width: 750px) calc((100vw - {{ desktop_tablet_padding }}) / 2),
calc(100vw - {{ mobile_padding }})
{%- endcapture -%}
{{
section.settings.image
| image_url: width: 3200
| image_tag:
loading: 'lazy',
sizes: sizes,
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
}}
</div>
</div>
{% endif %}
<div class="grid__item">
{%- for block in section.blocks -%}
<div
class="accordion{% if section.settings.layout == 'row' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}"
{{ block.shopify_attributes }}
>
<details
id="Details-{{ block.id }}-{{ section.id }}"
{% if section.settings.open_first_collapsible_row and forloop.first %}
open
{% endif %}
>
<summary id="Summary-{{ block.id }}-{{ section.id }}">
{% render 'icon-accordion', icon: block.settings.icon %}
<h3 class="accordion__title inline-richtext h4">
{{ block.settings.heading | default: block.settings.page.title }}
</h3>
{% render 'icon-caret' %}
</summary>
<div
class="accordion__content rte"
id="CollapsibleAccordion-{{ block.id }}-{{ section.id }}"
role="region"
aria-labelledby="Summary-{{ block.id }}-{{ section.id }}"
>
{{ block.settings.row_content }}
{{ block.settings.page.content }}
</div>
</details>
</div>
{%- endfor -%}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.collapsible_content.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "video",
"id": "video",
"label": "Video"
},
{
"type": "text",
"id": "caption",
"label": "t:sections.collapsible_content.settings.caption.label"
},
{
"type": "inline_richtext",
"id": "heading",
"label": "t:sections.collapsible_content.settings.heading.label",
"default": "Collapsible content"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "heading_alignment",
"label": "t:sections.collapsible_content.settings.heading_alignment.label",
"options": [
{
"value": "left",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__3.label"
}
],
"default": "center"
},
{
"type": "select",
"id": "layout",
"label": "t:sections.collapsible_content.settings.layout.label",
"options": [
{
"value": "none",
"label": "t:sections.collapsible_content.settings.layout.options__1.label"
},
{
"value": "row",
"label": "t:sections.collapsible_content.settings.layout.options__2.label"
},
{
"value": "section",
"label": "t:sections.collapsible_content.settings.layout.options__3.label"
}
],
"default": "none"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "color_scheme",
"id": "container_color_scheme",
"label": "t:sections.collapsible_content.settings.container_color_scheme.label",
"info": "t:sections.collapsible_content.settings.container_color_scheme.info",
"default": "background-2"
},
{
"type": "checkbox",
"id": "open_first_collapsible_row",
"default": false,
"label": "t:sections.collapsible_content.settings.open_first_collapsible_row.label"
},
{
"type": "header",
"content": "t:sections.collapsible_content.settings.header.content"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.collapsible_content.settings.image.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.collapsible_content.settings.image_ratio.options__1.label"
},
{
"value": "small",
"label": "t:sections.collapsible_content.settings.image_ratio.options__2.label"
},
{
"value": "large",
"label": "t:sections.collapsible_content.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.collapsible_content.settings.image_ratio.label"
},
{
"type": "select",
"id": "desktop_layout",
"options": [
{
"value": "image_first",
"label": "t:sections.collapsible_content.settings.desktop_layout.options__1.label"
},
{
"value": "image_second",
"label": "t:sections.collapsible_content.settings.desktop_layout.options__2.label"
}
],
"default": "image_second",
"label": "t:sections.collapsible_content.settings.desktop_layout.label",
"info": "t:sections.collapsible_content.settings.desktop_layout.info"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "collapsible_row",
"name": "t:sections.collapsible_content.blocks.collapsible_row.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Collapsible row",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.label",
"info": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.info"
},
{
"type": "select",
"id": "icon",
"options": [
{
"value": "none",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__44.label"
}
],
"default": "check_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.label"
},
{
"type": "richtext",
"id": "row_content",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.row_content.label"
},
{
"type": "page",
"id": "page",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.page.label"
}
]
}
],
"presets": [
{
"name": "t:sections.collapsible_content.presets.name",
"blocks": [
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
}
]
}
]
}
{% endschema %}
Then you just go to Customize and upload the video, it will display fine.
If I helped you, then a Like would be truly appreciated.
Best,
NamPhan