Shopify themes, liquid, logos, and UX
So I have this section for Video with Text overlay however the text is below this video. Does anyone know how to adjust this. I think I need to add some code into the theme file but I am unsure what.
allstonvillage.myshopify.com
Here is the section code
<!-- /sections/index-mp4.liquid -->
<div class="homepage-image preventOverflow {{ section.settings.height }} {{ section.settings.color }}" data-section-id="{{ section.id }}" data-section-type="banner" {% if section.settings.parallax %}data-img-src="{{ background_image }}"{% endif %}>
<video autoplay loop muted playsinline width="100%">
<source src="{{ section.settings.videofile }}" type="video/mp4" id="{{ section.id }}">
</video>
{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
<a href="{{ section.settings.link }}">
{% endif %}
<div id="index-mp4-video">
</div>
<div class="content--centered mp4">
<div class="{{ section.settings.text_align }} preventOverflowContent">
{% if section.settings.button_image %}
<a href="{{ section.settings.link }}">
<img src="{{ section.settings.button_image | img_url: '1000x' }}" alt="{{ section.settings.button_image.alt | default: section.settings.link_text }}" class="image--flex" />
</a>
{% else %}
{% unless section.settings.title == '' %}<h1 class="title--flex">{{ section.settings.title | escape }}</h1>{% endunless %}
{% unless section.settings.description == '' %}<p class="content--flex h4--body">{{ section.settings.description }}</p>{% endunless %}
{% unless section.settings.link_text == '' %}<a class="{{ section.settings.button_style }}" href="{{ section.settings.link }}">{{ section.settings.link_text | escape }}</a>{% endunless %}
{% endif %}
</div>
</div>
{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
</a>
{% endif %}
{% if section.settings.height == 'use_screen_full' %}
<div class="scroll_icon_wrap">
<a href="#scroll-{{ section.id }}" class="scroll_link bloop">
<span class="scroll_icon">{% include 'svg-down' %}</span>
</a>
</div>
<div class="scroll__link" id="scroll-{{ section.id }}"></div>
{% endif %}
</div>
<script type="text/javascript">
document.getElementById('{{ section.id }}').play();
$(function () {
if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$("video").prop('muted', false);
}
});
</script>
{% schema %}
{
"name": "Video MP4",
"settings": [
{
"type": "text",
"id": "videofile",
"label": "Video URL",
"default": "https://cdn.shopify.com/s/files/1/2018/8867/files/ice.mp4"
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Headline",
"default": "Video with text overlay"
},
{
"type": "textarea",
"id": "description",
"label": "Description",
"default": "This area is used to describe your store."
},
{
"type": "select",
"id": "text_align",
"label": "Alignment",
"default": "text-center",
"options": [
{ "value": "text-left", "label": "Align Left"},
{ "value": "text-center", "label": "Align Center"},
{ "value": "text-right", "label": "Align Right"}
]
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 5,
"label": "Image overlay opacity",
"info": "Increase contrast for legible text.",
"default": 15
},
{
"type": "select",
"id": "color",
"label": "Text color",
"default": "homepage--white",
"options": [
{ "value": "homepage--white", "label": "White"},
{ "value": "homepage--light", "label": "Light"},
{ "value": "homepage--splash", "label": "Accent"},
{ "value": "homepage--dark", "label": "Dark"}
]
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "View products"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "btn btn--large btn--clear btn--square uppercase",
"options": [
{ "value": "btn btn--large btn--splash uppercase", "label": "Round"},
{ "value": "btn btn--large btn--splash btn--square uppercase", "label": "Square"},
{ "value": "btn btn--large btn--clear uppercase", "label": "Transparent round"},
{ "value": "btn btn--large btn--clear btn--square uppercase", "label": "Transparent square"},
{ "value": "btn btn--large btn--outline btn--square uppercase", "label": "Outlined square"}
]
},
{
"type": "header",
"content": "Overlay image (optional)"
},
{
"type": "image_picker",
"id": "button_image",
"label": "Replaces all text",
"info": "1000 x 1000px .png max"
}
],
"presets": [
{
"name": "Video with text overlay",
"category": "Video"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
Hello, @aliboulala
Welcome to the Shopify community!
and Thanks for your Good question.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.homepage-image {
position: relative;
.content--centered.mp4 {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
So I ended up trying it now on a friends website and the text doesn't work. the website is skateshop-tester.myshopify.com
I got it install great, and put the code to put the text in the middle but it stays below still. Do you know how to adjust this, and also how to adjust the text size for mobile?
Thanks!
Thanks for update
give me screenshot do you need changes
Here is screenshot. The text is still below the video and not centered over it like I was hoping.
skateshop-tester.myshopify.com
There was no theme.scss.liquid so I put your code in stylesheet.css.liquid, maybe that is why it's not working? Is there also a way to adjust the sizing of the text for mobile?
Thanks!
.homepage-image { position: relative; .content--centered.mp4 { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); } }
First, remove the above code
then add this
1. Go to Online Store->Theme->Edit code
2. Asset->/stylesheet.css->paste below code at the bottom of the file.
.homepage-image .content--centered {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
Hey, still not working, I deleted and then pasted exactly what you said and it put the text at the top of my page and not on top of the video element.
I'll attach photos.
sorry fo this
can you please add this code also
.homepage-image {
position: relative;
}
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