This article lists steps to configure Smart Wishlist App on Shopify Stores using Debut theme. While we have taken utmost care in documenting the steps, these might vary slightly across stores. If you face any issues, please do not hesitate to contact us.
Product Page
Location: sections/product-template.liquid or templates/product.liquid
Code:
<div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>
Collection Page
Location: snippets/product-card-grid.liquid and snippets/product-card-list.liquid
Code:
<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>
Wishlist Page Link
The best way to place the link in the Navigation Menu using Shopify Admin. In case you want to place it somewhere else, it has to be hardcoded in the theme. You can follow the below insttructions to hardcode the link to Wishlist Page
Desktop Link
The target is to place it just before the expanded Search input field in the header.
Location: snippets/search-form.liquid or sections/header.liquid
Code:
<a href="/a/wishlist" id="smartwishlist_desktop_link" title="My Wishlist" class="site-header__wishlist">
<span class="fa fa-heart-o"></span></a>
Place the above code in the <div> tag associated with the search field. Adjust its location if necessary.
Mobile Link
You can place it either at the top (left of cart) or in the Menu. To place it at the top, use the following instructions.
Location: sections/header.liquid
Code:
<a href="/a/wishlist" id="smartwishlist_mobile_link" title="My Wishlist" class="site-header__cart"><span class="fa fa-heart-o"></span></a>
To place it in the mobile menu (only), add the following code to just before </ul> with id “MobileNav”.
<li class="mobile-nav__item"><a href="/a/wishlist" id="smartwishlist_mobile_link" title="My Wishlist" class="mobile-nav__link">Wishlist</a></li>
Extra CSS
Additionally, you should add the following CSS code to your theme’s CSS file e.g. assets/theme.scss.liquid. It can also be added to Extra CSS tool in App’s Merchant Console.
a#smartwishlist_desktop_link {
font-size: 20px;
vertical-align: middle;
margin-right: 10px;
}
span.topbadge {
padding: 1% 5% !important;
}
a#smartwishlist_mobile_link {
font-size: 20px;
}
@media (min-width: 750px)
{
#smartwishlist_mobile_link {
display: none;
}
}
form.search-header.search.search--focus {
opacity: 1;
background-color: #fff;
z-index:99;
}