Sometimes you want to send a customer to add to cart directly from a url or qr code. Shopify allows you to do this but technically it's hard to create without being technical. This is why we created a simple tool to make it easier.
This tutorial code requires a little bit of copy and paste in your Shopify backend to make it work but should take about 5 minutes no more.
It is based on the url https://{store-name}.myshopify.com/cart/add?id={variant-id}
Want to Replace Cart, Redirect to Checkout? - use this instead https://onescales.com/blogs/main/shopify-pre-loaded-cart
Steps
1. Login to Shopify Backend
2. Customize your theme and add a new "page template" called "Add to Cart" based on "Default Page".
3. In this "Add to Cart" page template add a new section called "Custom Liquid" and copy the code from https://github.com/onescales/shopify-add-to-cart/blob/main/add-to-cart.liquid and save.
4. Create New Page (for example - Add to Cart) and Select "theme template" "Add to Cart"
5. Visit "Add to Cart" page and use the form to get a url of your cart
- Checkbox the product you want to add to cart and specify the quantity. Note you will be able to only select 1product for this tool to work.
- Click on "Build URL".
- Grab either the QR code or the url via copy and provide to your customers. Note you can right click and "save as image" the qr code to use later.
6. Start Using It. Enjoy!
Additional Notes
- Currently limited to 1000 products. If you have more than 1000 products in your catalog, you will need to customize code on your end.
- If customer had an existing cart already, it will add to cart.
- Note that the above instructions are to create a new page and add liquid code. These instructions will create a public live page which most of you probably don't want to showcase to the world so you will have to add a password, make the page in draft mode or use the liquid in this repo to do it in your own protected way. You can also make visibility "hidden" and use it as a logged in admin by clicking on view page button.
- QR Code generated is using google charts api.
- All code and instructions are as is. By reading this repository, readme or any code, you acknowledge that you are solely responsible for your own doings.
