How can I add a "SHOP NOW" button and header text to my liquid video? (Dawn Theme)

Store Design
,

Topic summary

A user wants to add header text and a “SHOP NOW” button overlaid on a liquid video section in their Dawn theme homepage, similar to a video background example they provided.

Initial Solution:

  • Another user provided custom code with HTML/CSS to create the overlay elements
  • The original poster successfully implemented working code but encountered two issues

Current Problems:

  1. Mobile overlap: The video header title overlaps the “shop now” button on smaller screens
  2. Desktop sizing: Unable to reduce video section height while maintaining full width

Proposed Solutions:

  • Remove the position: absolute attribute from the video-heading class to fix overlap
  • Adjust height directly in the video tag class for sizing
  • Warning: Changing proportions may create black bars around the video if aspect ratio doesn’t match

Additional Question:
Another user asked about customizing the button styling (making it blue with a border instead of just a link)

Status: Ongoing - awaiting implementation of suggested fixes

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

I would like to add two pieces the the middle area of my liquid video on my homepage:

- Header Text

- SHOP NOW button

The example photo I’ve added below is of a Video Background with the same look I’m going for in the liquid video.

So far, this is the code we have in the liquid, for the video itself:

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

Example of what we want:

![Screenshot 2023-06-07 at 10.44.36 AM.png|1986x1078](upload://hi3wZUzCgj8osrC0ZGqTlx1YUSF.jpeg)
1 Like
2

Hi @CATAY

You need a section to be written. I would suggest to hire someone to do this for you

3

Hi @CATAY ,

update your code with the below one.


	
	

		# Video heading
		##### Video subheading
		Link

Hope it will help…

4

Thanks! I will try this now :blush:

5

I’ve managed to create code that works. I’m pretty new to this so it’s been tricky.

There are only minor issues now.

  1. The video header title will overlap the “shop now” button on mobile, when the screen size is smaller.

  2. I cannot seem to adjust the section height, to make the video smaller on desktop view.

I tried adjusting code to make the header text smaller based on a maximum screen size, as well as adjusting the padding bottom to make the video height smaller. It did not seem to do anything though.

Liquid section code found here:


  

    
    ## A curated collection that reflects the warmth of our Brazilian roots.
    [SHOP NOW](https://catay.us/collections/impar-atelier)
6

Hey @CATAY , saw you were able to get some help. Were you able to figure out the issue?

7

It’s because if you have position absolute in video-heading class

8

Thanks for letting me know this is one of the issues.

  1. What should I change video heading class position to instead of absolute?

  2. Any ideas to make the video size smaller (shorter in height but still full width if possible) on desktop?

9

Hi @Zqdo ! Thanks for asking.

Still having some issues figuring out how to implement a solution for:

  1. shop now button / video header title overlap on small screens (especially mobile)

  2. making the video frame size smaller (shorter in height but still full width if possible) on desktop

Any insight is appreciated!

10

For 1 point just remove the position attribute u don’t need that attribute.

For point 2

You have video tag class put your desired height in it.

However your video has to in proportion of that height or width or video block will show black spot arround the video if your video is not in proportion.

Hope it will solve your issue.

11

Is there a way to use this code but have the ‘buy now’ link NOT blue and as a button with a square around it?