Move Add to Cart button above fold in mobile for Brooklyn theme

Highlighted
New Member
2 0 0

I am using the Brooklyn theme and I would like for the Add to Cart button to appear above the fold in mobile. I would assume the best way to do this is to change the width of the main product image to be smaller and move the Add to Cart button above the variant button options. 

 

I'm a coding novice, but I know enough to get by with editing stuff if I have instruction. Thanks!

0 Likes
Highlighted
Shopify Expert
3903 559 938

Hi @falkali 

Follow this:

1. Section->product-template.liquid->find name="add" that's your add to cart button 

Cut whole code with {% if %} condition and place in within <form> tag any where you want.

Let me know if you need any help.

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Shopify Partner
482 86 134

@falkaliYou want even on mobile the product image and ATC to be side by side ?

I am not sure they will fit.

The best approach for these kind of cases is duplicate

Product title

Price

Add to cart Button

Above the main image, but only for mobile ))

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
New Member
2 0 0

Thanks, that helps move the Add to Cart but I'd like to make the div for the product image to be smaller so the elements below the product title can fit above the fold as well. 

 

The div for the product image is grid__item large--seven-twelfths medium--five-twelfths text-center. How can I modify the size of this div?

0 Likes
Highlighted
Shopify Expert
3903 559 938

Hi @falkali 

You can change large--seven-twelfths this class to manage width in desktop like make it large--six-twelfths or you can manage by this link

You can find this in Section ->product-template.liquid file

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
1 0 0

Hi,

I'm getting the same problem, I want to move my add to cart button before the fold on my Brooklyn theme. What specific parts of the code should I copy and where exactly should I put them? 

0 Likes
Highlighted
Shopify Expert
3903 559 938

I have mentioned above where you can get and set you button

1. Section->product-template.liquid->find name="add" that's your add to cart button 

Cut whole code with {% if %} condition and place in within <form> tag any where you want.

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes