Change background of Policy Pop Up in Checkout and retain formatting

Store Design
1

Does anyone know how to change the background of the policy pop ups in checkout and retain the polices formatting?

My policy pages, shipping etc looks fine when viewed om the main site (retain their heading formatting and the page background colour).

2024-05-12.png
2024-05-12.png2560×760 43.6 KB

However, when the same policy is loaded as a pop-up in checkout they have a white background and lose all their formatting.

2024-05-12 (1).png
2024-05-12 (1).png2560×697 71.9 KB

https://7a5425-c8.myshopify.com/

stiald

Thanks

2

Hi @yapofire So on product page it’s landing you the shipping page and you should have designed this page according to your theme. but when you are clicking it on the checkout page then a popup opens and usually shopify just uses the default template and wording of the page that you have added in that page.

To edit it on the checkout page you need to upgrade your shopify plan to plus plan as without that you will not be able to edit anything in the checkout page.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

Is there a way to change the default template it uses.

I dont haver the background color set to white in any template that I am aware of

Understand you cant edit the checkout page without Plus, but would have hoped it would take the defaults from the checkout background color (which you can change in theme settings) or the page template it is pulling that text from?

All formatting (h2, bold etc) is also completely missing which looks very strange

4

Hi @yapofire There is a workaround not sure if it work or not, but you can give it a try, If you have added shipping policy from the settings section then go in the HTML section and add a div covering the entire text with css property.


Your text..

Here is the screenshot for your help.

sahilsharma9515_0-1715945018218.png
sahilsharma9515_0-1715945018218.png1108×232 13.9 KB

Click on the yellow highlighted button.

sahilsharma9515_1-1715945189273.png
sahilsharma9515_1-1715945189273.png1030×591 106 KB

sahilsharma9515_2-1715945217499.png
sahilsharma9515_2-1715945217499.png1196×226 26.9 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

5

Hi @sahilsharma9515 ,

So close,

This is what I now get (mostly good, but now have white bars on left and right)

2024-05-17.png
2024-05-17.png1524×528 55.2 KB

Any way to get rid of those?

Thanks

6

Hi @yapofire for this I need your store URL, so I can look if we can get rid of it or not, so can you please share your store URL.

Best Regards

Sahil

7

Sure, here you are:

https://7a5425-c8.myshopify.com/

stiald