How to make add to cart button wider

Topic summary

Goal: Make the product page’s Add to cart button wider so it aligns with other widgets on desktop. The store wasn’t live, so a Shopify preview URL was requested and provided.

Proposed solutions:

  • Add custom CSS in assets/theme.min.css to force full width on large screens: @media (min-width: 1024px) { .lg:w-3/4 { width: 100% !important; } }. This targets a utility class (.lg:w-3/4) that limits width at large breakpoints.
  • Alternative approach: insert custom code in theme.liquid above (exact snippet not shown in the thread) following step-by-step instructions. Both approaches were accompanied by screenshots showing the expected full-width result.

Outcome: After applying the guidance, the author confirmed “It’s working!!!”. Screenshots were central to demonstrating the fix; code edits were the key action item.

Status: Resolved. No remaining questions were noted.

Summarized with AI on December 25. AI used: gpt-5.

https://srpk8ycoyimau18d-52766113982.shopifypreview.com