Terms and Conditions Formatting in two or more rows, Sections Store Section

Store Design
, , , ,

Topic summary

A user is struggling to format multiple terms and conditions checkboxes on their Shopify cart page for a medical product store. The text wraps prematurely, not utilizing the full available width.

Initial Problem:

  • Checkbox text has limited width before automatic line breaks
  • Need to display 3 lines of text per checkbox for multiple required agreements
  • Seeking code solution to avoid app subscription costs

Solution Provided:
A CSS fix was shared to add to the base.css file:

  • Sets paragraph width to 100% with 300px minimum
  • Successfully expanded the text area to use full available space

Follow-up Issues:

  1. Checkbox alignment - The checkbox isn’t vertically centered with its text. Additional CSS using flexbox (display: flex; align-items: center) was provided to resolve this.
  2. Rich text formatting - User wants to add rich text formatting in the checkbox area. Support team requested direct contact to address this more complex customization.

Status: Primary formatting issue resolved through CSS modifications. Rich text feature requires further discussion with support team.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I can’t format my terms and conditions checkbox properly. At the moment the width of the text area is small before an automatic line break forces the text onto the next line.

I want it to look like the screenshot. How do I use the full space? Google can’t give me the correct code.

Because I have a medical product, my customers need to check multiple boxes and I need to write 3 lines of text for each checkbox.

I know there are apps available. But I try to avoid subscriptions to apps. This is why I bought this section with a one-off purchase.

If this can’t be fixed with code, is there another app or section that I can purchase with a one time payment?

https://pectusfix.com/cart Password: skeolt

Thanks in Advance.

Paul

Bildschirmfoto 2025-04-08 um 13.58.53.png
Bildschirmfoto 2025-04-08 um 13.58.53.png888×1046 50.7 KB

2

Hello @Pascudd ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.cart__blocks label p {
    width: 100% !important;
    min-width: 300px !important;
}

ZestardTech_0-1744114863130.png
ZestardTech_0-1744114863130.png349×764 17.8 KB

Let me know if you need further assistance!

2 Likes
3

Dear Zestard,

thank you again!
It’s pretty perfect, but I don’t like that the red-highlighted checkbox in the middle is not vertically aligned with the text. Is there a way to fix that?

The second thing is that I would like to add rich text in the highlighted green area. Is this possible?

Thanks again!

Bildschirmfoto 2025-04-08 um 14.49.35.png
Bildschirmfoto 2025-04-08 um 14.49.35.png878×900 43.9 KB

4

Hello @Pascudd ,

Glad that the solution worked for you!

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.cart__blocks label {
    display: flex;
    align-items: center !important;
}

ZestardTech_0-1744118410041.png
ZestardTech_0-1744118410041.png1168×656 30.3 KB

For your second question, please send us a direct message or reach out to us at support@zestard.com—we’re happy to help!

Let me know if you need further assistance!

1 Like