How to reduce padding of product page pop-up link

Shopify Discussion

Topic summary

A user seeks help removing white space around a product page pop-up link and repositioning it upward.

Solutions Provided:

Two community members offered CSS-based fixes:

  • First approach: Add custom CSS code to theme.liquid file (above </body> tag) targeting .product__info-container and .product-form__submit elements with margin-bottom: 0 !important

  • Second approach: Add CSS to base.css/style.css/theme.css targeting .product-form__input.product-form__quantity and .product__info-container div:has(.product-form) with margin adjustments

Current Status:

Both solutions successfully removed the initial spacing. However, a new issue emerged: after moving the pop-up, padding now appears under the variant picker. The user is seeking additional guidance to resolve this secondary spacing problem.

The discussion remains ongoing as the original poster needs further assistance with the variant picker padding.

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

Hi everyone! Can someone please help me? How do I remove the white space around my pop-up link and move the link upwards?

Screenshot 2024-11-11 at 10.46.32.png
Screenshot 2024-11-11 at 10.46.32.png941Ă—411 9.99 KB

I tried the other suggestions from similar questions but none of them helped. Thank you in advance!

2 Likes
2

Hey @kaleizlyfe

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 tag

RESULT:

Moeed_0-1731318923623.png
Moeed_0-1731318923623.png532Ă—717 25.6 KB

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

Best Regards,
Moeed

1 Like
3

Thank you! How do I remove the space that is left above the link?

Screenshot 2024-11-11 at 11.18.40.png
Screenshot 2024-11-11 at 11.18.40.png916Ă—312 14 KB

4

Hey @kaleizlyfe

Keep the previous code and add this new code above in the end of theme.liquid

.product__info-container>*+*:nth-child(7) {
    margin-bottom: 0 !important;
}
.product-form__submit {
    margin-bottom: 0 !important;
}

RESULT:

Moeed_0-1731320960484.png
Moeed_0-1731320960484.png553Ă—816 28.2 KB

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

Best Regards,
Moeed

1 Like
5

Thank you so much! This worked.

1 Like
6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

7

Hi @kaleizlyfe

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product__info-container > div:has(.product-form) {
    margin-top: 0;
}
.product-form__input.product-form__quantity {
    margin-bottom: 0;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
8

Thank you so much! This also ended up working! Do you have any suggestions how to remove the padding under my variant picker? I moved the pop-up but now I have the gap again :disappointed_face: