Text and Button Alignment - Image with Overlay

Store Design
1

Hi.

I was looking for an answer in other posts but could not find it.

I’d like to make my ‘image, text with overlay’ to have the text and button on the right side – not in the way of my image. I attached a photo of my image and how i could like it to look.

Is this possible? If so, what is the code for this?

Thank you in advance!

keeper (1).png
keeper (1).png1640×924 151 KB

2

@lmichelle24 - can you please share the page link of this screenshot?

3

Hello @lmichelle24 ,

From your description, are you trying to add a CTA button on your banner? If yes, you can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → index.liquid file

Add the following code snippet to insert the CTA button within the hero section.


  

  

    Shop Now

Go to Assets folder → base.css file or theme.css file

Add this following code at the bottom of page to style the button

.hero__cta {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
}

Save and preview

Hope this can help.

Transcy

4

Hello @lmichelle24

Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

5

artbylmichelle.com , password: cewngu

I’d like everything circled in red, to be on the right

Untitled.jpg
Untitled.jpg1896×678 67.2 KB

6

artbylmichelle.com , password: cewngu

I’d like everything circled in red, to be on the right

Untitled.jpg
Untitled.jpg1896×678 67.2 KB

7

Thank you for your speedy response! I don’t see “index.liquid” in the sections part. Although I do see it in the ‘Templates’. I added the first code snippet provided and then the second and there was no difference once I saved the information.

I’d like to move everything circled in red on the right

Untitled.jpg
Untitled.jpg1896×678 67.2 KB