06/16/2022

Creating Shopify Add to Cart Links

Insights

5 min remaining

Shopify store owners want to link users to their cart page with the items already loaded into it. 

Side note – Shopify users may find this difficult. You need to be familiar with HTML, HTML, and JavaScript.

To create Shopify Add-to-Cart links, you need a cart permalink. Before we dive into this, let’s first see how to create an Add-to Cart link on Shopify.

Here’s how your add-to-cart URL should look like:

https://www.yoursite.com/cart/add?id=VARIANTID&quantity=1

1. You can replace “www.yoursite.com” with your website.

2. Replace VARIANTID with your product variant ID.

3. Please replace “1” with the amount you want to add to your cart.

4. Multiple products and quantities can be added to your cart

https://yoursite.com/cart/add?id=VARIANTID1&quantity=1&id=VARIANTID2&quantity=1

5. It is possible to change variables “VARIANTID1”, HTML2_ and the amounts of each.

This method has been proven to work. 

This section will show you how to use the Permalinks to create Shopify Add-to-Cart links. Shopify store owners have tried this second method and found it to be effective.

Cart Permalinks are pre-built links that direct customers to a shopping cart and checkout. These permalinks work best for apps that allow shoppers the ability to shop from one merchant in a single cart.

You would like to link to Shopify’s checkout screen with an item-laden cart. 

Cart permalinks are the solution to your question on “How to add a Shopify cart link” “

Add cart to cart and check out parameters

All checkout fields can be prefilled. Simply add the query parameters to your cart URL. Use the following format when appending checkout parameters:

The [email] section represents any possible checkout fields on the form. The [shipping_address][city], on the other hand, shows how you can use nesting to populate child fields.

Checkout Parameters

Pre-fill these query parameters.

How To Reduce Variants

A URL can be used to apply a discount.

Discounts are available as follows:

The test section contains the string value to indicate a discount code.

Add one item to your cart to receive a discount

https://SHOPURL/cart/VARIANTID1:1?discount=DISCOUNTCODE

Add 2 products to your cart and receive a discount

https://SHOPURL/cart/VARIANTID1:1,VARIANTID2:1?discount=DISCOUNTCODE

The quantity chosen is the number after the “:”.

Side note: If you have enabled customer accounts on your website, but the user has not yet logged in, the login page will be displayed. 

Where can I find the product variant ID?

1. Go to your Shopify admin, and click on Products > All Products

2 To view a different product, click here

3. Next choose one:

  • Only one store location is allowed. Please click Edit next to each product variant.
  • Select the product variant to see if there are multiple stores.

4. Search in your browser’s address bar for the URL. The URL should look like this:

The number of variants/ that follows. is the variant ID.

Adding a related product to the checkout page can increase sales. Customers who have product A in their shopping basket can see a popup.

Customers interested in this offer can add product B to their shopping cart directly by clicking on the button at the popup.

Popupsmart can help you create popups. It can be integrated with Shopify without the need to install any plugins.

This tutorial shows you how to make a popup with an add-to-cart button.

1. Register for your Popupsmart account.

2. Add Popupsmart to your Shopify store. It takes 5 minutes max

3. log in to Popupsmart. Click on Create a New Popup.

4. Select a template to create a popup, and customize it to your liking

For more information about customization, targeting, and integrations, please see our product documentation.

5. Select From the customization menu, click on the text on the left side menu but not on your popup. 

6. Select Action to “Target URL. “

7. In the Target Url box, paste the Shopify add-to-cart link that you created. E.g., https://www.yoursite.com/cart/add?id=VARIANTID&quantity=1

8. After you’re done customizing, click Target.

9. HTML targeting can be used to target shopping carts with a particular item/s at checkout. Click on Visitor behavior to select HTML targeting.

HTML targeting documentation.

10. Targeting pages is an option to make sure your website’s pages are targeted.

11. To enable the mobile popup on your Visitor Device, click on the mobile icon. Optional

12. Save your work and save it to post later.

About the author

Kobe Digital is a unified team of performance marketing, design, and video production experts. Our mastery of these disciplines is what makes us effective. Our ability to integrate them seamlessly is what makes us unique.