Solved

How to add video with text sense theme?

Chapee45
Tourist
8 0 1

Hi everyone! I was wondering if anyone knew how to add a video into image with text? Ive seen so many other stores and youtubers do it on this theme but i just cant figure out how? Please someone help! And yes i know there are paid apps but i swear they dont have to use them because they make it look easy when building their store! Thanks!

Accepted Solution (1)

techlyser_web
Shopify Partner
1407 263 278

This is an accepted solution.

hello, @Chapee45 

 

video with text section code given below. and follow some steps.

1. Go to the admin >> theme >> edit code >> sections >> add a new section with the name 'video_with_text'.

2. When section created then copy the given code and paste into the created section.

copy code from here.

 

<!-- video with text section -->
<div id="vid-txt-{{ section.id }}" class="vid-text-con">
<div class="vid-text-wra page-width" >
<div class="vid-with-text-box" {% if section.settings.bg_clr %}style="background:{{ section.settings.body_text }}"{% endif %}>
<div class="text-content">
<div class="content">
<h2>{{ section.settings.heading }}</h2>
<p>{{ section.settings.content }}</p>
<div class="section-btn">
<a class="btn" href="{{ section.settings.url }}">{{ section.settings.btn_label }}</a>
</div>
</div>
</div>
<div class="video-section">
<div class="m_video">
{% if section.settings.select == 'MP4' %}
{% if section.settings.vid != blank %}
<video width="100%" height="100%" controls playinline {% if section.settings.check %}autoplay loop{% endif %} poster="{{ section.settings.poster |img_url: 'master' }}" loading='lazy'>
<source src="{{ section.settings.vid }}" type="video/mp4">
<source src="{{ section.settings.vid }}" type="video/ogg">
</video>
{% endif %}
{% else %}
{% if section.settings.i_vid != blank %}
<iframe width="100%" height="315" src="{{ section.settings.i_vid }}{% if section.settings.vid_auto %}?autoplay=1{% endif %}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>

<style>
.vid-text-wra {
margin-top: 30px;
padding-top: 40px;
padding-bottom: 40px;
}
.vid-with-text-box {
display: flex;
align-items: center;
padding: 20px 30px;
}
.text-content {
width: 50%;
padding: 50px 30px 40px;
}
.content h2 {
font-size: 28px;
line-height: 36px;
padding-bottom: 20px;
}
.content p {
font-size: 18px;
letter-spacing: 0.5px;
}
.video-section {
width: 50%;
height: 100%;
}
.m_video {
height: 100%;
}
.m_video video {
height: 100%;
width: 100%;
object-fit: cover;
}
.section-btn {
margin-top: 40px;
}

{% if section.settings.revrt %}
#vid-txt-{{ section.id }} .vid-with-text-box{
flex-direction: row-reverse;
}
{% endif %}
@media only screen and (max-width: 992px) {
{% if section.settings.m_revrt %}
.vid-with-text-box{
flex-direction: column-reverse;
}
{% endif %}
.text-content {
width: 100%;
}
.video-section {
width: 100%;
}
.vid-with-text-box {
padding: 0px 0px;
}
.text-content {
width: 100%;
padding: 20px 15px 20px;
}
.content h2 {
font-size: 24px;
line-height: 32px;
padding-bottom: 10px;
}
}
</style>

 

{% schema %}
{
"name": "video with text",
"class": "video_with_text",
"settings": [
{
"type": "checkbox",
"id": "revrt",
"label": "Video left"
},
{
"type": "checkbox",
"id": "m_revrt",
"label": "Video top on mobile"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Video With Text"
},
{
"type": "textarea",
"id": "content",
"label": "Content"
},
{
"type": "url",
"id": "url",
"label": "Button URL"
},
{
"type": "text",
"id": "btn_label",
"label": "Button URL"
},
{
"type": "radio",
"id": "select",
"label": "Video type",
"options": [
{
"value": "MP4",
"label": "MP4"
},
{
"value": "iframe",
"label": "Youtube/Vimeo"
}
],
"default": "MP4"
},
{
"type": "url",
"id": "vid",
"label": "MP4 video URL"
},
{
"type": "image_picker",
"id": "poster",
"label": "Poster on MP4 video"
},
{
"type": "checkbox",
"id": "check",
"label": "Video autoplay"
},
{
"type": "url",
"id": "i_vid",
"label": "Youtube/Vimeo video URL"
},
{
"type": "checkbox",
"id": "bg_clr",
"label": "background color"
},
{
"type": "color",
"id": "body_text",
"label": "BG-color",
"default": "#cdcdcd"
}
],
"presets": [
{
"name": "video with text"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

3. save.

4. If you are using theme version 2.0 then add section from theme customization. Or else please paste this code {% include 'video_with_text' %} wherever you want this section.

 

this section is dynamic you can change video, image or text any time from the theme customization.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 16 (16)

techlyser_web
Shopify Partner
1407 263 278

This is an accepted solution.

hello, @Chapee45 

 

video with text section code given below. and follow some steps.

1. Go to the admin >> theme >> edit code >> sections >> add a new section with the name 'video_with_text'.

2. When section created then copy the given code and paste into the created section.

copy code from here.

 

<!-- video with text section -->
<div id="vid-txt-{{ section.id }}" class="vid-text-con">
<div class="vid-text-wra page-width" >
<div class="vid-with-text-box" {% if section.settings.bg_clr %}style="background:{{ section.settings.body_text }}"{% endif %}>
<div class="text-content">
<div class="content">
<h2>{{ section.settings.heading }}</h2>
<p>{{ section.settings.content }}</p>
<div class="section-btn">
<a class="btn" href="{{ section.settings.url }}">{{ section.settings.btn_label }}</a>
</div>
</div>
</div>
<div class="video-section">
<div class="m_video">
{% if section.settings.select == 'MP4' %}
{% if section.settings.vid != blank %}
<video width="100%" height="100%" controls playinline {% if section.settings.check %}autoplay loop{% endif %} poster="{{ section.settings.poster |img_url: 'master' }}" loading='lazy'>
<source src="{{ section.settings.vid }}" type="video/mp4">
<source src="{{ section.settings.vid }}" type="video/ogg">
</video>
{% endif %}
{% else %}
{% if section.settings.i_vid != blank %}
<iframe width="100%" height="315" src="{{ section.settings.i_vid }}{% if section.settings.vid_auto %}?autoplay=1{% endif %}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>

<style>
.vid-text-wra {
margin-top: 30px;
padding-top: 40px;
padding-bottom: 40px;
}
.vid-with-text-box {
display: flex;
align-items: center;
padding: 20px 30px;
}
.text-content {
width: 50%;
padding: 50px 30px 40px;
}
.content h2 {
font-size: 28px;
line-height: 36px;
padding-bottom: 20px;
}
.content p {
font-size: 18px;
letter-spacing: 0.5px;
}
.video-section {
width: 50%;
height: 100%;
}
.m_video {
height: 100%;
}
.m_video video {
height: 100%;
width: 100%;
object-fit: cover;
}
.section-btn {
margin-top: 40px;
}

{% if section.settings.revrt %}
#vid-txt-{{ section.id }} .vid-with-text-box{
flex-direction: row-reverse;
}
{% endif %}
@media only screen and (max-width: 992px) {
{% if section.settings.m_revrt %}
.vid-with-text-box{
flex-direction: column-reverse;
}
{% endif %}
.text-content {
width: 100%;
}
.video-section {
width: 100%;
}
.vid-with-text-box {
padding: 0px 0px;
}
.text-content {
width: 100%;
padding: 20px 15px 20px;
}
.content h2 {
font-size: 24px;
line-height: 32px;
padding-bottom: 10px;
}
}
</style>

 

{% schema %}
{
"name": "video with text",
"class": "video_with_text",
"settings": [
{
"type": "checkbox",
"id": "revrt",
"label": "Video left"
},
{
"type": "checkbox",
"id": "m_revrt",
"label": "Video top on mobile"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Video With Text"
},
{
"type": "textarea",
"id": "content",
"label": "Content"
},
{
"type": "url",
"id": "url",
"label": "Button URL"
},
{
"type": "text",
"id": "btn_label",
"label": "Button URL"
},
{
"type": "radio",
"id": "select",
"label": "Video type",
"options": [
{
"value": "MP4",
"label": "MP4"
},
{
"value": "iframe",
"label": "Youtube/Vimeo"
}
],
"default": "MP4"
},
{
"type": "url",
"id": "vid",
"label": "MP4 video URL"
},
{
"type": "image_picker",
"id": "poster",
"label": "Poster on MP4 video"
},
{
"type": "checkbox",
"id": "check",
"label": "Video autoplay"
},
{
"type": "url",
"id": "i_vid",
"label": "Youtube/Vimeo video URL"
},
{
"type": "checkbox",
"id": "bg_clr",
"label": "background color"
},
{
"type": "color",
"id": "body_text",
"label": "BG-color",
"default": "#cdcdcd"
}
],
"presets": [
{
"name": "video with text"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

3. save.

4. If you are using theme version 2.0 then add section from theme customization. Or else please paste this code {% include 'video_with_text' %} wherever you want this section.

 

this section is dynamic you can change video, image or text any time from the theme customization.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Chapee45
Tourist
8 0 1

thanks soooo much!!!!!!!!!!!!

techlyser_web
Shopify Partner
1407 263 278

my pleasure 🙂

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
natanata
Excursionist
22 2 2

Hello! I have added the same section, however the video is not shown on mobile version.

shanhossler
Shopify Partner
1 0 0

Hey Natanata! Did you find an answer to this? We implemented the same but unfortunately, our mobile view is very wonky and missized. Thanks! 😄

heike1
Visitor
2 0 1

@techlyser_web thanks so much for sharing this. I am trying to add a link to our vimeo video, also tested with a random youtube video link however the video is not showing. it says "youtube refused connection". Do you know what the reason could be? (not sure if related but I selected "liquid" (vs. json) when inserting the code)

 

Also, i am trying to add a button (as it is supposed to be part of the website's hero section) but nothing is added although i have a link in the "button" insert field (see screenshot).

 

Thanks so much

 

just fyi, you may have noticed: i don't have any coding background at all 🙂

 

Shopify video issue.JPG

 

Shopify button issue.JPG

GoodSamaritan
Tourist
7 0 0

Damn this so coool you help me.

A quick question, can we also put an image and a video side by side together? 

BradGranatier
Visitor
1 0 0

Is there a way to keep the functionality of the "text_with_image" section?
Specifically I would like to be able to adjust top & bottom padding, etc.
Thanks in advance.

sachahcas
Explorer
54 3 5

Hi there,

I'm running Galleria Theme, and the code worked partially on that theme - this is the desktop implementation:
Screen Shot 2024-01-18 at 2.55.01 PM.png
You can see the video code is clashing with something in the Galleria Theme...
And this is what mobile looks like:
Screen Shot 2024-01-18 at 2.57.08 PM.png

What is my move here? How can I get the video to show on desktop, and show & properly size itself on mobile please?
I know I'm going a little rogue here asking about Galleria, but I'd sure do appreciate the help...

Have a great day everyone,



Sacha


If it ain't broke, don't fix it
leonlion
Visitor
1 0 0

Hello did you find a solution, because i'm facing the same issue youtube dosnt allow the connection 

caliman
Tourist
3 0 1

Thanks but I am getting this error on the page (the section shows the layout with text but no video)

Liquid error (sections/video_with_text line 206): Could not find asset snippets/video_with_text.liquid

Flynn-Mcgourlay
Visitor
3 0 0

 

Any help is greatly appreciated 

 

Flynn-Mcgourlay
Visitor
3 0 0

Hi this partially worked for me however the video does not auto play even when selected and the button does not look like any of the shop buttons in my store its just text with a link please can you help me get it perfect?

Sirr_riz
Visitor
1 0 0

Hello, it worked perfectly 

is there any way to make the video automatic as it plays infinitely without any play button controls?

Thanks i hope you understand

elizabethgarden
Visitor
1 0 0

Apologise for the question. I copied and pasted this code and I was able to have 'video with text', but then it let's me add only a picture if I select MP4, otherwise youtube video works but I have the actual video. Can you please help? Thank you so much

bakerboy
Visitor
3 0 0

Does anyone know how to reapir 'server not connecting to yt' when linking the video?