Solved

Added a Shopify hosted video on home page.

nitinj
Shopify Partner
30 1 2

I have added a video on Home page in Shopify Dawn theme.I want to have a button "Buy Now " on video. I have added button but it is not visible on video.

 

This is the code:

 

I have added a video section on home page.I have added a Buy Now button.  Button is not visible on video. I am not able to get what is the error is there. Can anyone help.

 

{%- unless section.settings.heading == blank -%}
<div class=video_banner>
<div class="title-wrapper title-wrapper--no-top-margin{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</
<div class="video-content">
<button class="btn">Click me</button>
</div>
</div>

</div>
{%- endunless -%}
</div>
<noscript>

 

Added CSS

 

.video-banner {
position: relative;
width: 100%;
height: 500px; /* Adjust the height to your desired value */
}
.video-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: red;
}

Accepted Solution (1)
nitinj
Shopify Partner
30 1 2

This is an accepted solution.

Hi Deepak,

 

Thank you for the reply.I have added above code but still button is not visible on video. 

 

<div class=video_banner>
<div class="title-wrapper title-wrapper--no-top-margin{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
<div class="video-content">
<button class="btn button">Click me</button>
</div>
</div>

 

CSS .video_banner {
position: relative;
width: 100%;
height: 500px; /* Adjust the height to your desired value */
}
.video-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: red;
}

View solution in original post

Replies 6 (6)

deepaksharma
Shopify Partner
443 61 90

Hi there @nitinj 

 

You were missing a closed h2 tag, 

No style tag
I have added a class on the button to make sure it inherit store settings

{%- unless section.settings.heading == blank -%}
<div class=video_banner>
<div class="title-wrapper title-wrapper--no-top-margin{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
<div class="video-content">
<button class="btn button">Click me</button>
</div>
</div>

</div>
{%- endunless -%}
</div>
<style>
.video-banner {
position: relative;
width: 100%;
height: 500px; /* Adjust the height to your desired value */
}
.video-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: red;
}
</style>

 

Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!

 

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
nitinj
Shopify Partner
30 1 2

This is an accepted solution.

Hi Deepak,

 

Thank you for the reply.I have added above code but still button is not visible on video. 

 

<div class=video_banner>
<div class="title-wrapper title-wrapper--no-top-margin{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
<div class="video-content">
<button class="btn button">Click me</button>
</div>
</div>

 

CSS .video_banner {
position: relative;
width: 100%;
height: 500px; /* Adjust the height to your desired value */
}
.video-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: red;
}

deepaksharma
Shopify Partner
443 61 90

can you add the code to your website and share me the preview link

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
nitinj
Shopify Partner
30 1 2

I want button only in last video on home page.

https://jetpodvaccum.myshopify.com/

Store password neonah

deepaksharma
Shopify Partner
443 61 90

Sorry but the code you provided here and the code on your website for the video is different

deepaksharma_0-1709814842192.png

 

I am not seeing the class video-content have you used this code in your website?

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
nitinj
Shopify Partner
30 1 2

But there is video section in sections and other are two css Files. I have made changes here.

Screenshot 2024-03-07 at 18.33.13.png