Debut Theme: ATC Button positioning & styling (on Homepage & Collection pages)

Store Design

Topic summary

Goal: On Homepage and Collection pages (Debut theme), adjust Add to Cart (ATC) presentation to match Product pages.

Requested changes:

  • Remove the quantity (Qty) selector; show only the ATC button.
  • Match Product page styling (rounded corners) for the ATC button.
  • Position the button directly under the price with a small gap.

Attempts/issues:

  • CSS added at the bottom of theme.css successfully changes ATC styling on Product pages only; no effect on Homepage/Collection pages.
  • Tried guidance to edit Sections/product-template.liquid and include a product form snippet ({% include ‘product-form’, product: product %}), but that code can’t be found in the theme. Searches for “product-form” didn’t reveal where to modify or insert it.

Context:

  • Site not live; preview link provided. Images/snips are referenced and appear central for layout and styling context.

Status: No resolution yet. Key need is identifying the correct files/selectors/snippets that control Homepage and Collection page ATC/Qty elements to remove the Qty selector, apply rounded styling, and tighten spacing under price.

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

Hi all, really hoping someone out there can help with this.

  1. Specifically on Homepage and Collection pages (not Product pages) I would like to remove the Qty Selector. Just want the ATC button on its own please.

  2. How do I change the styling of the button to match how I have it already on Product pages? (with rounded edges).

  3. Position button nicely under pricing (with not too big a gap between them).

Please see attached snips for reference…

rhinoquinn_0-1707810502399.png
rhinoquinn_0-1707810502399.png865×282 38.7 KB

rhinoquinn_1-1707810502316.png
rhinoquinn_1-1707810502316.png402×213 23.9 KB

Site is not live yet. https://junglestory.myshopify.com/

Many thanks in advance! :slightly_smiling_face:

2

Wow, thank you so much. Very exciting to have a possible solution. :slightly_smiling_face:

I went to Sections/product-template.liquid file and looked through all the code but cannot locate the code: {% include ‘product-form’, product: product %}

Nor could I find anything very similar. Using keyword search I looked at every instance of ‘product-form’ but could not identify the correct code to replace/add to.

Any other ideas? :slightly_smiling_face:

3

Also @BookerE1 The editable code at the bottom of the theme.css works to adjust the ATC button BUT unfortunately only on the Product pages. Nothing changes to the styling of the button on homepage and collection page - which is what I need - as the Product pages look fine already.

Any clues on that mystery much appreciated! :slightly_smiling_face: