How do I move my shop now button to the middle right on my banner image?

Store Design
, ,
1

I’m not sure how to move this shop button to the right on my image banner. It’s current stuck on the bottom. I’m using the dawn theme. Can someone help?

Untitled design.png
Untitled design.png1366×1366 239 KB

below is how it looks now…

IMG_3206.png
IMG_3206.png1170×2532 274 KB

2

Hi @Reanamichele
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Hi @Reanamichele

You can do that by changing the settings of your Image banner section like in this image below

Screenshot 2025-03-06 at 13.45.18.png
Screenshot 2025-03-06 at 13.45.18.png3882×1852 446 KB

4

Hello @Reanamichele

1 Go to Online Store → Themes → Click Customize.
2 Click on the Image Banner section.
3 Scroll down and open the Custom CSS box.
4 Add the following CSS:

.banner__buttons {
    position: absolute;
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
}

If it doesn’t move correctly, try this instead:

.banner__content {
    position: relative;
}

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

Thank you :blush:

5

HI @Reanamichele

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
@media screen and (max-width: 768px){
.banner__content {
    position: absolute;
    background: transparent !important;
    top: 40% !important;
}
div.banner {
    position: relative;
}
.banner__content .banner__box.content-container {
    background: transparent !important;
    display: flex !important;
    justify-content: flex-end !important;
}
.banner__content .banner__box.content-container .banner__buttons > a.button {
    background: transparent !important;
    color: black !important;
    border: 2px solid black !important;
}
}
{% endstyle %}

DaisyVo_0-1741249085147.png
DaisyVo_0-1741249085147.png354×635 87.9 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

6

Hi @Reanamichele

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.banner__content {
    position: absolute;
    background: transparent !important;
    top: 40% !important;
}
div.banner {
    position: relative;
}
.banner__content .banner__box.content-container {
    background: transparent !important;
    display: flex !important;
    justify-content: flex-end !important;
}
.banner__content .banner__box.content-container .banner__buttons > a.button {
    background: transparent !important;
    color: black !important;
    border: 2px solid black !important;
}
}

Best,

Liz

7

Thank you! The worked. Note: I also had to include below in the CSS to get the correct button positioning.

.banner__buttons {
position: absolute;
right: 20px;
top: -170%;
transform: translateY(-70%);
}