How to format pop-up block on Studio theme?
Hi there - I'm trying to add a pop-up block to my product page on studio theme and there are two issues:
1. It shows up as white text and I can't figure out how to change the text color or size.
2. There's a huge amount of padding around it that I'd like to remove
I can't seem to figure out how to customize the look of the pop-up block and would love help.
Shop URL: https://shop.betterwithbirds.com/
Hi @Jaymi ,
Or you can follow these specific steps to customize the button more easily.
Step 1: Go to Admin -> Online store -> Theme > Edit code:
Step 2: Search for the file base.css. And add this code snippet to the end of the file.
section#MainProduct-template--22756906565938__main {
padding-bottom: 20px !important;
}
modal-opener.product-popup-modal__opener.quick-add-hidden {
margin: 0 !important;
margin-bottom: -30px !important;
}
modal-opener.product-popup-modal__opener.quick-add-hidden button {
color: #000000 !important;
}
Step 3: Save and reload home page.
=>> The result: I make color black for button and reduce padding of it.
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!
Hi @Jaymi,
I hope you are doing well,
You can change that block format by following this instruction
Step 1: Online store > Themes > Three-dot button > Edit code
Step 2: Find and Open theme.liquid file
Step 3: Add these codes right after the <head> tag
<style>
modal-opener.product-popup-modal__opener.quick-add-hidden {
background-color: red;
margin: unset;
padding-left: 13px;
}
</style>
I hope this is useful to you!!! 🤗 If you need change color, just change color value in the code.
Hi @Jaymi ,
Or you can follow these specific steps to customize the button more easily.
Step 1: Go to Admin -> Online store -> Theme > Edit code:
Step 2: Search for the file base.css. And add this code snippet to the end of the file.
section#MainProduct-template--22756906565938__main {
padding-bottom: 20px !important;
}
modal-opener.product-popup-modal__opener.quick-add-hidden {
margin: 0 !important;
margin-bottom: -30px !important;
}
modal-opener.product-popup-modal__opener.quick-add-hidden button {
color: #000000 !important;
}
Step 3: Save and reload home page.
=>> The result: I make color black for button and reduce padding of it.
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!
Dear my friend @Jaymi ,
You can completely change the size of the text by adding a CSS code to base.css with the font-size property.
What you need to do is find the correct class wrapping the text you want to resize and add the attribute:
In my example, I change the font-size of product title on your Product pages:
.product__title h1 {
font-size: 50px !important;
}And the result will be:
😍 It's such my honor to help you, bro.
If they are helpful, please give us likes and mark as the solution.
Yes my friend @Jaymi ,
What exactly section you want to change text size, I haved check your site, I didn't see pop-up block size chart on your product page.
Can you kindly share the details of it (screenshot/ record) with us?
We will check it and suggest you a solution if possible.
Hello @Jaymi
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.product button.product-popup-modal__button.link {
color: #000 !important;
background: #57c9a3 !important;
padding-left: 1.3rem;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Community Blog Articles
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025
Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025