How can I add a solid color backdrop to my text on a purchase page?

Store Design
,

Topic summary

A user needs to add a white background box behind text on their product purchase page to improve readability. The issue specifically affects the “Reir Kniv” product, where text and the buy button lack sufficient contrast.

Solutions provided:

  • Option 1: Add custom CSS code to the theme.liquid file, placed above the closing tag
  • Option 2: Modify the base.css file by adding background: #fff !important; to the .product__info-container class

The user confirmed one solution worked successfully.

Follow-up question:

The user now wants to expand the color box size so text doesn’t sit too close to the edges. This remains unanswered and the discussion is ongoing.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

I need a backdrop for some of my text on my purchase page, just a simple white box would do fine in making the text pop a bit more.

Heres my site: notedot.no

Code: lit

Problem is under the product “Reir Kniv”

As I said, I want a solid color behind the text and buy button.

Help.PNG
Help.PNG1226×1018 234 KB

Thanks in advance! :slightly_smiling_face:

2

Hey @torgar

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

Moeed_0-1691671357450.png
Moeed_0-1691671357450.png1056×709 288 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hello @torgar

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.product__info-container {
    background: #fff !important;
}
4

Thank you! Quick and easy!

5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like
6

If I want the color box to be a bit larger (so the text doesn’t sit so close to the edge), how would I procced to do that?