Need help expanding the "order notes" by default on the cart page

Store Design
, ,

Topic summary

Issue: On a Shopify cart page using a theme that “rhymes with Barehouse,” the “order instructions” (order notes) are collapsed by default; the requester wanted them expanded by default. Attempts to change this via main-cart.liquid were unsuccessful.

Fix provided: Add CSS in theme.css targeting the notes container to force it open:

  • Selector: div#order -note
  • Properties: overflow: visible !important; height: 12rem !important;

Outcome: The requester confirmed the CSS change immediately resolved the issue, expanding the order notes by default. No Liquid template edits were required.

Notes:

  • The CSS snippet is central to the solution.
  • This approach adjusts the visible height and overflow to display the notes area expanded.

Status: Resolved. No further questions or actions pending.

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

Hello! I am currently using the (rhymes with Barehouse) theme and am dealing with one small issue.

On our cart page: https://backcountryfoodie.myshopify.com/cart, underneath the cart total, we have order instructions.

Screen Shot 2024-01-04 at 11.04.47 AM.png
Screen Shot 2024-01-04 at 11.04.47 AM.png834×628 59.3 KB

These are collapsed by default, but I’d like to have them open by default. I’ve been messing around with the main-cart.liquid file but can’t seem to figure it out. Does anyone have a quick fix for this?

Thanks!

1 Like
2

@bcfoodieguy , go to theme.css and add the following code :

div#order-note {
    overflow: visible !important;
    height: 12rem !important;
}
3

That did it, thank you!

1 Like