Reduce the sapce between BUY IT NOW and the ORDER ON WHATSAPP - Brookyln theme

Shopify Discussion

Topic summary

A user seeks to reduce the vertical spacing between the “BUY IT NOW” button and “ORDER ON WHATSAPP” button on their product page using the Brooklyn theme.

Proposed Solutions:

Multiple support teams offered CSS-based fixes:

  • SocialAutoPost identified two causes: an unnecessary block occupying space (recommended removal) and a 40px top margin in the WhatsApp widget’s custom CSS (recommended deletion)

  • GemPages suggested adding custom CSS code in the theme.liquid file before the </head> tag (specific code provided via screenshot)

  • PageFly-Victor recommended inserting CSS into the timber.scss file targeting .product-single__description and .shopify-payment-button__button classes to adjust margin and display properties

Implementation Steps:

All solutions require accessing Online Store > Theme > Edit code, then modifying either theme.liquid or timber.scss files with provided CSS snippets.

The discussion remains open with no confirmation of which solution worked.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi all, Hope you are doing well.

Need to reduce the space between BUY IT NOW & ORDER ON WHATSAPP on the product page.

jasdrape_0-1672304953413.png
jasdrape_0-1672304953413.png1085×497 643 KB

2

Kindly share the store URL so I can help you with it

3

Hello @jasdrape ,

It’s GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

4

Hi,

Please find my store URL : https://jasdrape.com/

Password: ebahba

5

Hello @jasdrape ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1672305802122.png
GemPages_0-1672305802122.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1672306177348.png
GemPages_1-1672306177348.png1913×961 86 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

6

There are two barriers that are increasing the distance between the ‘Buy It Now’ button and the WhatsApp button.

  1. Space is occupied by a block. You should remove the block if not needed from the theme.

SaaSEnthu_0-1672306234103.png
SaaSEnthu_0-1672306234103.png1911×898 344 KB

  1. Whatsapp widget has custom CSS, you should remove margin-top: 40px from the custom CSS.

SaaSEnthu_1-1672306301360.png
SaaSEnthu_1-1672306301360.png1884×876 302 KB

Let me know if need further help :slightly_smiling_face:

7

Hi @Jasdrape,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file timber.scss or timber.scss.liquid.

Step 3: Paste the below code at bottom of the file → Save

button.shopify-payment-button__more-options.BUz42FHpSPncCPJ4Pr_f.shopify-payment-button__button–hidden{display:none !important}

.product-single__description.rte{

margin-top:16px !important

}

PageFlyVictor_0-1672308542127.png
PageFlyVictor_0-1672308542127.png1600×672 119 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly