Goal: Add a “Shop Now” button (and ideally header text) overlay to a homepage video using a Custom Liquid section in the Refresh theme.
Context: The poster initially shared an admin editor URL, then provided the live storefront URL. A helper requested the section be visible, then suggested an HTML wrapper and CSS to position the button over the video.
Proposed approach: Wrap the video in a parent container set to position: relative and center with flex. Place the button inside that container with position: absolute and a bottom offset so it overlays the video. CSS to be added in base.css; button class targeted (e.g., .ctaShopNow).
Final implementation: The poster used a div container (landingContainer) around the video and a link styled as a button (classes: ctaShopNow, btn, button) pointing to /collections/gift-boxes. CSS sets the container as relative flex-centered and the button as absolutely positioned with bottom: 80px and high z-index; the video is set to width: 100% and auto height.
Outcome: The button overlay now works as intended. The thread appears resolved for the button; adding header text was not confirmed. Images were shared to illustrate structure and expected result.
I would like to add one piece the the middle area of my liquid video on my homepage:
- SHOP NOW button
I use the following custom liquid to make the video.
So far, this is the code we have in the liquid, for the video itself:
Custom Liquid:
Example of what we want:
@LiveLongPlant , Hope you are doing well.
Could you please share the URL of the page where you have implemented the above liquid code? SO can check and guide you accordingly.
Sure, here is the link. Thank you so much!
https://admin.shopify.com/store/live-long-and-plant/themes/134076170391/editor?category=gid%3A%2F%2Fshopify%2FOnlineStoreThemeSettingsCategory%2FColors%3Ftheme_id%3D134076170391%26first_setting_id%3Dcolors_solid_button_labels§ion=template–16442818330775__f80c0905-731c-4c43-b026-382f01ce6616&customCss=true
@webwondersco Hello! Here is the link, thank you for the help!
https://admin.shopify.com/store/live-long-and-plant/themes/134076170391/editor?category=gid%3A%2F%2Fshopify%2FOnlineStoreThemeSettingsCategory%2FColors%3Ftheme_id%3D134076170391%26first_setting_id%3Dcolors_solid_button_labels§ion=template–16442818330775__f80c0905-731c-4c43-b026-382f01ce6616&customCss=true
@LiveLongPlant , thanks for sharing the link,
but instead of sharing the admin URL please share the front URL of the Page so can check.
@webwondersco Here is the front URL, thank you!
https://livelongandplant.com/
@LiveLongPlant Thanks for sharing the URL. but I can’t find any custom liquid section on the home page as you have mentioned in your post.
could you please add so can check and add a relative response?
@webwondersco
Could you try it again to see if it works for you now? Appreciate!!!
https://livelongandplant.com/
@LiveLongPlant , Please create your HTML structure as per the attached screenshot in your custom liquid space.
After that add the below CSS at the end of your base.css file.
.parent-div {
position: relative;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:center;
}
.ctaShopNow{
position:absolute;
z-index:99;
bottom:80px;
}
let know, if you have any doubt. once you add the structure and CSS as above it’ll look like the attached screenshot.
@webwondersco Thank you for the help! The HTML part didn’t work for us, so we made adjustments as follows, and it finally works! 
Custom Liquid
<a href=“https://livelongandplant.com/collections/gift-boxes” class=“ctaShopNow btn button”
Shop Now</a
CSS
.landingContainer {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.ctaShopNow {
position: absolute;
z-index: 99;
bottom: 80px;
}
