How to Create Custom “Add to Cart” Links

How to Create Custom “Add to Cart” Links

We have a Blog! For our inaugural blog post let’s share some quick shortcut links you can send to your customers to greatly speed up their buying process. Be sure to read the rest of this though, because doing this certainly comes with a cost.

One of the most fundamental parts of e-commerce is to try and strike as perfect of a balance as possible between streamlining the customer experience and encouraging more sales. We want to make it as easy as possible for our customers to click the final “Pay” button, while also encouraging up-sells, cross-sells, and some impulse buys.

Of course, the Hab Bazaar is almost certainly not perfect at this, and we tend to err on the side of the customer experience as much as possible. That’s why we don’t use cookie-based advertising or those SUPER annoying pop-ups asking for your email address while you’re right in the middle of reading something.

With all that said, be sure to think this all through before doing it… while these shortcut links will vastly streamline this ONE customer’s checkout process, they will almost certainly reduce the amount of impulse buys for yourself and the other vendors if used excessively. Remember, we all benefit from other vendors’ customers browsing the rest of the site. So all this to say, be sure to think about it first, especially when deciding to use the Direct to Checkout links.

How to Create Custom "Add to Cart" Links 1

The Shortcuts


1. Simple Product direct add to cart link: This link immediately adds the product and quantity you specify to your customer’s cart, and then redirects to the cart. No other pages are loaded. All they need to do verify everything and proceed to checkout.

You will first need to find your product’s ID number. You can find this easily in your vendor dashboard’s “All Products” section, or click here. Just highlight over the product and the ID number will show up like in this screenshot:

How to Create Custom "Add to Cart" Links 2

Take that Product ID and put it into this URL in place of the pound signs (####), and also change the quantity to a number of your choosing:

https://h3bazaar.com/addcart/?add-to-cart=####&quantity=2

So if that was a real product, you would replace “####” with “9950”. Test this out with this actual example of a live product on the Bazaar:

https://h3bazaar.com/addcart/?add-to-cart=15580&quantity=2

Note: Don’t forget the “https” !

2. Simple Product direct checkout link: With this link, you can choose to redirect immediately to the checkout instead of the shopping cart by simply replacing the word “addcart” with “checkout.” Like this:

https://h3bazaar.com/checkout/?add-to-cart=15580&quantity=2

This one skips the ability for your customer to adjust quantities and brings them within a few clicks to submitting the order. Again, they are almost certainly going to order this product alone, so be sure to use this sensibly.

3. Variable Product direct add to cart link: To do the same things but with your Variable Products, it’s a little more complicated but you can do it!

To do this, we first need to find the Product ID, exact variant ID, attribute NAME “slug”, and attribute TERM “slug.” If this is something you want to do, you should probably create a spreadsheet with each of your products as a tab, and copy all this information there for a quick reference.

a) To find your Variant ID, first click “edit” on the variable product as listed on your “All Products” page in your dashboard by clicking on the pencil icon. Next, scroll down to your “Variations” tab and find the variant you are looking for. In this example, we want to send a link for an Double Extra Small and Black T-Shirt, which is #16372:

How to Create Custom "Add to Cart" Links 3

b) Next we need the NAME “slug” for our attributes. Click to the “Attributes” tab and find the NAME. In this case, we have two attributes named Size and Color. In this example, you can see both a pre-loaded attribute that the Admin has added, and a custom one that you have added yourself. This is pretty easy, we just want to take note of “Size” and “Color”:

How to Create Custom "Add to Cart" Links 4

In our final link URL, we will be using this snippet:

attribute_pa_NAME

Since we have two variations in this link, we will have both attribute_pa_size and attribute_pa_color. Make note of these.

c) Now we need the Attribute TERM “slugs” to add on the ends of the snippet. Again, this is fairly easy. On the right side of the same screen you will see the Values section. Make note of exactly how each is written.

How to Create Custom "Add to Cart" Links 5

In this case, it is simply xx-small and black. In our final link URL, we will be using this snippet:

attribute_pa_NAME=TERM

Now, we can build our URL. The full template for the URL that will add this specific variant to your customer’s cart and then bring them to their cart is:

https://h3bazaar.com/addcart/?add-to-cart=PRODUCTID&variation_id=##&quantity=#&attribute_pa_NAME1=TERM1&attribute_pa_NAME2=TERM2

Substitute in our PRODUCT ID, Variation ID ##, Quantity #, and attribute NAME and TERM, gives us:

https://h3bazaar.com/addcart/?add-to-cart=9950&variation_id=16372&quantity=2&attribute_pa_size=xx-small&attribute_pa_color=black

Try this active link as a real live product example:

https://h3bazaar.com/addcart/?add-to-cart=1517&variation_id=1519&quantity=2&attribute_pa_color=black&attribute_pa_size=large

If your Variable product has only one option, just leave off the last “&attribute_pa” section, like this live listing:

https://h3bazaar.com/addcart/?add-to-cart=1506&variation_id=1509&quantity=2&attribute_pa_color=green

4. Variable Product direct checkout link: Finally another easy option. Just like with the simple product, if you want to even further speed this up you can add your variable product directly into your customer’s shopping cart and redirect to the checkout page automatically. Just replace “addcart” with “checkout”, like this:

Two Variations:


https://h3bazaar.com/checkout/?add-to-cart=1517&variation_id=1519&quantity=2&attribute_pa_color=black&attribute_pa_size=large

One Variation:
https://h3bazaar.com/checkout/?add-to-cart=1506&variation_id=1509&quantity=2&attribute_pa_color=green

And that’ll do it! I hope this was useful for you… I thought it was pretty cool. If you have any issues with this, definitely don’t hesitate to contact me on FB Messenger or drop a line here. On On!

4

No Responses

Write a response