Centre "add to cart" button (Tried various methods)

Technical Q&A

Topic summary

Goal: center the “Add to cart” (Shopify Buy Button) and keep it off the divider line, especially on mobile.

Proposed fixes:

  • Add CSS in Shopify theme to adjust the Buy Button iframe on mobile screens (≤749px), e.g. .shopify-buy-frame--product { max-width: inherit !important; } or max-width: 100% !important; in base.css or frontend.min.css.
  • Insert code in theme.liquid before the closing tag (instructions came with screenshots).

Context/terms:

  • .shopify-buy-frame–product: CSS class for the embedded Shopify Buy Button iframe.
  • Media query (max-width: 749px): targets mobile layout to allow full-width/centering.
  • Visual Composer/raw HTML: indicates the Buy Button may be embedded on a non-Shopify site, so Shopify theme edits may not apply.

Outcome:

  • The user couldn’t find frontend.min.css; base.css and theme.liquid changes didn’t affect the page. A helper checked the source and didn’t see the injected code, so the changes likely weren’t loading for that page.
  • No working solution was achieved; the user removed changes and decided to give up, considering switching platforms.

Status: Unresolved. Key open issue is where to correctly apply CSS that affects the embedded Buy Button in the site’s actual rendering context. Images/screenshots were provided to show file locations and source checks.

Summarized with AI on January 31. AI used: gpt-5.
6

Hi [email removed]DJ_Alkemy,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid,

Step 3: Paste the below code at before element of the file → Save

PageFlyVictor_0-1674122877048.png
PageFlyVictor_0-1674122877048.png682×1268 59.1 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly