Clickable Shop button over homepage video

Store Design
, , , ,
1

I’m using the DAWN theme and I’m trying to get a button on top of my video on the main page. My video is full width and the code is different than any of the other examples I’ve run across. Everything I seem to try messes up the video location / width. My store is here https://6f9350-5d.myshopify.com/ there is no password. Thanks in advance.

2

Hi @Ol2Stroker ,

Please see the solution below:

Step 1: Add Button HTML

Go to your Shopify admin.

Navigate to Online Store > Themes.

Find the DAWN theme and click Actions > Edit code.

In the Sections folder, find the section file that contains your video (it might be video-section.liquid or similar).

Locate the video tag and add your button HTML directly after it.

  Shop Now

Step 2: Apply CSS for Positioning

In the Assets folder, find your theme’s CSS file (it might be base.css or similar).

Add the following CSS to position the button over the video:

.video-container {

position: relative;

}

.video-button {

position: absolute; top: 50%;

left: 50%;

transform: translate(-50%, -50%);

padding: 10px 20px;

background-color:red;

color: yellow;

text-decoration: none;

border-radius: 5px;

}

Result:

Sweans_0-1722571915595.png
Sweans_0-1722571915595.png1902×885 547 KB

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

1 Like
3

Hi @Ol2Stroker ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. sections/video.liquid

  2. Refer screenshot to add code below

{
      "type": "url",
      "id": "url",
      "label": "Url"
    },

EBOOST_0-1722572258551.png
EBOOST_0-1722572258551.png1191×820 42.2 KB


       {%  if section.settings.url != blank %}
          Shop
        {%  endif %}

EBOOST_1-1722572395045.png
EBOOST_1-1722572395045.png1737×848 65.7 KB

EBOOST_2-1722572454389.png
EBOOST_2-1722572454389.png1138×642 38.7 KB

  1. Go to theme → customize → Add url

EBOOST_3-1722572580791.png
EBOOST_3-1722572580791.png1889×725 78.7 KB

4

this is perfect except the button moves all around vertically depending on the width of the video. Mobile it’s not even shown. Where you show it in your image is exactly where I would want it. Any way to make it stay there?

5

Hi @Ol2Stroker ,

I have checked the site and saw the button you have added there. It is showing on mobile also. Can you please advise what change you would need now?

If our solution helped you, please mark it as an accepted solution.

Regards,
Sweans

1 Like
6

I think you must’ve checked it while I was in the middle of playing with it. I can only make the button show up on mobile if I set it to

position: absolute; top: 25%; and then it’s in a goofy location on desktop. Currently it is set to 50% and doesn’t show up on mobile.

1 Like
7

Hi @Ol2Stroker

We have attached screenshots corresponding to desktop and mobile.

Sweans_0-1722580799051.png
Sweans_0-1722580799051.png392×395 149 KB

Sweans_1-1722580867437.png
Sweans_1-1722580867437.png1837×843 461 KB

In mobile button is not showing, to fix it please use the below code:

@media screen and (max-width: 767px){
.video-button {
	top: 33%;
}
}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

2 Likes
8

I can make that work. Thank You!