fbpx
HIDE

How to add Shopify buy button for multiple products without app

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on pinterest
Shopify buy button instruction

Need Shopify buy button for multiple products? I’ll walk you through quick and easy way to add that button to your site. 

This is a real-life case study I figured out during my whole time working at a Shopify development company.

Client's requirement

One of our clients is using WordPress, and integrates the shopping cart with Shopify Buy Button

The story is that, they are selling some products together with 1 main product and 1 additional product. They wonder if we can implement a function that allows the customers to add multiple Shopify Products into cart with Shopify Buy Button?

In this case, their logic should be like this:

They have:

+ 1 main product (1)

+ 1 free product (2)

And their request is: create a Buy button on their WordPress site, and whenever the customer clicks to add the main product (1), the second product (2) will be immediately added to cart. I put the display for this button example at the end of this post, so:

==> Scroll down to the end to see the magic!

How to do that?

So how to add this magical button?

I tried to search for solutions, contact some experts, but it took me a lot of time without luck. Some solutions are too old and doesn’t work. I was in the middle of nowhere.

Fortunately, one day, I go with the solution as below:

+ Implement both 2 buttons on the WordPress website

+ Hide the Add to cart button of the second product

After adding the first product successfully, now your second product is automatically added to cart!

Here below is the detail code: 

<script src="https://sdks.shopifycdn.com/buy-button/0.2.0/buybutton.js"></script>
<!-- HTML code -->
<div id="product"></div>
<div id="product2"></div>
<style>
    #product2 {display: none;}
</style>
<script>
    var client = ShopifyBuy.buildClient({
  apiKey: '21dea66d3fd7a0ca7bee597f20d9882a',
  domain: 'annahere.myshopify.com',
  appId: 6
});


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
  id: 1378134360182, // the id of the first product
  node: document.getElementById('product'),
  options: {
    product: {
      events: {
          addVariantToCart: function(product) {
            document.getElementById("hidden_prd").click();
            // this call auto add the second product to cart together with the first product
        }
      },
      contents: {
        variantTitle: true,
        quantity: true,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },
      styles: {
        quantity: {
          'margin-top': '0!important',
        },
        quantityInput: {
          'border-radius': 0
        },
        button: {
          'background-color': 'black',
          'border-radius': 0,
        }
      },
      text: {
        button: 'Add to bag'
      },
      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

ui.createComponent('product', {
  id: 1378134556790, // the id of the second product
  node: document.getElementById('product2'),
  options: {
    product: {
      contents: {
        variantTitle: true,
        quantity: true,
      },
      templates: {
        button: '<button id="hidden_prd" class="{{data.classes.product.button}} {{data.buttonClass}}">' +
          '{{data.buttonText}}</button>',
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },
      iframe: false,
      styles: {
        quantity: {
          'margin-top': '0!important',
        },
        quantityInput: {
          'border-radius': 0
        },
        button: {
          'background-color': 'black',
          'border-radius': 0,
        }
      },
      text: {
        button: 'Add to bag'
      },
      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

</script> 

Shopify Buy button example

I put the display as below for you:

That’s it! Thanks God, it saved my day!

That’s it! You can apply this tip to your store on whatever platform: WordPress, Wix, Squarespace… They’re all best eCommerce platforms for today.

I do hope my sharing on adding Shopify buy button today will help you optimize your store better. Still need help? Don’t hesitate to contact me.

Share this:

Hannah Pham

Hannah Pham

Hannah is Content Lead at HappyPoints. She finds writing, designing, and developing all sorts of great content is her true passion. Hannah is the Marketer by day and the reader by night. Meet her on Linkedin.

Amazing!

I will get back to you within a day.

Have a nice time!