How can I get the shop now button to appear bottom centre for mobile? Taste theme

Store Design

Topic summary

A user seeks help positioning the “Shop Now” button at the bottom center on mobile devices for their Shopify store using the Taste theme.

Multiple solutions provided:

  • Custom CSS approach (most common): Add CSS code targeting mobile screens (max-width: 749px or 768px) to adjust button positioning using margin-top or margin-bottom properties. Code should be added via:

    • Theme Customizer > Theme Settings > Custom CSS, or
    • Edit Code > base.css file

  • Theme.liquid modification: Insert custom markup/styling code above the </body> tag in the theme.liquid file

Technical details:

  • Solutions target specific CSS classes like .slideshow__text, .banner__buttons, and .button--primary
  • Adjustments typically involve margin-top (8rem, 20rem) or margin-bottom (-30px) values
  • All responders included code snippets and screenshots demonstrating the implementation

Status: Multiple working solutions offered; awaiting user confirmation on which approach resolved the issue.

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

Hi,

www.lemondropfarm.com

How can i get the mobile shop now button to appear bottom centre?

Screenshot 2024-11-05 at 3.15.39 PM.png
Screenshot 2024-11-05 at 3.15.39 PM.png896×1208 246 KB

2

Hey @lisanchem

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1730792812760.png
Moeed_0-1730792812760.png371×663 95.9 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @lisanchem
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
a.button.button--primary {
top: 8rem;
}
}

result

64.png
64.png429×593 99.9 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Hi @lisanchem

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

#Slide-template--22121568567480__slideshow_y4eJmU-2 .slideshow__text.banner__box {
margin-top: 20rem;
}

Screenshot 2024-11-05 at 14.56.41.png
Screenshot 2024-11-05 at 14.56.41.png886×1012 659 KB

5

Hi @lisanchem

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
.slideshow__text-wrapper .slideshow__text > .banner__buttons {
    margin-bottom: -30px !important;
}
}

image (5).png
image (5).png1312×729 170 KB

Please let me know if it works. Thank you so much!

Best,

Daisy - Avada Support Team.