{"id":23401,"date":"2025-10-07T17:00:00","date_gmt":"2025-10-07T11:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=23401"},"modified":"2025-10-09T10:43:41","modified_gmt":"2025-10-09T05:13:41","slug":"add-shopify-video-with-text-section","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-shopify-video-with-text-section\/","title":{"rendered":"How to Add a Shopify Video with Text Section?"},"content":{"rendered":"\n

Modern shoppers expect more than just images; they want experiences. For that, you can add a Shopify video with text section.<\/p>\n\n\n\n

This feature lets you combine an engaging video with descriptive text, making your pages more interactive and visually appealing. In this guide, we\u2019ll walk you through how to add it easily using two different methods.<\/p>\n\n\n\n

Ways to Add a Shopify Text with Video Section<\/h2>\n\n\n\n

There are fundamentally two ways to add this feature to your Shopify store.<\/p>\n\n\n\n

Create Shopify custom code – <\/strong>This involves duplicating and modifying the existing theme section or building one from scratch using Shopify’s templating language, Liquid. It does require technical knowledge with a ton of time and effort.<\/p>\n\n\n\n

Directly add the Shopify section – <\/strong>Using a dedicated app, you can have this feature directly in your store. It comes with high flexibility, customization, and compatibility. And the plus point is that no coding stuff is needed, just a few clicks, and you\u2019re good to go.<\/p>\n\n\n\n

How to Add the Shopify Video Text Section App? <\/h2>\n\n\n\n

Use MIT Sections Pro <\/strong>to add this interesting feature to your site. Our app offers ready-to-use various styles of sections with advanced customization, such as adding an image with a video, multiple videos, and a navigation button.<\/p>\n\n\n\n

Check out this example using our app.<\/p>\n\n\n\n

\"Preview<\/figure>\n\n\n\n

Let\u2019s understand the app config.<\/p>\n\n\n\n

Step 1: Find and Add the Section<\/h3>\n\n\n\n

Firstly, install the MIT Sections Pro<\/a> from the Shopify App Store, then from the dashboard, click Browse sections, <\/strong>and search for the video with text.<\/strong><\/p>\n\n\n

\n
\"search<\/figure>\n<\/div>\n\n\n

Here we will move forward with the video with text 2; <\/strong>you can select whichever suits your brand.<\/p>\n\n\n

\n
\"click<\/figure>\n<\/div>\n\n\n

While on the free trial, you\u2019ll be redirected to the MIT demo store. After purchasing the section, you can add the selected section to your store\u2019s theme.<\/p>\n\n\n\n

Then click the Add section <\/strong>and select Meetanshi video with text 2.<\/strong><\/p>\n\n\n

\n
\"from<\/figure>\n<\/div>\n\n\n

Step 2: Customize the Video with Text Section <\/h3>\n\n\n\n

Click Meetanshi video with text 2 <\/strong>to expand the customization settings. Here, you get 60+ options to craft this in a way that matches your brand.<\/p>\n\n\n

\n
\"From<\/figure>\n<\/div>\n\n\n

Step 3: Showcase the Video on Related Pages <\/h3>\n\n\n\n

Once done making the changes, save <\/strong>them.<\/p>\n\n\n

\n
\"click<\/figure>\n<\/div>\n\n\n

The video is not limited to just the homepage. You can add it on product pages, landing pages, or even your about us page to make your content more engaging wherever it matters most.<\/p>\n\n\n\n

For instance, if you\u2019re running campaigns or want to display multiple product stories, a Shopify video slider<\/a> could be the perfect alternative.<\/p>\n\n\n\n

How to Add a Video with Text Section in Shopify Using Code?<\/h2>\n\n\n\n

The following is the process to add this section using custom code.<\/p>\n\n\n\n

Step 1: Create a New Section File<\/h3>\n\n\n\n

From your Shopify admin panel, head to Online store > Themes > \u2026(Three dots) > Edit code. <\/strong>From the Sections <\/strong>folder, add a new section and save it as video-with-text.liquid.<\/strong><\/p>\n\n\n

\n
\"create<\/figure>\n<\/div>\n\n\n

Step 2: Add the Code to the File <\/h3>\n\n\n\n

Copy and paste the following code into the video-with-text.liquid<\/strong> file. Save <\/strong>the file.<\/p>\n\n\n\n

{%- liquid\n  assign video_url = section.settings.video_url\n  assign video_type = section.settings.video_type\n  assign video_style = section.settings.video_style\n  assign video_alignment = section.settings.video_alignment\n  assign heading = section.settings.heading\n  assign subheading = section.settings.subheading\n  assign text = section.settings.text\n  assign button_label = section.settings.button_label\n  assign button_link = section.settings.button_link\n-%}\n\n<style>\n  .video-with-text {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 50px 20px;\n  }\n\n  .video-with-text__content-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: 1200px;\n    gap: 40px;\n  }\n\n  @media (min-width: 768px) {\n    .video-with-text__content-wrapper {\n      flex-direction: row;\n      align-items: center;\n    }\n\n    .video-with-text__content-wrapper.video-with-text__content-wrapper--{{ video_alignment }} {\n      flex-direction: {% if video_alignment == 'left' %}row-reverse{% else %}row{% endif %};\n    }\n  }\n\n  .video-with-text__video {\n    position: relative;\n    width: 100%;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    overflow: hidden;\n  }\n\n  .video-with-text__video iframe,\n  .video-with-text__video video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .video-with-text__video.video-with-text__video--{{ video_style }} {\n    \/* Styles for different video shapes, e.g., rounded corners *\/\n    {% if video_style == 'rounded' %}\n      border-radius: 15px;\n      overflow: hidden;\n    {% endif %}\n  }\n\n  .video-with-text__text {\n    width: 100%;\n    text-align: center;\n  }\n\n  @media (min-width: 768px) {\n    .video-with-text__text {\n      text-align: left;\n    }\n  }\n\n  .video-with-text__heading {\n    font-size: 2em;\n    margin-bottom: 0.5em;\n  }\n\n  .video-with-text__subheading {\n    font-size: 1.2em;\n    color: #555;\n    margin-bottom: 1em;\n  }\n\n  .video-with-text__body {\n    line-height: 1.6;\n    margin-bottom: 1.5em;\n  }\n\n  .video-with-text__button {\n    display: inline-block;\n    padding: 12px 24px;\n    background-color: #000;\n    color: #fff;\n    text-decoration: none;\n    border-radius: 5px;\n  }\n<\/style>\n\n<div class=\"video-with-text\">\n  <div class=\"video-with-text__content-wrapper video-with-text__content-wrapper--{{ video_alignment }}\">\n    <div class=\"video-with-text__video video-with-text__video--{{ video_style }}\">\n      {% if video_type == 'youtube' %}\n        <iframe\n          src=\"{{ video_url | split: 'v=' | last | prepend: 'https:\/\/www.youtube.com\/embed\/' }}?autoplay=1&mute=1&loop=1&playlist={{ video_url | split: 'v=' | last }}\"\n          frameborder=\"0\"\n          allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n          allowfullscreen>\n        <\/iframe>\n      {% elsif video_type == 'vimeo' %}\n        <iframe\n          src=\"{{ video_url | split: 'vimeo.com\/' | last | prepend: 'https:\/\/player.vimeo.com\/video\/' }}?autoplay=1&loop=1&background=1\"\n          frameborder=\"0\"\n          allow=\"autoplay; fullscreen; picture-in-picture\"\n          allowfullscreen>\n        <\/iframe>\n      {% else %}\n        <p>Please add a valid YouTube or Vimeo URL in the section settings.<\/p>\n      {% endif %}\n    <\/div>\n\n    <div class=\"video-with-text__text\">\n      {% if heading != blank %}\n        <h2 class=\"video-with-text__heading\">{{ heading | escape }}<\/h2>\n      {% endif %}\n      {% if subheading != blank %}\n        <p class=\"video-with-text__subheading\">{{ subheading | escape }}<\/p>\n      {% endif %}\n      {% if text != blank %}\n        <div class=\"video-with-text__body\">{{ text }}<\/div>\n      {% endif %}\n      {% if button_label != blank and button_link != blank %}\n        <a href=\"{{ button_link }}\" class=\"video-with-text__button\">{{ button_label | escape }}<\/a>\n      {% endif %}\n    <\/div>\n  <\/div>\n<\/div>\n\n{% schema %}\n{\n  \"name\": \"Video with text\",\n  \"settings\": [\n    {\n      \"type\": \"header\",\n      \"content\": \"Video Settings\"\n    },\n    {\n      \"type\": \"select\",\n      \"id\": \"video_type\",\n      \"label\": \"Video Source\",\n      \"options\": [\n        { \"value\": \"youtube\", \"label\": \"YouTube\" },\n        { \"value\": \"vimeo\", \"label\": \"Vimeo\" }\n      ],\n      \"default\": \"youtube\"\n    },\n    {\n      \"type\": \"text\",\n      \"id\": \"video_url\",\n      \"label\": \"Video URL\",\n      \"info\": \"Paste the full URL for your YouTube or Vimeo video.\"\n    },\n    {\n      \"type\": \"select\",\n      \"id\": \"video_style\",\n      \"label\": \"Video Style\",\n      \"options\": [\n        { \"value\": \"default\", \"label\": \"Default\" },\n        { \"value\": \"rounded\", \"label\": \"Rounded Corners\" }\n      ],\n      \"default\": \"default\"\n    },\n    {\n      \"type\": \"select\",\n      \"id\": \"video_alignment\",\n      \"label\": \"Video and Text Alignment\",\n      \"options\": [\n        { \"value\": \"left\", \"label\": \"Video on Left\" },\n        { \"value\": \"right\", \"label\": \"Video on Right\" }\n      ],\n      \"default\": \"right\"\n    },\n    {\n      \"type\": \"header\",\n      \"content\": \"Text Content\"\n    },\n    {\n      \"type\": \"text\",\n      \"id\": \"heading\",\n      \"label\": \"Heading\",\n      \"default\": \"Your Heading Here\"\n    },\n    {\n      \"type\": \"text\",\n      \"id\": \"subheading\",\n      \"label\": \"Subheading\",\n      \"default\": \"A short, catchy subheading.\"\n    },\n    {\n      \"type\": \"richtext\",\n      \"id\": \"text\",\n      \"label\": \"Text\",\n      \"default\": \"<p>This is the main body of text. You can use this space to describe the video's content, your brand's mission, or any other important information you want to convey.<\/p>\"\n    },\n    {\n      \"type\": \"text\",\n      \"id\": \"button_label\",\n      \"label\": \"Button Label\",\n      \"default\": \"Learn More\"\n    },\n    {\n      \"type\": \"url\",\n      \"id\": \"button_link\",\n      \"label\": \"Button Link\"\n    }\n  ],\n  \"presets\": [\n    {\n      \"name\": \"Video with text\",\n      \"category\": \"Media\"\n    }\n  ]\n}\n{% endschema %}\n<\/pre>\n\n\n
\n
\"Liquid<\/figure>\n<\/div>\n\n\n
Step 3: Add the Section to a Page<\/h3>\n\n\n\n
Now, head back to the Shopify admin panel, go to the Online stores > Themes > Customize. <\/strong>From the theme editor, click Add section <\/strong>and select Video with text.<\/strong><\/p>\n\n\n
\n
\"from<\/figure>\n<\/div>\n\n\n
Then click Video with text <\/strong>to expand the customization, make changes as needed, and save <\/strong>them.<\/p>\n\n\n
\n
\"From<\/figure>\n<\/div>\n\n\n
This is how it will look, simple and basic.<\/p>\n\n\n\n
\"Preview<\/figure>\n\n\n\n
Why Use Our MIT Sections Pro? <\/h2>\n\n\n\n
Our app gives Shopify owners total control over their section styles, layouts, and designs. You get over 130+ ready-to-use sections, all compatible with Shopify themes, plus a free trial. <\/p>\n\n\n\n
It’s a no-brainer for any store. The app is free to install, and lots of sections are free to use. No coding needed,  just a few clicks to get your sections looking exactly how you want.<\/p>\n\n\n
\r\n
\r\n130+ Shopify Sections<\/span>\r\n
Your all-in-one solution to create a professional Shopify store<\/p>\r\nInstall App Now<\/a>\r\n<\/div>\r\n
\r\n\"MIT\r\n<\/div>\r\n<\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Modern shoppers expect more than just images; they want experiences. For that, you can add a Shopify video with text section. This feature lets you…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-23401","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=23401"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23401\/revisions"}],"predecessor-version":[{"id":23475,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23401\/revisions\/23475"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=23401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=23401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=23401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}