How to Add a Video (Video With Text)

A step-by-step guide on how to add a video to the “Image with Text” section in the Dawn theme for Shopify using code — free and without any apps.

Relevant for Dawn theme version 15.3.0

---

If you want to avoid coding, try the Shrine theme.

Shrine offers over 120 built-in features that help improve conversion rates and increase the average order value, without the need to configure additional apps or pay for subscriptions. Everything is customizable without code, saving you time and resources.

Use Shrine − 15% OFF

Your discount code: VECOMLAB

1. Go to the code editor

Online Store → Themes → Edit code.

2. Open the file image-with-text.liquid in the sections folder

Find the image_picker and insert the code.

{
  "type": "url",
  "id": "video_url",
  "label": "Video Url"
},
{
  "type": "url",
  "id": "video_image_url",
  "label": "Video Image Url"
},
{
  "type": "checkbox",
  "id": "autoplay",
  "label": "Autoplay if no sound"
},
{
  "type": "checkbox",
  "id": "show_controls",
  "label": "Show Controls"
},
{
  "type": "checkbox",
  "id": "loop_video",
  "label": "Loop Video"
},

Find {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }} and insert the code.

{%- elsif section.settings.video_url -%}
  <video {% if section.settings.autoplay %} autoplay muted {% endif %} {% if section.settings.show_controls %} controls {% endif %} {% if section.settings.loop_video %} loop {% endif %} playsinline poster="{{ section.settings.video_image_url }}">
    <source src="{{ section.settings.video_url }}" type="video/mp4">
  </video>

Find the line with class="image-with-text__media-item" and replace it.

class="image-with-text__media{% if section.settings.video_url != blank %} image-with-text__video{% endif %} image-with-text__media--{{ section.settings.height }}{% unless remove_color_classes %} gradient color-{{ section.settings.color_scheme }}{% else %} background-transparent{% endunless %}{% if section.settings.image != blank or section.settings.video_url != blank %} global-media-settings{% endif %}{% if section.settings.image != blank %} media{% elsif section.settings.video_url == blank %} image-with-text__media--placeholder placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}"

3. Open the file component-image-with-text.css in the assets folder

Paste the styles at the end of the file.

/*
  Video With Text
*/
.image-with-text__video {
  display: flex;
  align-items: center;
}

.image-with-text__video video {
  width: 100%;
}

---

Need help with setup? Contact us — we’ll handle everything for you.