Install on an older theme
On an older theme, the app adds its code to your theme from its Installation page. Then you paste a short snippet where the wishlist button and the Save for later button should appear.
Before you start: duplicate your theme (Online Store › Themes › … › Duplicate), so you keep a copy without the app's code. The app recommends this. On an Online Store 2.0 theme, follow Install on an Online Store 2.0 theme instead.
Add the app's code to your theme
The app needs its own Liquid code in your theme. It makes sure the wishlist button on your product pages, and your customers' selections, show correctly on the cart and checkout pages.
-
In the app, open Installation.
-
Under Code insertion, choose your theme in Select theme.
-
Click Add.
If you need to create the snippets again later, repeat these steps. The new snippets overwrite the old ones.
Show the wishlist button
Paste this code wherever the wishlist button should appear, such as the product page, collection pages and the cart page.
-
In your Shopify admin, go to Online Store › Themes, click … next to your current theme, then Edit code.
-
Open the file for the page or product card where the button should appear.
-
Paste this code where the button should go, for example next to the Add to cart button, then click Save:
<div class="wishlist-engine" data-product_id="{{ product.id }}" data-variant_id="{{ product.selected_or_first_available_variant.id }}" data-full_button="true"></div>
On a collection page, each product then shows a wishlist button on its image.
Show the Save for later button on the cart page
Save for later lets shoppers add an item from their cart to their wishlist.
-
In the code editor, open the file that lists the items in your cart.
-
Paste this code inside the part that shows each cart item, for example under the item's options, then click Save:
<div class="wishlist-engine-cart" data-product_id="{{ item.product.id }}" data-variant_id="{{ item.product.selected_or_first_available_variant.id }}" data-line="{{ item.index | plus: 1 }}">Save For Later</div>
Using a different theme? The first snippet calls the product product, and the second calls each cart item item. Some themes use other names in their product card or cart files. Use the names your file uses.
Check that it works: open a collection page in your store. Each product shows a wishlist button. Then add a product to your cart: the cart page shows Save For Later under it.
Next step
Give shoppers a way to open their wishlist: Add a Wishlist link to your menu.
If the button doesn't show
- The code went into a different theme. Check that you chose your current theme in Select theme and pasted the snippets into the same theme.
- The app is turned off. In the app, go to Settings › General settings and check that App status says the app is enabled.
Prefer not to edit code? Email support@scriptengine.net and our team will help you set it up.