Rich Text with Image & Video
Code:
{%- if section.settings.divider -%}<div class="section--divider">{%- endif -%}
<div class="text-{{ section.settings.align_text }} page-width{% if section.settings.narrow_column %} page-width--narrow{% endif %}">
{%- for block in section.blocks -%}
<div class="theme-block" {{ block.shopify_attributes }}>
{%- case block.type -%}
{%- when 'heading' -%}
<h2>{{ block.settings.title | escape }}</h2>
{%- when 'page' -%}
<div class="rte">
{%- if block.settings.page_text != blank -%}
{{ pages[block.settings.page_text].content }}
{%- else -%}
{{ 'home_page.onboarding.no_content' | t }}
{%- endif -%}
</div>
{%- when 'text' -%}
<div class="rte">
{%- if block.settings.text != blank -%}
{%- if block.settings.enlarge_text %}<div class="enlarge-text">{% endif -%}
{{ block.settings.text }}
{%- if block.settings.enlarge_text %}</div>{% endif -%}
{%- else -%}
{{ 'home_page.onboarding.no_content' | t }}
{%- endif -%}
</div>
{%- when 'button' -%}
<div class="rte">
<a href="{{ block.settings.link }}" class="btn">
{{ block.settings.link_text }}
</a>
</div>
{%- when 'image' -%}
<div class="rte richtext-image-wrapper" style="text-align: {{ block.settings.image_alignment }};">
{%- if block.settings.image != blank -%}
{%- if block.settings.image_link != blank -%}
<a href="{{ block.settings.image_link }}">
{%- endif -%}
<img
src="{{ block.settings.image | image_url: width: 2000 }}"
alt="{{ block.settings.alt_text | escape }}"
loading="lazy"
class="richtext-image"
style="
max-width: {{ block.settings.image_max_width }};
width: {{ block.settings.image_width }};
max-height: {{ block.settings.image_max_height }};
object-fit: {{ block.settings.image_object_fit }};
object-position: {{ block.settings.image_object_position }};
border-radius: {{ block.settings.image_radius }}px;
margin: {{ block.settings.image_margin }};
height: auto;
"
>
{%- if block.settings.image_link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- when 'video' -%}
<div class="rte richtext-video-wrapper" style="text-align: {{ block.settings.video_alignment }};">
{%- if block.settings.video_url != blank -%}
{%- assign video_url = block.settings.video_url | strip -%}
{%- case block.settings.video_aspect_ratio -%}
{%- when '16:9' -%}{%- assign pad = '56.25%' -%}
{%- when '4:3' -%}{%- assign pad = '75%' -%}
{%- when '1:1' -%}{%- assign pad = '100%' -%}
{%- when '21:9' -%}{%- assign pad = '42.857%' -%}
{%- else -%}{%- assign pad = '56.25%' -%}
{%- endcase -%}
<div class="video-embed" style="max-width: {{ block.settings.video_max_width }}; margin: {{ block.settings.video_margin }};">
{%- if video_url contains 'youtube.com' or video_url contains 'youtu.be' -%}
{%- comment -%} Build YouTube embed URL safely {%- endcomment -%}
{%- if video_url contains 'watch?v=' -%}
{%- assign vid = video_url | split: 'v=' | last | split: '&' | first -%}
{%- elsif video_url contains 'youtu.be/' -%}
{%- assign vid = video_url | split: '/' | last | split: '?' | first -%}
{%- else -%}
{%- assign vid = '' -%}
{%- endif -%}
{%- if vid != '' -%}
{%- assign embed_url = 'https://www.youtube.com/embed/' | append: vid -%}
{%- else -%}
{%- assign embed_url = video_url -%}
{%- endif -%}
{%- if block.settings.autoplay -%}
{%- if embed_url contains '?' -%}
{%- assign embed_url = embed_url | append: '&autoplay=1' -%}
{%- else -%}
{%- assign embed_url = embed_url | append: '?autoplay=1' -%}
{%- endif -%}
{%- if block.settings.muted -%}
{%- assign embed_url = embed_url | append: '&mute=1' -%}
{%- endif -%}
{%- endif -%}
<div style="position:relative;padding-bottom:{{ pad }};height:0;overflow:hidden;border-radius:{{ block.settings.video_radius }}px;">
<iframe src="{{ embed_url }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
</div>
{%- elsif video_url contains 'vimeo.com' -%}
{%- comment -%} Build Vimeo embed URL {%- endcomment -%}
{%- assign vid = video_url | split: '/' | last | split: '?' | first -%}
{%- assign embed_url = 'https://player.vimeo.com/video/' | append: vid -%}
{%- if block.settings.autoplay -%}
{%- if embed_url contains '?' -%}
{%- assign embed_url = embed_url | append: '&autoplay=1&muted=1' -%}
{%- else -%}
{%- assign embed_url = embed_url | append: '?autoplay=1&muted=1' -%}
{%- endif -%}
{%- endif -%}
<div style="position:relative;padding-bottom:{{ pad }};height:0;overflow:hidden;border-radius:{{ block.settings.video_radius }}px;">
<iframe src="{{ embed_url }}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
</div>
{%- else -%}
<div style="position:relative;padding-bottom:{{ pad }};height:0;overflow:hidden;border-radius:{{ block.settings.video_radius }}px;">
<video
{% if block.settings.autoplay %}autoplay{% endif %}
{% if block.settings.loop %}loop{% endif %}
{% if block.settings.muted %}muted{% endif %}
{% if block.settings.controls %}controls{% endif %}
playsinline
style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:{{ block.settings.video_object_fit }};object-position:{{ block.settings.video_object_position }};"
>
<source src="{{ video_url }}" type="video/mp4">
{{ 'sections.video.unsupported' | t: default: 'Your browser does not support the video tag.' }}
</video>
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- when 'custom_liquid' -%}
<div class="custom-liquid">
{{ block.settings.custom_liquid }}
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
{%- if section.settings.divider -%}</div>{%- endif -%}
{% schema %}
{
"name": "t:sections.rich-text.name",
"class": "index-section",
"settings": [
{
"type": "select",
"id": "align_text",
"label": "t:sections.rich-text.settings.align_text.label",
"default": "center",
"options": [
{
"value": "left",
"label": "t:sections.rich-text.settings.align_text.options.left.label"
},
{
"value": "center",
"label": "t:sections.rich-text.settings.align_text.options.center.label"
},
{
"value": "right",
"label": "t:sections.rich-text.settings.align_text.options.right.label"
}
]
},
{
"type": "checkbox",
"id": "narrow_column",
"label": "t:sections.rich-text.settings.narrow_column.label",
"default": true
},
{
"type": "checkbox",
"id": "divider",
"label": "t:sections.rich-text.settings.divider.label",
"default": false
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.rich-text.blocks.heading.name",
"settings": [
{
"type": "text",
"id": "title",
"label": "t:sections.rich-text.blocks.heading.settings.title.label",
"default": "Rich text"
}
]
},
{
"type": "text",
"name": "t:sections.rich-text.blocks.text.name",
"settings": [
{
"type": "checkbox",
"id": "enlarge_text",
"label": "t:sections.rich-text.blocks.text.settings.enlarge_text.label",
"default": true
},
{
"id": "text",
"type": "richtext",
"label": "t:sections.rich-text.blocks.text.settings.text.label",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
}
]
},
{
"type": "button",
"name": "t:sections.rich-text.blocks.button.name",
"settings": [
{
"type": "url",
"id": "link",
"label": "t:sections.rich-text.blocks.button.settings.link.label"
},
{
"type": "text",
"id": "link_text",
"label": "t:sections.rich-text.blocks.button.settings.link_text.label",
"default": "Button"
}
]
},
{
"type": "page",
"name": "t:sections.rich-text.blocks.page.name",
"settings": [
{
"id": "page_text",
"type": "page",
"label": "t:sections.rich-text.blocks.page.settings.page_text.label"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "alt_text",
"label": "Alt text",
"default": "Describe the image"
},
{
"type": "text",
"id": "image_width",
"label": "Image width (px, %, auto)",
"default": "100%"
},
{
"type": "text",
"id": "image_max_width",
"label": "Max width (px, %, none)",
"default": "1200px"
},
{
"type": "text",
"id": "image_max_height",
"label": "Max height (px, %, vh, none)",
"default": "600px"
},
{
"type": "select",
"id": "image_object_fit",
"label": "Object fit",
"default": "cover",
"options": [
{ "value": "cover", "label": "Cover" },
{ "value": "contain", "label": "Contain" },
{ "value": "fill", "label": "Fill" },
{ "value": "scale-down", "label": "Scale down" },
{ "value": "none", "label": "None" }
]
},
{
"type": "select",
"id": "image_object_position",
"label": "Object position",
"default": "center",
"options": [
{ "value": "center", "label": "Center" },
{ "value": "top", "label": "Top" },
{ "value": "bottom", "label": "Bottom" },
{ "value": "left", "label": "Left" },
{ "value": "right", "label": "Right" }
]
},
{
"type": "select",
"id": "image_alignment",
"label": "Image alignment",
"default": "center",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
]
},
{
"type": "range",
"id": "image_radius",
"label": "Border radius (px)",
"default": 0,
"min": 0,
"max": 100,
"step": 1
},
{
"type": "text",
"id": "image_margin",
"label": "Custom margin (CSS shorthand)",
"default": "0 auto"
},
{
"type": "url",
"id": "image_link",
"label": "Link (optional)"
}
]
},
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "url",
"id": "video_url",
"label": "Video URL (YouTube, Vimeo, or MP4)"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay",
"default": false
},
{
"type": "checkbox",
"id": "loop",
"label": "Loop",
"default": false
},
{
"type": "checkbox",
"id": "muted",
"label": "Muted (for autoplay)",
"default": true
},
{
"type": "checkbox",
"id": "controls",
"label": "Show controls (MP4 only)",
"default": true
},
{
"type": "text",
"id": "video_width",
"label": "Video width (px, %, auto)",
"default": "100%"
},
{
"type": "text",
"id": "video_max_width",
"label": "Max width (px, %, none)",
"default": "1200px"
},
{
"type": "text",
"id": "video_height",
"label": "Video height (px, auto)",
"default": "auto"
},
{
"type": "text",
"id": "video_max_height",
"label": "Max height (px, %, vh, none)",
"default": "600px"
},
{
"type": "select",
"id": "video_aspect_ratio",
"label": "Aspect ratio (responsive embed)",
"default": "16:9",
"options": [
{ "value": "16:9", "label": "16:9 (widescreen)" },
{ "value": "4:3", "label": "4:3" },
{ "value": "1:1", "label": "1:1 (square)" },
{ "value": "21:9", "label": "21:9 (ultrawide)" }
]
},
{
"type": "select",
"id": "video_object_fit",
"label": "Object fit (MP4 only)",
"default": "cover",
"options": [
{ "value": "cover", "label": "Cover" },
{ "value": "contain", "label": "Contain" },
{ "value": "fill", "label": "Fill" },
{ "value": "scale-down", "label": "Scale down" },
{ "value": "none", "label": "None" }
]
},
{
"type": "select",
"id": "video_object_position",
"label": "Object position (MP4 only)",
"default": "center",
"options": [
{ "value": "center", "label": "Center" },
{ "value": "top", "label": "Top" },
{ "value": "bottom", "label": "Bottom" },
{ "value": "left", "label": "Left" },
{ "value": "right", "label": "Right" }
]
},
{
"type": "select",
"id": "video_alignment",
"label": "Video alignment",
"default": "center",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
]
},
{
"type": "range",
"id": "video_radius",
"label": "Border radius (px)",
"default": 0,
"min": 0,
"max": 100,
"step": 1
},
{
"type": "text",
"id": "video_margin",
"label": "Custom margin (CSS shorthand)",
"default": "0 auto"
}
]
},
{
"type": "custom_liquid",
"name": "Custom liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom Liquid/HTML/JS"
}
]
}
],
"presets": [
{
"name": "t:sections.rich-text.presets.rich_text.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
}
]
}
],
"disabled_on": {
"groups": ["custom.popups"]
}
}
{% endschema %}