Shopify themes, liquid, logos, and UX
I found some in this amazing community posted a way to create a video section with word overlay and a working button. However my video when I upload it is cropped, it doesn't go all the way to the edge of the screen. Can anyone help me edit this code that will help fill my video from edge to edge? My website is lejardinbridal.com
Here is the custom code that has created a new section:
{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<style>
.video-with-text .image-with-text__media video{
position: static!important;
}
.video-with-text .grid__item {
width: 100%;
max-width: none;
}
.image-with-text.video-with-text .image-with-text__text-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image-with-text.video-with-text .image-with-text__content {
background: rgba(0,0,0,0.5);
color: #fff;
}
.image-with-text.video-with-text .image-with-text__content h2 { color: #fff;}
.image-with-text.video-with-text .grid {
position: relative;
}
</style>
<div class="image-with-text video-with-text page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == 'background-1' and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding">
<div class="image-with-text__grid grid ">
<div class="image-with-text__media-item grid__item">
<div class="image-with-text__media gradient color-{{ section.settings.color_scheme }} global-media-settings {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
>
{%- if section.settings.image != blank -%}
<video playsinline="" loop="" muted="" autoplay="autoplay" preload="" style="object-fit:cover;">
<source src="{{ section.settings.image }}" type="video/mp4">
</video>
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
</div>
<div class="image-with-text__text-item grid__item">
<div id="ImageWithText--{{ section.id }}" class="image-with-text__content image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} content-container">
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'heading' -%}
<h2 class="image-with-text__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
{{ block.settings.heading | escape }}
</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="image-with-text__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}
<a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {{ block.shopify_attributes }}>
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "Video with text",
"class": "section",
"settings": [
{
"type": "text",
"id": "image",
"label": "Video"
},
{
"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": "header",
"content": "Mobile layout"
},
{
"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"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-with-text.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Image 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": "t:sections.image-with-text.blocks.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": "t:sections.image-with-text.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label"
}
],
"default": "body",
"label": "t:sections.image-with-text.blocks.text.settings.text_style.label"
}
]
},
{
"type": "button",
"name": "t:sections.image-with-text.blocks.button.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
"info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
}
]
}
],
"presets": [
{
"name": "Video with text",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "button"
}
]
}
]
}
{% endschema %}
Solved! Go to the solution
This is an accepted solution.
Please add this code to Custom CSS of that section in your Online store > Themes > Customize
.image-with-text { max-with: 100% !important; padding: 0px !important; }
- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi @mimiT
Could you share link that you added video to check?
- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Sure! this is the video link: https://cdn.shopify.com/videos/c/o/v/8ac97e637d5a4bb1a11883724bb8814c.mp4
Hi, I need the page link that you added that video section
- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
oh sorry! it's the homepage for my website: lejardinbridal.com
it's the section that says featured collections.
Hi @mimiT
They are the same ratio. In featured collection, video smaller because of width that section
- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you! How can I make the section bigger so the video is wider and full size?
Hi @mimiT
You can try to change setting of your page with in Online store > Theme > Customize > Theme Settings > Layout
- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you for your help! I tried that and it made it better but it still didn't bring it all the way to the edge.
Do you mean that section appear in full screen?
- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Yes!
This is an accepted solution.
Please add this code to Custom CSS of that section in your Online store > Themes > Customize
.image-with-text { max-with: 100% !important; padding: 0px !important; }
- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you so much! That fixed it! Thank you so much for your help! 😁
Happy I could help 😊!
- Solved it? Hit Like and Accept solution or ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025