How to Add Video with Text Section to Your Shopify Store

In the world of e-commerce, visual content plays a crucial role in engaging customers and showcasing products effectively. One powerful way to enhance your Shopify store’s visual appeal is by incorporating video content alongside descriptive text. This guide will walk you through the process of adding a “Video with Text” section to your Shopify theme, providing you with a versatile tool to create compelling product presentations and brand storytelling opportunities.

Understanding the Video with Text Section

What is a Video with Text Section?

A Video with Text section allows you to combine a video element with accompanying text on your Shopify store. This feature is particularly useful for:

1. Demonstrating product features
2. Sharing brand stories
3. Providing instructional content
4. Creating engaging landing pages

Benefits of Using Video with Text

Incorporating video content alongside text offers several advantages:

1. Increased user engagement
2. Improved information retention
3. Enhanced visual appeal
4. Better product understanding

Common Use Cases

Video with Text sections can be effectively utilized in various scenarios:

1. Product pages to showcase features and benefits
2. About Us pages to tell your brand story
3. Homepage hero sections for immediate impact
4. Tutorial or how-to pages for customer education

Implementing the Video with Text Section

Step 1: Creating the Necessary Files

To add a Video with Text section to your Shopify theme, you’ll need to create two new files:

1. video-with-text.liquid: This file will contain the main structure and logic for the section.
2. component-video-with-text.css: This file will handle the styling of the section.

Step 2: Adding the Video with Text Liquid File

Create a new file called video-with-text.liquid in your theme’s sections folder and add the following code:

{{ 'component-video-with-text.css' | asset_url | stylesheet_tag }}
<div class="video-with-text {% if section.settings.full_width %}video-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  <div class="video-with-text__grid color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} video-with-text__grid--reverse{% endif %}">
    <div class="grid__item">
      <div class="video-with-text__media image-with-text__media--{{ section.settings.height }} media">
        <video style="max-width: 100%; height: 100%;" autoplay="autoplay" loop="loop" muted="" webkit-playsinline="" playsinline="">
          <source src="{{ section.settings.video_url }}" type="video/mp4" />
        </video>
      </div>
    </div>
    <div class="grid__item">
      <div class="video-with-text__content video-with-text__content--{{ section.settings.height }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2 class="video-with-text__heading h1" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'text' -%}
              <div class="video-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Video with text",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "text",
      "id": "video_url",
      "default": "https://cdn.shopify.com/s/files/1/0050/2779/0919/files/1_1_Cutting_fruit_H.mp4?v=1603372350",
      "label": "Video url",
      "info": "Upload your video to Shopify then paste the url here"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "adapt",
      "label": "Video ratio"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "Video first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first",
      "label": "Desktop layout",
      "info": "Video first is the default mobile layout."
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.video-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "Heading"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "Description"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "Button label",
          "info": "Leave the label blank to hide the button."
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

This code sets up the structure for the Video with Text section, including the video player, text content, and customization options.

Step 3: Adding the CSS File

Create a new file called component-video-with-text.css in your theme’s assets folder and add the following CSS:

.video-with-text {
  margin-top: 5rem;
}

.video-with-text:not(.color-scheme-background-1) {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text {
    margin-bottom: calc(5rem + var(--page-width-margin));
  }
}

.video-with-text .grid {
  margin-left: 0;
  margin-bottom: 0;
}

.video-with-text__grid {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse {
    flex-direction: row-reverse;
  }
}

.video-with-text__media {
  background-color: transparent;
  min-height: 100%;
}

.video-with-text__media--small {
  height: 19.4rem;
}

.video-with-text__media--large {
  height: 40rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--small {
    height: 31.4rem;
  }

  .video-with-text__media--large {
    height: 60rem;
  }
}

.video-with-text__media--placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  position: relative;
  overflow: hidden;
}

.video-with-text__media--placeholder.video-with-text__media--adapt {
  height: 20rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--placeholder.video-with-text__media--adapt {
    height: 30rem;
  }
}

.video-with-text__media--placeholder > svg {
  position: absolute;
  left: 50%;
  max-width: 80rem;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  fill: currentColor;
}

.video-with-text__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: center;
  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse .video-with-text__content {
    margin-left: auto;
  }
}

@media screen and (min-width: 750px) {
  .video-with-text__content {
    padding: 6rem 7rem 7rem;
  }
}

.video-with-text__content > * + * {
  margin-top: 2rem;
}

.video-with-text__content > .video-with-text__text:empty ~ a {
  margin-top: 2rem;
}

.video-with-text__content > :first-child:is(.video-with-text__heading) {
  margin-top: 0;
}

.video-with-text__content :last-child:is(.video-with-text__heading) {
  margin-bottom: 0;
}

.video-with-text__content .button + .video-with-text__text {
  margin-top: 2rem;
}

.video-with-text__content .video-with-text__text + .button {
  margin-top: 3rem;
}

.video-with-text__heading {
  margin-bottom: 0;
}

.video-with-text__text p {
  margin-top: 0;
  margin-bottom: 1rem;
}

This CSS file provides the necessary styling for the Video with Text section, ensuring proper layout and responsiveness.

Step 4: Enabling Mobile Display

To ensure the Video with Text section displays correctly on mobile devices, add the following CSS to your theme’s base.css file:

@media screen and (max-width: 749px) {
  .video-with-text video {
    position: relative !important;
  }
}

This code snippet ensures that the video is positioned correctly on smaller screens.

Customizing the Video with Text Section

Adjusting Video Size

To change the size of the video, you can modify the height property in the CSS file. For example:

.video-with-text__media--small {
  height: 25rem; /* Adjust this value as needed */
}

.video-with-text__media--large {
  height: 50rem; /* Adjust this value as needed */
}

Changing Text Alignment

To center the text content, modify the video-with-text__content class in the CSS file:

.video-with-text__content {
  text-align: center;
  align-items: center;
}

Adding Rounded Corners to the Video

To give the video rounded corners, add the following CSS to your component-video-with-text.css file:

.video-with-text__media video {
  border-radius: 10px; /* Adjust the value to change the roundness */
}

Troubleshooting Common Issues

Video Not Displaying on Mobile

If the video doesn’t appear on mobile devices, ensure you’ve added the CSS snippet to your base.css file as mentioned in Step 4 of the implementation process.

Audio Not Working

By default, the video is muted. To enable audio, remove the muted="" attribute from the `tag in thevideo-with-text.liquid` file.

Video Freezing When Selecting Product Variants

If you notice that the video freezes when selecting product variants, you may need to modify the JavaScript that handles variant selection. Consider adding a play/pause button to give users control over the video playback.

Conclusion

Adding a Video with Text section to your Shopify store can significantly enhance your product presentations and overall user experience. By following this guide, you can implement this feature and customize it to fit your brand’s unique style and needs. Remember to test the section across various devices and browsers to ensure a consistent experience for all your customers.