Pop up Box -Change background

Shopify Discussion
1

Hi there,

I would like to change the background of my pop up box - seen as “click here to check out the secret ingredient” so that it is a cream colour button and lines up with the add to card button, and the text is centred. Please see screenshot.

URL: https://www.samiyaskincare.com.au/products/ground-bundle

Screenshot 2025-03-10 at 14.03.42.png
Screenshot 2025-03-10 at 14.03.42.png766×1896 104 KB

2 
form.needsclick.klaviyo-form.klaviyo-form-version-cid_1.go1558996584.kl-private-reset-css-Xuajs1 {
    background-color: #D2A592 !important;
}

MustafA16_0-1741581332020.png
MustafA16_0-1741581332020.png777×485 254 KB

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

3

hello @ellacoker

Go to online store ----> themes ----> actions ----> edit code ---->assets ----base.css…> line number 3739…>search the code

button#ProductPopup-popup_rTx3zK {
    font-weight: bold !important;
    color: black !important;
}

replace with new code

button#ProductPopup-popup_rTx3zK {
    font-weight: bold !important;
    color: black !important;
    border: 1px solid;
    background-color: #D2A592;
	    text-decoration: none;
}

If this was helpful, hit the like button and accept the solution.
Thanks

4

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 {
    color: #ca8264 !important;
}

Result

DaisyVo_0-1741582706889.png
DaisyVo_0-1741582706889.png377×324 10.1 KB

Best,

Daisy

5

Hello @ellacoker
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

button#ProductPopup-popup_rTx3zK {
font-weight: bold !important;
color: #e19677 !important;
}
.product-popup-modal__opener {
display: flex;
justify-content: center;
}

result

10.png
10.png365×546 18.8 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6

This is Richard from PageFly - Shopify Page Builder App
Hi @ellacoker Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.
Best regards,
Richard | PageFly