Changing font style and adding a background to custom video banner

Mtvail84 · November 17, 2025, 6:25pm

How can I customize the font style in my video banner background and add a backdrop behind the font to make the words easier to read? Current code for the video banner:

{% liquid

assign video_link = section.settings.video_link

assign video_image = section.settings.video_image

assign custom_poster = section.settings.custom_poster

assign overlay_opacity = section.settings.overlay_opacity

assign title = section.settings.title

assign color_text = section.settings.color_text

assign title_font_size = section.settings.title_fontSize

assign description_font_size = section.settings.description_fontSize

assign text = section.settings.text

assign button_link = section.settings.button_link

assign button_label = section.settings.button_label

assign button_font_size = section.settings.button_fontSize

assign color_btn_text = section.settings.color_btn_text

assign color_btn_bg = section.settings.color_btn_bg

assign btn_radius = section.settings.btn_radius

assign bg_col = section.settings.bgCol

%}

body.template.index .main-content .videoBackground { margin-top: -55px; } .videoBackground { position: relative; width: 100%; overflow: hidden; } .videoBackground .fullscreen-video-wrap { height: 100%; left: 0; min-width: 100%; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: 0; } .videoBackground .fullscreen-video-wrap .video-js { background-color: {{ bg_col }}; height: 100%; left: 0; min-height: 100%; min-width: 100%; position: absolute; object-fit: cover; top: 0; width: 100%; } .videoBackground .fullscreen-video-wrap video { min-height: 100%; min-width: 100%; object-fit: cover; } .videoBackground .videoBox { background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 500px; padding: 100px 20px 80px; position: relative; max-height: 800px; height: calc(100vh - 165px); } .videoBackground .overlay { background: #000; position: absolute; content: ""; display: block; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .videoBackground .videoBoxInfo { text-align: center; z-index: 2; } .videoBackground .videoBoxInfoBtn { \-moz-appearance: none; \-webkit-appearance: none; appearance: none; \-moz-user-select: none; \-webkit-user-select: none; \-ms-user-select: none; user-select: none; border: 1px solid transparent; cursor: pointer; display: inline-block; font-size: {{ button_font_size }}rem; font-style: normal; font-weight: 800; letter-spacing: 0.06em; margin: 20px auto; padding: 10px 20px; text-align: center; text-decoration: none; text-transform: uppercase; vertical-align: middle; white-space: normal; width: auto; border-radius: {{ btn_radius }}px; color: {{ color_btn_text }}; background-color: {{ color_btn_bg }}; } .videoBackground .videoBoxInfoTitle { color: {{ color_text }}; font-size: {{ title_font_size }}rem; line-height: 1.2; } .videoBackground .videoBoxInfoDescription { margin: 0 auto; max-width: 600px; } .videoBackground .videoBoxInfoDescription p { font-size: {{ description_font_size }}rem; color: {{ color_text }}; } .videoBackground .placeholderNoblocks { text-align: center; margin: 0 auto; max-width: 600px; } @media only screen and (max-width: 767px) { body.template.index .main-content .videoBackground { margin-top: 0; } .videoBackground .overlay { opacity: 0 !important; } .videoBackground .fullscreen-video-wrap { z-index: 0; width: 100%; height: auto; aspect-ratio: 16 / 9; position: relative; } .videoBackground .fullscreen-video-wrap .video-js, .videoBackground .fullscreen-video-wrap video { width: 100%; height: auto; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .videoBackground .videoBox { padding: 0; height: auto; min-height: auto; justify-content: center; width: 100%; } .videoBackground .videoBoxInfo { width: 100%; background: {{ bg_col }}; /\* Text banner background color for smaller screens \*/ max-width: 100%; } .videoBackground .videoBoxInfoTitle { font-size: {{ title_font_size | times: 0.75 }}rem; margin: 10px auto; } .videoBackground .videoBoxInfoDescription { max-width: 90%; } .videoBackground .videoBoxInfoDescription p { font-size: {{ description_font_size | times: 0.75 }}rem; } .videoBackground .videoBoxInfoBtn { font-size: {{ button_font_size | times: 0.60 }}rem; padding: 10px 15px; margin: 0 auto; margin-bottom: 30px; } } <div

class=“videoBox”

style=“{% if video_link == blank %}background-image: url(‘{{ video_image | image_url: width: 1920 }}’);{% endif %}”

>

{% if video_link != blank %}

<video

class=“video-js”

loop

autoplay

preload=“none”

muted

playsinline

poster=“{% if custom_poster != blank %}{{ custom_poster | image_url: width: 1920 }}{% endif %}”

>

{% endif %}

{% if title != blank %}

{% endif %}

{% if text != blank %}

{% endif %}

{% if button_link != blank and button_label != blank %}

<a

href=“{{ button_link }}”

class=“videoBoxInfoBtn”

>

{% endif %}

{% schema %}

{

“name”: “Video Banner”,

“class”: “videoBackground”,

“settings”: [

“type”: “url”,

“id”: “video_link”,

“label”: “Video Link”,

“info”: “Upload a video to your Shopify files and paste the link here.”

},

{

“type”: “image_picker”,

“id”: “video_image”,

“label”: “Cover Image”

},

{

“type”: “image_picker”,

“id”: “custom_poster”,

“label”: “Custom Poster Image”

},

{

“type”: “range”,

“id”: “overlay_opacity”,

“label”: “Overlay Opacity”,

“min”: 0,

“max”: 99,

“step”: 1,

“unit”: “%”,

“default”: 0

},

{

“type”: “header”,

“content”: “Text”

},

{

“type”: “text”,

“id”: “title”,

“label”: “Heading”,

“default”: “Video Slide”

},

{

“type”: “range”,

“id”: “title_fontSize”,

“label”: “Heading font size”,

“min”: 1,

“max”: 10,

“step”: 0.5,

“unit”: “rem”,

“default”: 3

},

{

“type”: “richtext”,

“id”: “text”,

“label”: “Description”,

“default”: “

Add the video description text here

”

},

{

“type”: “range”,

“id”: “description_fontSize”,

“label”: “Description font size”,

“min”: 1,

“max”: 5,

“step”: 0.5,

“unit”: “rem”,

“default”: 2

},

{

“type”: “color”,

“id”: “color_text”,

“label”: “Text Color”,

“default”: “#ffffff”

},

{

“type”: “color”,

“id”: “color_btn_text”,

“label”: “Button Text Color”,

“default”: “#ffffff”

},

{

“type”: “color”,

“id”: “color_btn_bg”,

“label”: “Button Background Color”,

“default”: “#000000”

},

{

“type”: “url”,

“id”: “button_link”,

“label”: “Button Link”

},

{

“type”: “text”,

“id”: “button_label”,

“label”: “Button Label”,

“default”: “Learn More”

},

{

“type”: “range”,

“id”: “button_fontSize”,

“label”: “Button font size”,

“min”: 1,

“max”: 5,

“step”: 0.2,

“unit”: “rem”,

“default”: 2

},

{

“type”: “color”,

“id”: “bgCol”,

“label”: “Video Background Color”,

“default”: “#000000”

},

{

“type”: “range”,

“id”: “btn_radius”,

“label”: “Button rounded corner”,

“min”: 0,

“max”: 40,

“step”: 2,

“unit”: “px”,

“default”: 2

],

“presets”: [

“name”: “Video Banner”

]

}

{% endschema %}

Moeed · November 17, 2025, 6:33pm

Hey @Mtvail84

No need to share the whole file code, just simply share your store URL and password (if enabled)

Best,
Moeed

Mtvail84 · November 17, 2025, 6:37pm

thank you here is my URL: thethinkingdesk.com

Moeed · November 17, 2025, 6:41pm

Hey @Mtvail84

Follow these Steps:

Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above </ body> tag

<style>
.videoBoxInfo {
    background: #00000078 !important;
    padding: 30px !important;
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

Mtvail84 · November 17, 2025, 6:46pm

Thank you so much!!! Do you also know how I can change the font style to match my theme?

Mtvail84 · November 17, 2025, 10:44pm

How can I change the font style? TIA!

suyash1 · November 18, 2025, 2:36am

@Mtvail84 you can use css font-style, what update do you want for the font-style?

Mtvail84 · November 18, 2025, 3:15am

Montserrat, thank you!

suyash1 · November 18, 2025, 3:29am

@Mtvail84 please add this css to the very end of your base.css file and check
shopify admin->online store->themes->edit theme code->assets->base.css

I think it is by default already applied, but add this css as well

.videoBackground .videoBoxInfoDescription p{font-family: 'Montserrat';}

Topic		Replies	Views
Help with video banner button Store Design design	4	50	October 1, 2025
Modify the code of my video banner on the Dawn theme Store Design design , customizations , css , shopify-themes , html	5	191	September 21, 2024
Getting Image Banner Content On Mp4 Video Store Design design , css , troubleshooting , html	17	71	May 24, 2024
Adding text over a "video-background-banner" Shopify Discussion design , css , troubleshooting	5	48	August 11, 2025
Customize Text Overlay on Video Background Section -- Dawn Theme Store Design design , customizations , css , shopify-themes	0	15	May 5, 2023

Changing font style and adding a background to custom video banner

Topic summary

Related topics