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

Solved

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

randf
Tourist
20 0 2

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

Accepted Solution (1)

BSSCommerce-HDL
Shopify Partner
2298 847 1061

This is an accepted solution.

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 </head> tag: 

<style>
@media screen and (min-width: 768px) {
  .caption.position-left:has(.caption-content) {
    top: 80%;
    left: 45%;
    position: absolute;
  }
}
</style>

Here is result: 

BSSCommerceHDL_0-1722919153566.png

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 9 (9)

BSSCommerce-HDL
Shopify Partner
2298 847 1061

This is an accepted solution.

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 </head> tag: 

<style>
@media screen and (min-width: 768px) {
  .caption.position-left:has(.caption-content) {
    top: 80%;
    left: 45%;
    position: absolute;
  }
}
</style>

Here is result: 

BSSCommerceHDL_0-1722919153566.png

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

randf
Tourist
20 0 2

This worked, thank you so much!!

randf
Tourist
20 0 2

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

BSSCommerce-HDL
Shopify Partner
2298 847 1061

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

randf
Tourist
20 0 2

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 itScreenshot_2024-08-07-14-10-22-47_40deb401b9ffe8e1df2f1cc5ba480b12.jpg's fine

BSSCommerce-HDL
Shopify Partner
2298 847 1061

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

<style>
@media screen and (max-width: 767px) {
  .caption.position-left:has(.caption-content) {
    top: 78%;
    left: 34%;
    position: absolute;
  }
}
</style>

 Here is result: 

BSSCommerceHDL_0-1723004100600.png

Hope this can help you

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

randf
Tourist
20 0 2

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

randf
Tourist
20 0 2

Screenshot_2024-08-07-14-28-41-00_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

randf
Tourist
20 0 2

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 😞