How can I display option variants on product cards for my homepage and collection page?

Store Design
,
1

Hi,

I have a question regarding the shopify template I am using.
I would like to display option variants on product cards on my feautured collection on the homepage and collection page, but am not getting the results I would like to have.
I have taken a look on this page: https://shopify.dev/docs/themes/product-merchandising/variants
I have added the required javascript and callbacks. When I add a variant select to my products, they are all being replaced by multiple selects for each option variant. However, the currently selected item is not selected in these drop-downs and when I change the selected value of one of the dropdowns, no code is executed.

How would I have to continue with this?

I am using the Xtra theme, this is my shop URL: https://e0ff65-3.myshopify.com/. Password: rilaob

1 Like
2

Hi,

Can you let us know what results you are expecting on collection page ?

3

@zaczee I would like to be able to select a variant on the collection page and feautured collection on the homepage and be able to add to cart this specific variant directly without having to navigate to the product page

4

Hi,

As we checked the variations selection option is working fine. The only issue we saw is the price was not changing.

5

@zaczee We have products with multiple variants: quality and quantity.

We want to make our customers able to add products to the cart from the collections page (or homepage with a featured collection). Therefore, we need to show BOTH variants on the product card.

As of this moment, this is done with a single selector on each product card that lists all of the available variant combos. What we want is two separate variant selectors (quality and quantity) on the product cards. When a user changes one of the select values, this should be reflected with the right variant combination when the product is added to the cart.

I had the multiple variant selectors (explained here: https://shopify.dev/docs/themes/product-merchandising/variants) working for a bit, the javascript code replaced the single selector with multiple selectors for the available variants. But changing one of the values did not do anything. Also, when trying to add the product to the cart, I got an error saying it was missing some value.