How do I move a Shop Now button on Turbo Out of the Sandbox theme

Shopify Discussion

Topic summary

A user is attempting to reposition the “Shop Now” button on their homepage slideshow in the Turbo Out of the Sandbox Shopify theme. They want the button centered below the slideshow images but above descriptive text.

Initial Solution:

  • A support representative provided CSS code to insert in the theme.liquid file above the </head> tag
  • This successfully centered the button on desktop devices

Ongoing Issue:

  • The button remains off-center on mobile devices, appearing to the side rather than centered
  • The user also reports alignment problems at different desktop screen sizes, noting the button doesn’t center properly relative to the slideshow images (specifically mentioned: chicken picture)
  • Screenshots were shared demonstrating the mobile alignment issue

Current Status:

  • Additional CSS code was provided to address mobile centering, but the user reports it still doesn’t work correctly on mobile devices
  • The problem remains unresolved, with the user expressing frustration and considering removing the button entirely if it cannot be properly centered across all device sizes
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

I want to move the Shop Now button on my homepage slideshow to be underneath the images but centered and above the text “Explore our Exciting collections today”

Theme is Turbo out of the sandbox theme (sorry it won’t me attach an image)

www.reggieandfriends.com.au is my website

2

Hi @randf ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1722919153566.png
BSSCommerceHDL_0-1722919153566.png1920×527 168 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

This worked, thank you so much!!

4

I just realised for mobile devices the shop now button is not centred. How can I make it centered for mobile too but in the same place

1 Like
5

Hi @randf , Can you kindly share the details of your problem (screenshot) with us? We will check it and suggest you a solution if possible.

6

See attached. The shop now is off to the side and should be centered there so needs moving to the left on mobile devices. Desktop devices it

Screenshot_2024-08-07-14-10-22-47_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
Screenshot_2024-08-07-14-10-22-47_40deb401b9ffe8e1df2f1cc5ba480b12.jpg1080×2400 293 KB

's fine

7

Same as previous, you can try at Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1723004100600.png
BSSCommerceHDL_0-1723004100600.png747×499 229 KB

Hope this can help you

8

I tried that and it seemed to move it to the middle centre. It’s still shows off centre for mobile devices it’s only working for desktop

9

Screenshot_2024-08-07-14-28-41-00_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
Screenshot_2024-08-07-14-28-41-00_40deb401b9ffe8e1df2f1cc5ba480b12.jpg1080×2400 288 KB

10

Also, looking on a desktop at a different size screen, the shop now just isn’t in the center of the slideshow, its off, it should site central to the chicken picture as that is a centered picture. Mobile device I cannot get it to look central. I will have to remove it soon if I cannot get it sorted as it looks daft :disappointed_face: