I want to show the option to select a variant and add to cart button on the product grid item so tha

[Mmbandooni]

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

[DaisyVo]

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.

[Mmbandooni]

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 

[DaisyVo]

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.

[Mmbandooni]

i want to do this as you can see how the product cart is shown i want exactly like this

 https://headsupfortails.com/collections/dog-products

[Ahmad31]

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.

<div class="variant-options">
  {% for variant in product.variants %}
    <button class="variant-button" data-variant-id="{{ variant.id }}">
      {{ variant.title }}
    </button>
  {% endfor %}
</div>

• 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.