Shopify themes, liquid, logos, and UX
Hi Community and Experts!
I am currently struggling with the following task:
I want to create a "Video with Text" section just like the "Image with Text" section. I found the following discussion where the Problem was solved, but no real solution was given: https://community.shopify.com/c/shopify-design/how-to-make-a-video-with-image-section-in-shopify/td-...
In the End it should look like this: https://myblend.se/pages/instructions
So, autoplay and loop as well.
I guess as stated in the discussion, duplicate the "Image with Text" section in the Section Folder in "Edit Code" and replace the Image code with video code. I cant figure out which is which and with what code to replace, the video.liquid code?
Edit: As well as add/configure an Asset .css
Thanks for the help!
Solved! Go to the solution
This is an accepted solution.
Hi everyone!
I hired a coder to do it since I couldn't fin anything helpful. Here you go:
Create a new section with this code, called "video-with-text.liquid"
{{ '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 %}
And create a new asset called "component-video-with-text.css" with this code:
.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;
}
.video-with-text__content {
padding-left: 15px !important;
padding-right: 15px !important;
}
This is an accepted solution.
thanks for more details can you please try this code
1. Go to Online Store->Theme-> Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
.video-with-text video {
position: relative !important;
}
}
yes, please try ir same section code other page its work as well
Thanks for getting back!
What do you mean with same section code, other page?
I want to have a separate section, where I can have a video and text side to side.
Wouldn't I need a component-video-with-text.css as well as a video-with-text-liquid?
If you could just post some code, I would very much appreciate it!
Thanks.
yes, please create new one and add
Did you find a code ,if yes do you mind sharing here please
Hello, I added the code to my theme but the video is wrong. The theme that I´m using is Flex-bloom, do you have any solution for this?
This is how my page looks like
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here
yes, please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css ->paste below code at the bottom of the file.
@media screen and (min-width: 750px){
.video-with-text .grid {
display: flex;
}
}
Thank you very much for your Help, it's perfect
Hey @KetanKumar, thank you so much for the help in this thread! Would you be able to tell us if there's a way to make the videos' corners always round? And, I've noticed that the videos' size only adapts to the amount of text there is next to them, do you know if there's a way to just make them all the same size? Thanks in advance 😉
What's @vincentdh, I really appreciate you giving us this crazy section 🙂
I was wondering if you were still using it because I discovered a little bug. When a product has variants and one switches variants, the videos stop looping and therefore stop completely. Had you noticed this? If so, did you manage to fix it? Thanks again
I just found a solution!!
After three whole days trying to improve the document: video-with-text.liquid , (where I added new features such as a pause and play button, focused on computers and mobile devices, etc.) here
I managed to prevent videos from stopping or freezing when selecting a product variant.
1º Go to media-gallery.js
2º Find and remove the following code (line 84):
playActiveMedia(activeItem) {
window.pauseAllMedia();
const deferredMedia = activeItem.querySelector('.deferred-media');
if (deferredMedia) deferredMedia.loadContent(false);
}
Finished
If you experience failures when removing this code on the "buy" and "add to cart" buttons, consider keeping the code and removing only the following line:
window.pauseAllMedia();
The updated code:
Hi there, I'm wondering if there's a way to make the video play sound? Everything else works great with these updated codes I'm just hoping the sound will play. Any suggestions? Thanks so much!
In order to enable video audio, remove the following code snippet from your video-with-text.liquid file (line 7):
muted=""
The code would look like this:
<video preload="metadata" style="max-width: 100%; height: 100%;" id="videoPlayer" webkit-playsinline="" playsinline="">
I hope it has helped you!
Hi Ketan,
I just came across this thread while trying to figure out how to add videos with text to my website. This worked!!! but it is only working on product pages. How do I have it listed as a template option so that I may add it to my home and collections pages as well?
The above codes worked well with desktop but the video is completely gone on mobile. Any idea why?
What's up, you have to paste some lines of code at the bottom of the base.css, just like KetanKumar showed in this thread
Hi @vincentdh
You can have a look at this app PlusPage.
This app can help you to add 'video with text' like 'image with text'. So instead of image, it will be a video from Youtube, Vimeo, or custom upload.
They have a tutorial here.
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!
Hi @vincentdh ,
I am not sure if able to find solution but I just created a video with text section. You can also add an internal source video. Check the video for more info.
i didn't find the code. can you please send it to me here
@vincentdh do you mind sharing the theme name and the video with text and video with text overlay code please. it will be really helpful . i aam struggling with this please
This is an accepted solution.
Hi everyone!
I hired a coder to do it since I couldn't fin anything helpful. Here you go:
Create a new section with this code, called "video-with-text.liquid"
{{ '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 %}
And create a new asset called "component-video-with-text.css" with this code:
.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;
}
.video-with-text__content {
padding-left: 15px !important;
padding-right: 15px !important;
}
THANK YOU SOOOO MUCH!!
Great job @vincentdh , thnx for the help it works fine and to me but not in mobile view.
In mobile view the video disappears . Do you have any solution update?
How would one increase the text size in the video with text box? In addition, can you decrease the amount of space between this and another section?
I also noticed the video does not show up on mobile devices... Any idea how to fix this?
can you please share store url
thanks but i can''t see video section on home page can you show me
It's on the Mission page.
This is an accepted solution.
thanks for more details can you please try this code
1. Go to Online Store->Theme-> Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
.video-with-text video {
position: relative !important;
}
}
Ketan, you are awesome, that worked! Thank you for your help!
its my pleasure to help us
Hi,
This has been very useful and just what I was looking for.
I just have a couple of questions...
1. For me, changing the size of the video doesn't work most of the time, does anyone else have this issue?
2. there seems to be padding on the left and right, so when I change the theme colour, there are white columns either side of the block, how can I fix this?
3. is it possible to add all the editing options that are available for the image with text section?
e.g. content overlap, padding etc.?
Thanks in advance 😊
@KetanKumar , im also trying to upload video with text. i have implemented the above codes. but is there any way to also allow youtube url instead of just shopify url.
This code is working well for me but I have a problem. Everything works as intended on initial landing, but once a product image or different variant is selected all the videos freeze. Is there any way to keep them playing?
Hi Jonathan and everyone!
I'll try to shed some light on all the issues I've seen relevant in this thread:
- video freeze when you select product variants
-Why doesn't it show up on mobile?
-add and improve blocks to the video-with-text section
I have been trying to avoid this bug. I have read a lot on the internet, and watched a lot of videos... Still I can't find a reason why the videos are stopped when you choose a variant of the product.
Of the thousand ideas I had, the last one was the one that worked for me. Include a pause and play button. In this way, when it stops you can start it again whenever you want. It's not the perfect solution, but it works.
Updated code from: video-with-text.liquid
{{ '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%;" id="videoPlayer" loop="loop" muted="" webkit-playsinline="" playsinline="">
<source src="{{ section.settings.video_url }}" type="video/mp4" />
</video>
<div class="video-controls">
<button id="playButton" class="video-control-button" onclick="playPauseVideo()">Play</button>
<button id="pauseButton" class="video-control-button" onclick="playPauseVideo()" style="display: none;">Pause</button>
</div>
</div>
</div>
<div class="grid__item">
<div
id="VideoWithText--{{ section.id }}"
class="video-with-text__content video-with-text__content--{{ section.settings.height }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }}">
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'heading' -%}
<h2
class="image-with-text__heading inline-richtext {{ block.settings.heading_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.heading }}
</h2>
{%- when 'caption' -%}
<p
class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}"
{{ block.shopify_attributes }}
>
{{ block.settings.caption | escape }}
</p>
{%- 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>
<script>
function playPauseVideo() {
var videoPlayer = document.getElementById('videoPlayer');
var playButton = document.getElementById('playButton');
var pauseButton = document.getElementById('pauseButton');
if (videoPlayer.paused) {
videoPlayer.play();
playButton.style.display = 'none';
pauseButton.style.display = 'inline-block';
} else {
videoPlayer.pause();
playButton.style.display = 'inline-block';
pauseButton.style.display = 'none';
}
}
</script>
{% 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."
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.label"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-with-text.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Video with text",
"label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "caption",
"name": "t:sections.image-with-text.blocks.caption.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "caption",
"default": "Add a tagline",
"label": "t:sections.image-with-text.blocks.caption.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.label"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.label"
}
]
},
{
"type": "text",
"name": "Texto",
"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 %}
Updated code from: component-video-with-text
.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;
}
.video-with-text__text>h3 {
color: #404040 !important;
}
I have also made some improvements. Now you have more options to edit the section. Added: desktop and mobile content alignment (left, right and center), a title caption... (by the way, if you want to change the color of the description text do it here: line 134 of the new code component-video-with-tex.css
If you want to edit the style of the button, add the following code at the beginning of the document: video-with-text.liquid ( starting on line 2, after {{ 'component-video-with-text.css' | asset_url | stylesheet_tag }} )
<style>
/* Custom styles for the video control button */
.video-control-button {
background-color: transparent; /* Button background color */
border-radius: 8px; /* Button border radius */
font-size: 12px; /* Button font size */
padding: 6px 16px; /* Button internal padding */
color: #FFFFFF; /* Button text color */
}
.video-with-text__media {
position: relative;
}
/* Custom styles for the video controls container */
.video-controls {
position: absolute;
top: 10px;
right: 10px;
}
</style>
For those wondering how to watch the video on mobile, KetanKumar has already answered that, but I see many still asking. I'll rewrite his answer:
1. Go to Online Store->Theme-> Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
.video-with-text video {
position: relative !important;
}
}
And I think that would be it! If you have any more questions, don't hesitate to ask. Like if I helped you! 👍
Hi Spac-Es. Im getting the error "Invalid preset "Video with text": cannot include blocks in preset because there are no blocks defined."' when trying to save the "video-with-text.liquid" file. Any ideas on what i am doing wrong please? thank you.
Hello Forbiddenarea! I have improved the code and fixed the error you mention. By the way, since the video is in a "loop", when going from the last frame to the first, a kind of cut is usually seen; I have fixed this by adding an animation to make it look smoother on mobile devices, on PC it should look perfect.
I hope this helps you!
This is the code I'm using in my store currently:
{{ '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 }}" id="animation-container">
<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 preload="metadata" style="max-width: 100%; height: 100%;" id="videoPlayer" muted="" webkit-playsinline="" playsinline="">
<source src="{{ section.settings.video_url }}" type="video/mp4" />
</video>
<div class="video-controls">
<button id="playButton" class="video-control-button" onclick="playPauseVideo()">Play</button>
<button id="pauseButton" class="video-control-button" onclick="playPauseVideo()" style="display: none;">Pause</button>
</div>
</div>
</div>
<div class="grid__item">
<div
id="VideoWithText--{{ section.id }}"
class="video-with-text__content video-with-text__content--{{ section.settings.height }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }}">
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'heading' -%}
<h2
class="image-with-text__heading inline-richtext {{ block.settings.heading_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.heading }}
</h2>
{%- when 'caption' -%}
<p
class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}"
{{ block.shopify_attributes }}
>
{{ block.settings.caption | escape }}
</p>
{%- 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>
<script>
function playPauseVideo() {
var videoPlayer = document.getElementById('videoPlayer');
var playButton = document.getElementById('playButton');
var pauseButton = document.getElementById('pauseButton');
if (videoPlayer.paused) {
videoPlayer.play();
playButton.style.display = 'none';
pauseButton.style.display = 'inline-block';
} else {
videoPlayer.pause();
playButton.style.display = 'inline-block';
pauseButton.style.display = 'none';
}
}
document.addEventListener('DOMContentLoaded', function() {
var videoPlayer = document.getElementById('videoPlayer');
var playButton = document.getElementById('playButton');
var pauseButton = document.getElementById('pauseButton');
// Check if it is running on PC
var isDesktop = window.matchMedia("(min-width: 1024px)").matches;
// Autoplay on PC only
if (isDesktop) {
videoPlayer.autoplay = true;
playButton.style.display = 'none';
pauseButton.style.display = 'inline-block';
}
// Update buttons when pausing/playing the video and restart immediately when finished
videoPlayer.addEventListener('pause', function() {
playButton.style.display = 'inline-block';
pauseButton.style.display = 'none';
});
videoPlayer.addEventListener('play', function() {
playButton.style.display = 'none';
pauseButton.style.display = 'inline-block';
});
if (isDesktop) {
videoPlayer.addEventListener('ended', function() {
videoPlayer.currentTime = 0;
videoPlayer.play();
});
}
// Add smooth fade out when restarting video on completion (mobile only)
if (!isDesktop) {
videoPlayer.addEventListener('ended', function() {
fadeOut(videoPlayer, 300, function() {
videoPlayer.currentTime = 0;
fadeIn(videoPlayer, 300);
videoPlayer.play();
});
});
}
});
function fadeOut(element, duration, callback) {
element.style.opacity = 1;
var currentTime = 0;
var increment = 0.05;
var interval = setInterval(function() {
currentTime += increment;
element.style.opacity = 1 - currentTime;
if (currentTime >= 1) {
clearInterval(interval);
callback();
}
}, duration * increment);
}
function fadeIn(element, duration) {
element.style.opacity = 0;
var currentTime = 0;
var increment = 0.05;
var interval = setInterval(function() {
currentTime += increment;
element.style.opacity = currentTime;
if (currentTime >= 1) {
clearInterval(interval);
}
}, duration * increment);
}
</script>
{% 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."
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.label"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-with-text.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Video with text",
"label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "caption",
"name": "t:sections.image-with-text.blocks.caption.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "caption",
"default": "Add a tagline",
"label": "t:sections.image-with-text.blocks.caption.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.label"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.label"
}
]
},
{
"type": "text",
"name": "Text",
"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 %}
Thanks for getting back @Spac-es very much appreciated. unfortunately i am still getting the same error when trying to save the file.
I just discovered the error. It's not about the code. It's just a Shopify bug.
Do the following steps:
1- Copy and paste the code that I gave you previously.
2- You will see the following error: Invalid preset "Video with text": cannot include blocks in preset because there are no blocks defined.
3- Delete the following code:
"presets": [
{
"name": "Video with text",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "button"
}
]
}
]
4- You will see the following error: Invalid JSON code in the schema tag.
5- Remove the comma from the "]"
6- Save the file.
7- At the top left, access the three dots (Customize theme).
7- Wait for the page to load completely and try to find and add the Image-with-text section, you will see that it does not appear.
8- Go back to "Edit code" in the three dots.
9- Add the comma that we eliminated.
10- Add the code that we removed.
11- Save the file.
12- You will no longer see any errors.
13- You can go back to the "Customizer" and add the new section: Video with text.
WOW. Amazing. That worked exactly as described. Thank you.
Thats some impressive trouble shooting. really. thank you.
thank you for your help but could you please help me why the play button is not even on the video?
hello, the original code works fine for me, it is just the mobile issue. It is showing a blank space and not showing the video at all. I tried adding your solution to the base.css and it still doesn't work
Can you share the URL of your website with me? (including the password if there is one)
https://irriniti.com/products/irriniti-portable-lint-hair-remover this is the product page. so on desktop it works fine but on mobile it is blank. thank you for taking the time
I think the issue with your code is the 'autoplay':
Many mobile devices (if not all) don't allow automatic playback. That's why in the code I provided, a 'play' and 'pause' button are added, toggling when pressed.
i see, well maybe you can help me further to figure this out. I got the idea of video and text section from this website https://thevortix.com/products/vortix-smart-car-vacuum-air-blower and they have that feature where the video is on autoplay and it works on mobile. Maybe you can check their code and see the difference for the solution. thanks
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024