Shopify Buy Button

Shopify has a built-in "Buy Button" feature where you can integrate its e-commerce tools with any website, including WordPress. You can use this to display products from an existing Shopify shop. There's no need for any additional setup since the cart, checkout, and payments are handled through Shopify.

Use the search function at the top to visit the "Buy Button" page. There are options to pick between adding specific products or a whole collection.

NOTE: This only serves as an alternative way to purchase existing products and will only provide a gallery, cart, and payment gateway through Shopify. There will be no singular product pages and customers can only add products to their cart and purchase them from there.

Customization

NOTE: The cart toggle on the right side of the screen can't be customized by CSS. You'll have to set the heading, subtotal text, order note field, additional notes filed, cart button text, empty cart message, background color, and body text color before you generate the code on Shopify since these are wrapped in an iFrame.

Removing the iFrame

In order to remove the iFrame wrapping the product container, you'll have to modify the following lines of code in the generated embed code.

For "Add Product to Cart"

"productSet": {
iframe: false,
"styles": {

"modalProduct": {
iframe: false,
"contents": {

For "Open Product Details"

"productSet": {
iframe: false,
"styles": {

Disable iFrame for Product Details Modal

This is not really recommended unless you're okay with re-styling the whole pop-up from scratch, but modify the following lines under each attribute if you want to disable the modal iFrames:

"product": {
iframe: false,
"styles": {

"productSet": {
iframe: false,
"styles": {

"modalProduct": {
iframe: false,
"contents": {

modal: {
iframe: false,
},

Modal Products or External Links to Store

If you want to change whether you want the "View Product" button to open a modal pop-up with the product details or open an external link to the product's page on Shopify, change the buttonDestination attribute.

"buttonDestination": "modal",
or
"buttonDestination": "onlineStore",

Quantity Field

The sample layout doesn't have a quantity field and this can be set before you generate the embed code, but you can also modify the following lines to do the same:

"contents": {
    "button": true,
    "buttonWithQuantity": false
}

Other Customization Options

If you want to replace the cart you can refer to Shopify's help center or their GitHub documentation for more details.

Swapping Between Actions

In cases where you need to quickly swap between actions i.e. add product to cart to open product details, then all you have to do is copy the entire options: {...} section of the layout you want and paste them into your code. It's better if you do this with a text editor that allows collapsing and expanding sections. You can also add/modify the buttonDestination attribute under productif you want, but copying the entire section allows for consistency, especially if there are a lot of collections displayed on the website.