How can I create a buy now button for a specific product variant with Shopify BuyButton.js

Question

I am using Shopify BuyButton.js to create a buy button and shopping cart on my site.

I have a product with multiple variants.

I can easily create a buy button for a product with the following:

ui.createComponent('product', {
    id: [productid],
    node: document.getElementById('container'),
    options: {
        product: {
            layout: 'horizontal',
            contents: {
                img: false,
                title: false,
                options: true
            }
        },
        cart: {
            startOpen: false,
        }
    }
});

This product has several variants that can be chosen with a drop down and the first variant is the selected one.

What I want to do is create a buy button but only for a specific variant of the product. No drop down and clicking 'Add to Cart' will add that product with the specific variant selected.

I can hide the drop down by setting options: false but the variant selected is the first one and I can't set the specific variant.

Answer 1

Under your line id: [productid], put in:

variantId: [variantid],

Where variantid is ID of the variant. This can be found in the URL when you click to edit the variant in the Shopify dashboard.