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

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
Shopify Partner
1656 277 344

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Shopify Partner
457 78 89

@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
Messenger: @sarhov
Telegram: @sarhov
0 Likes
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 Partner
1656 277 344

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes