Overlay a button on a video - on my homepage Whisper theme

Store Design
, , ,
1

Hi all,

Is anyone able to urgently help - overlay my. shop all button on the image above? (bottom centre)

https://bwmhhg9l06g1bijn-86239904092.shopifypreview.com

Thanks,

Mary

Screenshot 2025-02-28 at 13.08.49.png
Screenshot 2025-02-28 at 13.08.49.png2690×1468 628 KB

2

Hello there

I have checked your store link that you have a video. You need to add button code in video file. Now it’s different section video and button.

Regards

Titu

3

You will get the help from this thread https://community.shopify.com/c/shopify-design/clickable-shop-button-over-homepage-video/m-p/2691205

4

Have I pasted the HTML in the right place?

Screenshot 2025-02-28 at 14.47.35.png
Screenshot 2025-02-28 at 14.47.35.png1746×1174 304 KB

5

Hi @marycrichton123 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.rich-text.content-container.color-background-1.gradient.rich-text--full-width.content-container--full-width.section-template--24013935149404__rich_text_Kze4jq-padding {
    background: transparent !important;
}

section#shopify-section-template--24013935149404__rich_text_Kze4jq {
    position: absolute !important;
    height: 100vh !important;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 100%;
}

@media (max-width: 768px){
section#shopify-section-template--24013935149404__rich_text_Kze4jq {
    position: absolute !important;
    height: 100vh !important;
    top: 30% !important;
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 100%;
}
}
6

Hey,

Thank you for trying to help - but sadly this did not work.

Thanks,

Mary