Move Shop Now Button on mobile version

[Esra47]

Hello I have a problem with the Shop Now Button as it is in the middle of the picture and I want it more under the bags and maybe the size a little bit smaller. Can anyone help me ? Thank you. 

[niraj_patel]

Hello @Esra47 
Can you share store URL?

[Esra47]

My Shopify store is currently inactive, and I do not have a public URL yet. However, I do have the .myshopify.com URL provided by Shopify. Could you please let me know if this link will work for the code implementation?

Thank you for your understanding and assistance. I apologize for any inconvenience, as I am still learning about this process.

[Dan-From-Ryviu]

Hi @Esra47 

Please share your store URL so I can give you the code to do that. 

[Esra47]

My Shopify store is currently inactive, so I don't have a public URL yet. Can I use the .myshopify.com link instead for the code implementation?

Thanks for your help.

[Moeed]

Hey @Esra47 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Esra47]

My Shopify store isn't active yet, so I don't have a public URL. Can I use my .myshopify.com link for the code instead?

Thanks for your assistance.

[Esra47]

Okay, I think I've figured it out, is this link correct?

https://tekaifaswg23rye9-71988969740.shopifypreview.com 

[Moeed · Accepted solution]

Hey @Esra47 

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 </body> tag.

<style>
@media screen and (max-width: 767px) {
.banner__content.banner__content--bottom-center.page-width.scroll-trigger.animate--slide-in {
    align-items: self-end !important;
    top: 25px !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[Esra47]

Yes, it helped me a lot, thank you very much. However, I have one more small question: is it also possible to make the "Shop Now" button smaller?

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
  div#Banner-template--18783709266188__image_banner .button {
       padding: 0 1rem !important;
  }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Esra47]

I changed the Shop Now button thank you but now I want the size a little bit smaller how can I do that? 

[Mon57]

Hi there, 
I came across your solution and it worked for me but only on one of the slide images in my banner. 

Is there a way to apply the same to all the slides?

Thanks!