Shopify themes, liquid, logos, and UX
Hi, wondering if there's an easy way to add a video option to a rich text section. It currently only supports video. I'd also want to be able to make it silent (no audio).
I'm using the Local theme by Krown Themes. I've put the code here in case that's helpful for a quick fix. Thanks in advance!
{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}
<div class="{% unless section.settings.is_fullwidth %} container--large {% else %} container--fullwidth {% endunless %} {% unless section.settings.remove_margin %} container--vertical-space {% endunless %} {% if section.settings.section_background_color != "rgba(0,0,0,0)" or section.settings.section_background_gradient != blank %} container--has-background {% endif %}">
<div id="element-{{ section.id }}" class="card
{% if section.settings.is_fullwidth %} card--no-radius card--no-sideborders card--no-shadow {% endif %}
{% unless section.settings.image_position contains "top" %}
element--height-{{ section.settings.height }}
{% else %}
rich-text--image-on-top
{% endunless %}
rich-text">
<div class="rich-text__container rich-text__container--image-{{ section.settings.image_position }} {% if section.settings.is_fullwidth %} rich-text__container--fullwidth {% if section.settings.image_position contains 'top' %} container--large {% endif %} {% endif %}">
{%- unless section.settings.image_position contains "no-image" -%}
<div class="rich-text__image
{% unless section.settings.image_crop %} rich-text__image--fit {% endunless %}
{% if section.settings.image_position contains "top" %} element--height-{{ section.settings.height }} {% endif %}"
aria-hidden="true">
{%- liquid
if section.index == 1
assign preload = true
else
assign preload = false
endif
-%}
{%- liquid
unless section.settings.image == blank
render 'lazy-image', image: section.settings.image, type: '', alt: section.settings.title, image_alignment: true, id: section.id, preload: preload
else
echo 'image' | placeholder_svg_tag
endunless
-%}
</div>
{%- endunless -%}
<div class="rich-text__text align-content align-content--{{ section.settings.text_alignment }} align-content--vertical-middle">
<div class="card__text
{% unless section.settings.is_fullwidth %} gutter--xlarge {% endunless %}
{% if section.settings.is_fullwidth and section.settings.image_position contains "top" %} gutter-top--xlarge gutter-bottom--xlarge {% endif %}
spacing--large remove-empty-space">
{%- for block in section.blocks -%}
{%- case block.type %}
{%- when 'custom_liquid' -%}
<div {{ block.shopify_attributes }}>
{{ block.settings.custom_liquid }}
</div>
{%- when 'title' -%}
<{{ block.settings.seo_h_tag }}
class="{{ block.settings.title_size }} rte rich-text__title"
{{ block.shopify_attributes }}
>
{{ block.settings.title }}
</{{ block.settings.seo_h_tag }}>
{%- when 'text' -%}
<div
class="rte text-size--{{ block.settings.text_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.text }}
</div>
{%- when 'button' -%}
<div
class="increased-spacing"
{{ block.shopify_attributes }}
>
<a href="{{ block.settings.link }}" {% unless block.settings.open_in_new_window == false %} target="_blank" {% endunless %} class="button button--{{ block.settings.button_size }} button--{{ block.settings.button_style }}">
{{ block.settings.button_label }}
</a>
</div>
{%- when 'space' -%}
<div class="empty-space" {{ block.shopify_attributes }}> </div>
{%- endcase %}
{%- endfor -%}
</div>
</div>
{%- render 'custom-colors', id: section.id, text: section.settings.color_text_main, background: section.settings.color_background_main, accent: section.settings.color_accent_main, borders: section.settings.color_borders_main, shadow: section.settings.color_shadow_main, hide_borders: section.settings.color_hide_borders, hide_shadow: section.settings.color_hide_shadow -%}
</div>
</div>
</div>
{%- if section.settings.section_background_color != "rgba(0,0,0,0)" -%}
{% style %}
#shopify-section-{{ section.id }} {
background-color: {{ section.settings.section_background_color }};
}
{% endstyle %}
{%- endif -%}
{%- if section.settings.section_background_gradient != blank -%}
{% style %}
#shopify-section-{{ section.id }} {
background: {{ section.settings.section_background_gradient }};
}
{% endstyle %}
{%- endif -%}
{% schema %}
{
"name": "t:sections.rich-text.name",
"class": "can-be-fullwidth no-fullwidth-padding",
"max_blocks": 9,
"settings": [
{
"id": "image",
"type": "image_picker",
"label": "t:sections.gallery.blocks.image.settings.image.label"
},
{
"type": "select",
"id": "image_position",
"label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.label",
"options": [
{
"value": "left",
"label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__1"
},
{
"value": "top",
"label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__2"
},
{
"value": "right",
"label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__3"
},
{
"value": "top no-image",
"label": "t:late_edits.rich-text.image_position.no_image.label",
"group": "t:late_edits.rich-text.image_position.no_image.group"
}
],
"default": "right"
},
{
"type": "select",
"id": "height",
"label": "t:sections.local-extra-words.sections.rich-text.settings.height.label",
"info": "t:sections.local-extra-words.sections.rich-text.settings.height.info",
"options": [
{
"value": "small",
"label": "t:sections.image-with-text.settings.image_height.options__1.label"
},
{
"value": "regular",
"label": "t:sections.image-with-text.settings.image_height.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.settings.image_height.options__3.label"
}
],
"default": "regular"
},
{
"type": "checkbox",
"id": "image_crop",
"label": "t:sections.local-extra-words.sections.rich-text.settings.crop.label",
"info": "t:sections.local-extra-words.sections.rich-text.settings.crop.info",
"default": true
},
{
"type": "select",
"id": "text_alignment",
"label": "t:sections.image-with-text.settings.text_alignment.label",
"options": [
{
"value": "horizontal-left",
"label": "t:sections.rich-text.settings.text_alignment.options__1.label"
},
{
"value": "horizontal-center",
"label": "t:sections.rich-text.settings.text_alignment.options__2.label"
},
{
"value": "horizontal-right",
"label": "t:sections.rich-text.settings.text_alignment.options__3.label"
}
],
"default": "horizontal-center"
},
{
"type": "header",
"content": "t:local-march-update.labels.section_design"
},
{
"type": "checkbox",
"id": "is_fullwidth",
"label": "t:sections.local-extra-words.sections.rich-text.settings.fullwidth.label",
"default": false,
"info": "t:sections.local-extra-words.sections.rich-text.settings.fullwidth.info"
},
{
"type": "color",
"id": "section_background_color",
"label": "t:sections.local-extra-words.settings_schema.product-card.badges.custom_badges.color",
"default": "rgba(0,0,0,0)"
},
{
"type": "color_background",
"id": "section_background_gradient",
"label": "t:local-230.background_gradient"
},
{
"type": "checkbox",
"id": "remove_margin",
"label": "t:sections.local-extra-words.sections.rich-text.settings.remove_margin.label",
"default": false
},
{
"type": "header",
"content": "t:sections.local-extra-words.sections.headings.custom_colors"
},
{
"type": "color",
"id": "color_background_main",
"label": "t:sections.split-extra-words.settings_schema.colors.settings.background",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "color_text_main",
"label": "t:sections.split-extra-words.settings_schema.colors.settings.text",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "color_accent_main",
"label": "t:sections.local-extra-words.settings_schema.colors.settings.accent",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "color_borders_main",
"label": "t:sections.local-extra-words.settings_schema.colors.settings.borders",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "color_shadow_main",
"label": "t:local-march-update.shadows.label",
"default": "rgba(0,0,0,0)"
},
{
"type": "checkbox",
"id": "color_hide_borders",
"label": "t:sections.local-extra-words.settings_schema.colors.settings.hide_border",
"default": false
},
{
"type": "checkbox",
"id": "color_hide_shadow",
"label": "t:local-march-update.shadows.hide",
"default": false
}
],
"blocks": [
{
"type": "title",
"name": "t:sections.rich-text.blocks.heading.name",
"settings": [
{
"type": "inline_richtext",
"id": "title",
"label": "t:sections.rich-text.blocks.heading.settings.heading.label",
"default": "Talk about your brand"
},
{
"type": "select",
"id": "title_size",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.label",
"options": [
{
"value": "h3",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__1.label"
},
{
"value": "h2",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__2.label"
},
{
"value": "h1",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__3.label"
}
],
"default": "h2"
},
{
"type": "header",
"content": "t:sections.refactor_words.seo.name"
},
{
"type": "select",
"id": "seo_h_tag",
"label": "t:sections.refactor_words.seo.label",
"info": "t:sections.refactor_words.seo.info",
"options": [
{
"value": "h1",
"label": "H1"
},
{
"value": "h2",
"label": "H2"
},
{
"value": "h3",
"label": "H3"
},
{
"value": "h4",
"label": "H4"
},
{
"value": "span",
"label": "span"
}
],
"default": "h2"
}
]
},
{
"type": "text",
"name": "t:sections.rich-text.blocks.text.name",
"settings": [
{
"type": "richtext",
"id": "text",
"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": "select",
"id": "text_size",
"label": "t:sections.footer.blocks.text.settings.text_size.label",
"options": [
{
"value": "regular",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__1.label"
},
{
"value": "large",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__2.label"
}
],
"default": "regular"
}
]
},
{
"type": "button",
"name": "t:sections.rich-text.blocks.button.name",
"settings": [
{
"type": "text",
"id": "button_label",
"label": "t:sections.rich-text.blocks.button.settings.button_label.label",
"default": "Show more"
},
{
"type": "url",
"id": "link",
"label": "t:sections.rich-text.blocks.button.settings.button_link.label"
},
{
"type": "checkbox",
"id": "open_in_new_window",
"label": "t:sections.local-extra-words.sections.announcement-bar.blocks.content.settings.target",
"default": false
},
{
"type": "select",
"id": "button_size",
"label": "t:sections.rich-text.blocks.button.settings.button_size.label",
"options": [
{
"value": "regular",
"label": "t:sections.rich-text.blocks.button.settings.button_size.options__1.label"
},
{
"value": "large",
"label": "t:sections.rich-text.blocks.button.settings.button_size.options__2.label"
}
],
"default": "large"
},
{
"id": "button_style",
"label": "t:sections.local-extra-words.sections.buttons.style.label",
"type": "select",
"options": [
{
"value": "outline",
"label": "t:sections.local-extra-words.sections.buttons.style.option__1"
},
{
"value": "solid",
"label": "t:sections.local-extra-words.sections.buttons.style.option__2"
}
],
"default": "outline"
}
]
},
{
"type": "custom_liquid",
"name": "t:sections.refactor_words.custom_code.name",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label"
}
]
},
{
"type": "space",
"name": "t:local-march-update.blocks.space.name"
}
],
"presets": [
{
"name": "t:sections.rich-text.name",
"blocks": [
{ "type": "title" },
{ "type": "text" },
{ "type": "button" }
]
}
]
}
{% endschema %}
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025