Shopify themes, liquid, logos, and UX
Why dont you create a new section for the video banner instead of changing an image banner to video?
There isn't an option for that? If there was I wouldn't be asking the question.
You should have the option to create new sections. To create a new section, go to Edit Code > Sections > Add a new section
@lunaworks I am unsure on the steps after that. How will this add a video banner to my Home Page?
Because your theme doesnt have a video section, you'll have to create one. An image banner is for images only so you can use a video for that.
Below is a code for a video section, follow the steps above to create a new section and copy the code in the section you created. Go to your Customize > Add section, look for "Custom Video" section and add.
<video id="home-video" max-height="100%" width="100%" autoplay="" muted="" loop="" playsinline="">
<source src="{{ section.settings.custom_video }}" type="video/mp4">
Your browser does not support the video tag.
</video>
{% schema %}
{
"name": "Custom Video",
"settings": [
{
"type":"url",
"id":"custom_video",
"label":"Add video url"
}
],
"presets":[
{
"name":"Custom Video"
}
]
}
{% endschema %}
Do I suppose to add the url from files in the code where it states 'label: add video url'? I have done the steps above, created a section (edit code - sections - add section), and pasted this code in but in the created it isn't showing anything apart from the standard custom liquid.
Yes, add the URL to your video there. I’d suggest you upload your video to shopify, go to settings > files and then upload the video. You’ll get an option to copy the video you uploaded url
If I understand you clearly, you’ve created a section and added the code I sent earlier. You added the Custom video section and what happened?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024