I want to show the option to select a variant and add to cart button on the product grid item so that product can be added to cart without going to the product page, I can’t get the variant picker functionality to work. Can someone help me with the code
I want to show the option to select a variant and add to cart button on the product grid item so tha
Topic summary
Main goal: enable selecting a product variant and adding to cart directly from the collection/grid card, without visiting the product page. The built‑in variant picker isn’t working for the requester.
Recent guidance:
- For Shopify’s Dawn theme, switch the variant picker setting from “none” to “standard” (screenshot shared).
- Note: In Dawn, products with multiple variants won’t show an “Add to cart” button on the grid; they show “Choose variant” instead.
Refined request: display size options above the Add to Cart button like the provided example (screenshot and link shared).
Proposed implementation (custom code):
- Edit the product card/collection item snippet to loop through product.variants and render variant options (e.g., size buttons).
- Add CSS to style variant option buttons and layout.
- Add JavaScript to set the selected variant ID and update the Add to Cart action accordingly.
- Backup the theme before changes.
Status: No confirmation that the solution works yet. The thread remains open, with a practical custom-code path suggested and a theme-setting adjustment highlighted. Images and an external example link are central to understanding the target design.
Hi @Mmbandooni
I hope you are well. If you are using the Dawn theme, then please change this setting from “none” to “standard” then it will work as requested.
Here is the screenshot for your reference:
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
i also want to showcase size variant on top of ADD TO CART BUTTON SO people can directly add the variant to the cart how can i do this
Are you using the Dawn theme now? If that product have multiple variant, then it will not display the “add to cart” button. It will show the “choose varient” setting instead.
i want to do this as you can see how the product cart is shown i want exactly like this
To achieve a similar display of variant sizes above the “Add to Cart” button in your Shopify store, you can customize your theme. Here’s how you can implement it:
- Go to Online Store > Themes.
- Click Actions > Edit Code for the theme you are using.
- Locate the file that controls the product grid or collection page. It is usually named product-card.liquid, product-grid-item.liquid, or found in the snippets folder.
- Add a block to display product variants (like sizes) dynamically.
{% for variant in product.variants %}
{% endfor %}
- Go to your theme’s CSS or SCSS file (usually in the assets folder and named theme.css or style.css).
- Add styles to ensure the variant buttons look good:
.variant-options {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 10px;
}
.variant-button {
padding: 5px 10px;
border: 1px solid #ccc;
background: #f9f9f9;
cursor: pointer;
}
.variant-button:hover {
background: #eaeaea;
}
- To update the “Add to Cart” button based on the selected variant, include JavaScript in the theme’s main script file (e.g., theme.js):
document.querySelectorAll('.variant-button').forEach(button => {
button.addEventListener('click', function () {
const variantId = this.getAttribute('data-variant-id');
const addToCartBtn = this.closest('.product-card').querySelector('.add-to-cart');
addToCartBtn.setAttribute('data-variant-id', variantId);
});
});
- Save your changes and preview the theme.
- Check how the sizes display and ensure the “Add to Cart” button works as expected.
NOTE:
Before making any changes to your Shopify theme, always create a backup copy of your theme. This ensures that you have the original version of your theme in case any changes cause issues.