I originally created policy pages that were not in Shopify's pre-existing Legal Pages section. They look great and are what I use in my footer. In order to get said pages to show up in my cart I've had to copy/paste my info in to the Legal Pages section. It looks exactly like it should in the backend where I am (coding intact), but if I go to the customer facing portion most of my code has been stripped out, and I am left with some text align stuff and nothing else. It looks terrible and it's not as easy to read as my regular pages are.
What do I need to do to get this to work right? TiA.
Solved! Go to the solution
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.
I'm a bit lost; where exactly can I access the defective part of the website that you're experiencing the bug?
You need to access the checkout and click on the "refund policy" located in the footer of the left side of the checkout page, underneath where a customer would fill in all of their information. Should be the first link on the left. It will create a popup window with the information, but none of the custom stuff I've done is showing up, making it harder to read.
Oh, yes, I see it now. Thanks.
Basically, in technical terms, what is happening is that the policy box is being loaded within an iFrame and not loading your website's CSS. (in layman terms CSS is what makes it look pretty, HTML is the text)
It's not possible to customize that box in the checkout. The only case would be if you had a Shopify Plus account, but even so, because it is within an iFrame, I don't think it would work.
Probably what would be possible is adding inline CSS, but I am not entirely sure, I'd need to be added as a staff member to the store and check in-depth.
@diego_ezfy I think you are on to something there with the inline CSS, as I believe the text align is inline. Let me play around with it and see if that is a solution. (I know enough CSS and HTML to get that far, but the ability to figure out what part of the theme.scss is mucking things up this time has been a bit of a trial.)
Thanks for the insight. Will update shortly.
This is an accepted solution.
The text align is inline indeed. Just checked:
Try adding something like style="color:#a1ffd4;" to any element and see if it turns green, just for the sake of testing.
If it does, then you can customize it inline which is a solution for your problem.
Let me know how it goes.
@diego_ezfy You were right, inline CSS was the way to go. I'm going to make a few fussy adjustments (and clean up a lot of the mess made by Shopify's wonky coding additions) and then I will be good to go.
If you have the time, what inspector are you using, or are you using a different program altogether? The dark background is so much easier on the eyes.
Awesome, glad to hear!
I am using dark mode in Google Chrome Devtools. Here is how you can enable it: https://developers.google.com/web/tools/chrome-devtools/customize/dark-theme
Hope it helps.