💙 A set of files used to implement a simple customer wishlist on a Shopify store
A set of files used to implement a simple customer wishlist on a Shopify store.
Version: 2.3.0 - Compatible with Online Store 2.0
Previous Versions:
To begin using Shopify Wishlist, you must copy some of the files in this repo into your Shopify theme code.
Note: This setup assumes that you have a snippet for displaying a product card.
Files to copy:
Repo File | Shopify Theme Location |
---|---|
button-wishlist.liquid |
snippets/ |
icon-heart.liquid |
snippets/ |
wishlist-template.liquid |
sections/ |
product-card-template.liquid |
sections/ |
page.wishlist.json |
templates/ |
product.card.json |
templates/ |
Wishlist.js |
assets/ |
button-wishlist.liquid
snippet inside your existing product card snippet, or on the product.liquid
template
{%- render 'button-wishlist', product: product -%}
product-card-template.liquid
section with your existing product card snippet
selectors
object in Wishlist.js
.product-item
, the selectors
variable would look like this:
const selectors = {
button: '[button-wishlist]',
grid: '[grid-wishlist]',
productCard: '.product-item', // your classname here
};
template
to page.wishlist
theme.liquid
before the closing </head>
tag
<script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>
That's it! When viewing your Shopify store, you should see the wishlist buttons inside your product cards (likely on collections pages) or on the product template. A click on the wishlist button will add/remove the item from the customer's wishlist and trigger active styling on the button. After adding wishlist items, you can view your wishlist by navigating to the page created in step 3.
.liquid
wishlist and product card templates.