Solved

Move Shop Now Button on mobile version

Esra47
Excursionist
51 0 6

Bildschirmfoto 2024-05-21 um 09.26.53.png

 

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. 

Accepted Solution (1)
Moeed
Shopify Partner
3875 978 1222

This is an 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:

Moeed_0-1716291591996.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 11 (11)

techlyser_web
Shopify Partner
1609 299 322

Hello @Esra47 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Esra47
Excursionist
51 0 6

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
Shopify Partner
7891 1532 1560

Hi @Esra47 

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

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Esra47
Excursionist
51 0 6

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
Shopify Partner
3875 978 1222

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Esra47
Excursionist
51 0 6

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
Excursionist
51 0 6

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

https://tekaifaswg23rye9-71988969740.shopifypreview.com 

Moeed
Shopify Partner
3875 978 1222

This is an 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:

Moeed_0-1716291591996.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Esra47
Excursionist
51 0 6

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?

techlyser_web
Shopify Partner
1609 299 322

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>

techlyser_web_0-1716351322390.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Esra47
Excursionist
51 0 6

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