How can I add a 'shop all' button to my custom video banner?

Store Design

Topic summary

A user is trying to add a “Shop All” button overlay to a custom video banner on their Shopify store. They have working video code in a custom liquid section but need help positioning a button on top of it, similar to a reference image they provided.

Attempted Solutions:

  • Multiple community members provided CSS and HTML code snippets to create the overlay button
  • Suggestions included using absolute positioning, z-index, and transform properties to center the button over the video
  • One helper recommended updating the HTML structure with a wrapper div and heading text

Current Status:

  • Initial code attempts reportedly didn’t work for the user
  • The discussion remains ongoing with helpers requesting the website URL to better diagnose the issue
  • The user has linked their website (sleepingbooty.com.ua) in the original post for reference

The conversation involves troubleshooting CSS positioning and HTML structure to achieve the desired button overlay effect.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hello all,

I was wondering if someone could help me with a custom video banner.

I need a shop all button overlayed on the top like so, text also:

button 1.JPG
button 1.JPG1020×649 59.9 KB

My custom video code is working fine in the custom liquid section of the theme editor section and is as such:

video { display: block; margin: 0 auto; width: 100%; height: 50%; }

but within this code of course their is no button

my website home page for reference

www.sleepingbooty.com.au

2
3

Unfortunately this didn’t work

4

Please update the code and check again
5

Still nothing

6

Could you share your URL with video section so I can check?

7

it’s linked on the initial post

8

@sleepingbooty First of all update your HTML structure like this:


## 
Shop of your choice

Shop All
9

Please update code

style>
video {
display: block;
margin: 0 auto;
width: 100%;
height: 50%;
}
.wrap-vid .button {
position: absolute;
padding: 8px 16px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 2;
}

Shop All