skip to Main Content

using a Shopify buy button to release a free product to users of a webapp. Need to make sure the users can only order a maximum of 1 item. Any ideas for how I can do this?

Shopify extensions are a no go, as the buy button does not load them. Also experimented with checkout links, and those will not be able to prevent double orders.

Here is the code for the buy button:

<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'heavysoundlabs.myshopify.com',
      storefrontAccessToken: '28703a091818546612d47f7c83047f6f',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '4713512665151',
        node: document.getElementById('product-component-1598466400618'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "title": {
        "font-family": "PT Sans, sans-serif",
        "font-weight": "normal"
      },
      "button": {
        "font-family": "PT Sans, sans-serif",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        ":hover": {
          "background-color": "#e3ac00"
        },
        "background-color": "#fcbf00",
        ":focus": {
          "background-color": "#e3ac00"
        },
        "padding-left": "14px",
        "padding-right": "14px"
      },
      "quantityInput": {
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px"
      },
      "price": {
        "font-family": "PT Sans, sans-serif"
      },
      "compareAt": {
        "font-family": "PT Sans, sans-serif"
      },
      "unitPrice": {
        "font-family": "PT Sans, sans-serif"
      }
    },
    "buttonDestination": "checkout",
    "contents": {
      "img": false,
      "title": false,
      "price": false
    },
    "text": {
      "button": "Get it now!"
    },
    "googleFonts": [
      "PT Sans"
    ]
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-family": "PT Sans, sans-serif",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        ":hover": {
          "background-color": "#e3ac00"
        },
        "background-color": "#fcbf00",
        ":focus": {
          "background-color": "#e3ac00"
        },
        "padding-left": "14px",
        "padding-right": "14px"
      },
      "quantityInput": {
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px"
      }
    },
    "googleFonts": [
      "PT Sans"
    ],
    "text": {
      "button": "Add to cart"
    }
  },
  "option": {
    "styles": {
      "label": {
        "font-family": "PT Sans, sans-serif"
      },
      "select": {
        "font-family": "PT Sans, sans-serif"
      }
    },
    "googleFonts": [
      "PT Sans"
    ]
  },
  "cart": {
    "styles": {
      "button": {
        "font-family": "PT Sans, sans-serif",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        ":hover": {
          "background-color": "#e3ac00"
        },
        "background-color": "#fcbf00",
        ":focus": {
          "background-color": "#e3ac00"
        }
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    },
    "googleFonts": [
      "PT Sans"
    ]
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "PT Sans, sans-serif",
        "background-color": "#fcbf00",
        ":hover": {
          "background-color": "#e3ac00"
        },
        ":focus": {
          "background-color": "#e3ac00"
        }
      },
      "count": {
        "font-size": "14px"
      }
    },
    "googleFonts": [
      "PT Sans"
    ]
  }
},
      });
    });
  }
})();
/*]]>*/
</script>```

2

Answers


  1. You cannot mess with buy button. It is nothing more than getting a variant ID into a Shopify session so a cart can process that ID. You cannot expect the button to actually contain business logic too. For that, you need to work inside Shopify itself.

    Login or Signup to reply.
  2. You could go for a workaround and create a discount code, which gives you the specific product as free addon. There you can set a limit, for example that the discount code can only be used once per customer.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search