Product Page
Open, snippets/product-form.liquid
Add the following code after Add to Cart button
<div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>
![Add this code to snippets/product-form.liquid](https://i0.wp.com/www.webmarked.net/wp-content/uploads/2017/07/parallax_snippets_product_form_liquid_product.png?resize=800%2C526&ssl=1)
Collection Page
Open snippets/product-thumbnail.liquid
Add the following code near the price
<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>
![Add this code to snippets/product-thumbnail.liquid](https://i0.wp.com/www.webmarked.net/wp-content/uploads/2017/07/parallax_snippets_product_thumbnail_liquid_collection.png?resize=800%2C420&ssl=1)
Links
layout/theme.liquid
Wishlist links
Desktop Link
Open sections/header.liquid or snippets/header.liquid and add the following code
<li class="header-account">
<a href="/a/wishlist" id="smartwishlist_desktop_link" title="My Wishlist">Wishlist</a>
</li>
![Add this code to sections/header.liquid or snippets/header.liquid](https://i0.wp.com/www.webmarked.net/wp-content/uploads/2017/07/parallax_sections_header_liquid_desktop_link.png?resize=800%2C536&ssl=1)
Mobile Link
UnderĀ <ul class=”mm-listview”>, please add the following
<li>
<a href="/a/wishlist" id="smartwishlist_mobile_link" title="My Wishlist">Wishlist</a>
</li>
![Add this code to sections/header.liquid or snippets/header.liquid](https://i0.wp.com/www.webmarked.net/wp-content/uploads/2017/07/parallax_sections_header_liquid_mobile_link.png?resize=800%2C522&ssl=1)
Extra CSS
For better Wishlist experience, you may add the following CSS code to Extra CSS tool under App’s Settings in Shopify Admin.
.wishlistpage {
padding-top: 10%;
}
h1.titletext {
text-align: initial;
}
div#wishlist_url {
font-size: initial;
}
.row {
margin: initial !important;
}