How to format pop-up block on Studio theme?

[Jaymi]

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/

[BSSCommerce-B2B]

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 tag

I hope this is useful to you!!! If you need change color, just change color value in the code.

[BSSCommerce-B2B]

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!

[niraj_patel]

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 on theme.liquid

.product button.product-popup-modal__button.link { color: #000 !important; background: #57c9a3 !important; padding-left: 1.3rem; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Jaymi]

Thank you so much! Trying this out…

[Jaymi]

This is exactly what I needed and the coding worked perfectly. Thank you so much!

[BSSCommerce-B2B]

Hi @Jaymi ,

To be simple is to be great. We’re happy to see that our suggestion helped you solve the issue, bro.

Can you kindly give us some likes? This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Thanks in advance.

Have a nice day!! ^^

[Jaymi]

Is there also a way to change the size of the text?

[BSSCommerce-B2B]

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.

[Jaymi]

So helpful!! Do you happen to know which CSS wrapper is around the pop-up block to adjust that text size?

[BSSCommerce-B2B]

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.