How can I reposition the buy now button on mobile view?

Store Design
, , , ,

Topic summary

A user seeks to reposition the “buy now” button higher on mobile view to match their desktop layout, as there’s currently a large gap pushing it down. They’re using the Refresh theme.

Solution provided:

  • Add custom CSS code to the theme.liquid file (above the </body> tag)
  • The code targets mobile view to adjust button positioning

Current status:

  • The initial fix successfully moved the button up
  • However, two new issues emerged:
    • Significant white space remains between an image with text below it and another element
    • The buy now button now appears somewhat oversized

The discussion remains open as the user needs additional help fine-tuning the spacing and button size on mobile.

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

Hello, I want to move my buy now button up higher on my mobile view to match my desktop view. The desktop view is perfect and just how i want it, but on mobile it is very far down on the screen with a big gap. I am using the refresh theme.

Link to store - https://permacurl.shop/

here are some screenshots of desktop (what i want mobile to look like) and the current mobile view.

Screen Shot 2023-06-12 at 11.52.51 PM.png
Screen Shot 2023-06-12 at 11.52.51 PM.png2852Ă—1318 266 KB

Screen Shot 2023-06-12 at 11.50.09 PM.png
Screen Shot 2023-06-12 at 11.50.09 PM.png2400Ă—1304 182 KB

2

Hey @austin89s

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.

Moeed_0-1686630766122.png
Moeed_0-1686630766122.png300Ă—537 85.2 KB

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

Best Regards,
Moeed

1 Like
3

hey this worked, thank you. The only thing now is there still is a big space of white between the slide and the image with text below it, plus the buy now button is a bit large. How do I fix these two parts?