How can I modify the border, position, and color of a checkbox on my cart page?

Store Design

Topic summary

Goal: Add an optional “Loyalty Card” checkbox on the cart page and customize its appearance and placement.

Requested changes:

  • Style the checkbox: custom border, bold label text, and a different checkmark color when selected.
  • Reposition the checkbox to the right side of the label text.

Current status:

  • The checkbox has been added successfully.
  • The merchant is unsure where to place the styling/markup code. Their current implementation is in main-cart.liquid. When they pasted the suggested code, it rendered as plain text on the page, indicating it may have been inserted in the wrong section or without proper tags.

Assets: A screenshot of the current checkbox is attached.

Outcome: No resolution yet. The merchant is seeking precise guidance on where to insert the CSS/HTML (e.g., correct Liquid section, use of style tags or theme CSS) so the code renders and styles apply correctly.

Summarized with AI on January 2. AI used: gpt-5.
1

Hi,

I am trying to add a checkbox to my cart page, Where it asks customers if they’d like an optional Loyalty Card in their order.

I have managed to get the code to add the checkbox, however I was wanting to know if its possible to change the border of the box and also if it is possible to move the checkbox to the right hand side of the text. I dont know if it is possible to also make it when the person selects the box, the tickcan be a different colour?

Also I would like to make the text in bold if possible?

I have attached a screenshot of what I have currently.

cart image.webp
cart image.webp425×343 7.01 KB

2

@Emmanuel_Adekol Thank you for this, Unfortunately I need a bit more help on understanding where exactly to put all this, currently to add the checkbox we have the code in “main-cart.liquid” is this where i would put the above code? as when i did it, it just showed up as the code on the website.