Hello,
Does anyone know CSS to make the “pop up box” closer to add to cart (less spacing). Is there an option to make the text bold too?
Thank you.
Ella.
URL: https://www.samiyaskincare.com.au/products/crown-chakra-face-mask-moringa
Topic summary
A Shopify store owner seeks CSS help to reduce spacing between a popup box and the “Add to Cart” button on their product page, and to make the popup text bold with color options.
Initial Solution:
- CSS code provided to remove margin from the popup modal opener and star rating elements
- Adjusted spacing between “Add to Cart” and “Low Stock” elements using negative margin on the product form
Text Styling:
- Additional CSS provided to make the “click to reveal the secret ingredient” popup link bold
- Color changed to red using font-weight and color properties with !important flags
Technical Approach:
- All modifications made by adding CSS code to the end of the base.css file in Shopify’s theme editor
- Uses !important declarations to override existing styles
Status: Issue resolved successfully with the store owner confirming the spacing fix worked and receiving the requested text styling changes.
Hi @ellacoker
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
modal-opener.product-popup-modal__opener.quick-add-hidden {
margin: 0 !important;
}
div#shopify-block-AejBHMlljZGhOdVNZN__okendo_star_rating_tDWPUC {
margin-bottom: 0 !important;
}
Result
Best,
Liz
Hi liz, Its still a little off. I would like it to be evenly spaced between Add to Cart and Low Stock. How do I do this?
Hi @ellacoker
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
product-form.product-form {
margin-bottom: -5px !important;
}
Result
It worked! Thanks so much Liz. Do you know how to change it to bold, and a different text colour too?
Hi @ellacoker Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!
Okay. Do you know how to make that popup label text bold and a different colour?
Which text do you want to change the color of, and what color do you want?
The pop up link the says “click to reveal the secret ingredient” i would like to make bold, and potentially change to a different colour like red? But will need to see how it looks. thanks again
Hi @ellacoker
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
button#ProductPopup-popup_rTx3zK {
font-weight: bold !important;
color: red !important;
}
Result
