Choose options / Quick add not working - Origin Theme

Store Design
, , , ,

Topic summary

A user’s “Choose options/Quick add” button stopped functioning after making coding changes to their Shopify store using the Origin theme.

Root Cause:
The site uses a custom product template (likely “featured product” section) instead of the default template. When the quick add button is clicked, it fetches the product page looking for a section with ID starting with “MainProduct-”, which doesn’t exist in the custom template, causing the feature to fail.

Proposed Solution:
Two approaches were suggested:

  1. Recreate default template as alternate (recommended):

    • Create a new product template named product.original.json using the default structure
    • Modify the card-product.liquid snippet to add data-product-url attribute pointing to this template
    • Update the button code (around line 122) with: data-product-url="{{ card_product.url }}?view=original"
    • Test by accessing product URLs with ?view=original parameter

  2. Modify quick add JavaScript to recognize the “Featured product” section (requires JavaScript knowledge)

Status: The user attempted implementation but encountered difficulties locating where to add the code correctly. Further clarification on exact placement in the card-product snippet was provided.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi Everyone

I’ve noticed the choose options/quick add button isn’t working on my website, I have been making some coding changes today so not sure if it’s something I’ve done, can anyone help please?

Website is: www.littlebearfeet.com

Thanks in advance!

2

Hi Ritu

Sorry! I’ve removed the password now :slightly_smiling_face:

3

I guess you’ve created a custom template for your products and use this one instead of the default one (or significantly modified your default one to use “featured product” section instead)?

What happens now is this – when you click “choose option”, the quick add code fetches product page and extracts a specific section from it – the one with id starting with “MainProduct-”.

Default product page includes this section, your product page does not, so the code fails.

There is a couple of ways to fix this – one is to modify quick add code to recognize the “Featured product” section as well as default “Product Information”

This would require some JS knowledge and I am not sure it will work.

Another approach is to re-create default product page template as alternate template and then modify product card code to use this one for quick add.

Basically, in your card-product.lquid snippet there is this code:

quick add Javascript code uses data-product-url attribute to store product page URL.

So, if you will re-create default product page template as, say, product.original.json and then use the following data-product-url instead – this should pretty much solve your problem.

data-product-url="{{ card_product.url }}?view=original"
4

Hi Tim,

Thank you very much! Can I just confirm where I need to add the ‘data-product-url’ coding? I tried at the bottom of the page and under the snippet code shown above and neither have worked unfortunately.

Or I am I misunderstanding and missing a step?

5

  1. Re-create original default product template with name product.original.json

  2. Ensure it works by trying URL like https://littlebearfeet.com/products/child-girl-slippers-autumn-and-winter-waterproof-non-slip-fluffy-cotton-shoes**?view=original** (if something is missing, shopify will fall-back to your main template, so it must look different)

  3. open card-product.liquid snippet, find the code mentioned above (in my copy of the them it starts at line 221)

  4. modify data-product-url attribute as show above.