Need help improving my Product Card! - I want to add Qty Selector & Add to Cart Button

Store Design
, ,

Topic summary

Goal: add a quantity selector and Add to Cart directly on product cards (collection grid) for a store using the Debut 5.1.0 theme.

Key context:

  • Debut is a “vintage” theme; advanced customizations like quick buy (adding to cart from the product card) typically require built‑in support or significant work.
  • References shared: Dawn theme’s quick buy implementation (GitHub) and Shopify’s product form docs.
  • Helpers requested the store URL and password to review, but none were provided.

Guidance given:

  • For new projects, start with Dawn (OS 2.0). For an existing store on Debut, switching is a migration project with its own time/risks.
  • Recommendation: do not migrate if the current store works and OS 2.0 features aren’t needed. It’s a trade‑off between keeping tech debt on Debut vs. migrating to a modern theme.
  • Links provided for theme upgrading and migration documentation.

Outcome/status:

  • The requester will pause design improvements until migration is approved.
  • Budget is limited; prefers a short gig, but no implementation started.
  • Unresolved: whether to migrate; no technical solution applied yet; review pending store access details.
Summarized with AI on December 17. AI used: gpt-5.
1

Hello,

I am an SEO and just started learning Shopify,
Please help me implement this to my Product Card:

Design link:
https://www.canva.com/design/DAGTkDILGEM/1eOgSr9OnB5B_DXtNDjFOQ/edit?utm_content=DAGTkDILGEM&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

I can do custom HTML, CSS, and JavaScript.
I just need direction where to start.
My theme is Debut version 5.1.0

Thank you very much!

1 Like
2

Hey @GMISAH13

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hello @GMISAH13
Please share your store URL and password so I can check and update you.

4

If doing starting a new project freshly learning shopify theme development you should b starting with the Dawn theme ,not a defunct vintage theme such as Debut.

Hi @GMISAH13 :waving_hand: this is an advanced theme customization, even if you showed your coding effort so far a theme would already need to have quickbuy functionality for product-cards/product-grids.

See the dawn theme reference for quickbuy implementation https://github.com/Shopify/dawn

or dev docs for product form https://shopify.dev/docs/storefronts/themes/architecture/templates/product#the-product-form

If you need this design turned into a theme customization then contact me for services
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

*edit - clarified use dawn as starting point in new projects

5

Hello, this is an existing theme/site and I just started handling it. Are you saying that I switch to Dawn (Free version)?
If so, would be current apps be affected by this new theme?

I would love to get dev services to implement our design asap but as of now my client has no budget for that.
A gig or short project would be the best we can do but no more.

6

such customizations are short projects unless there’s unrevealed requirements.

I clarified last post Dawn et al. would be for NEW projects, for existing stores that would be undertaking a migration project which is a very different thing with it’s own issues and time investments.

If there is nothing wrong with the current store and modern features found in OS2.0 themes are not needed do not migrate.

It’s a trade off: continue to accrue tech debt in the old theme, or migrate tech debt to a new theme with more features.

https://help.shopify.com/en/manual/online-store/themes/managing-themes/upgrading-themes

https://shopify.dev/themes/migration

1 Like
7

Understood, thank you for explaining this to me.
I will have to pause all Design improvements until Migration is approved.