Smart Wishlist Setup Instructions for Shopify Stores using Sunrise theme

This article lists steps to configure Smart Wishlist App on Shopify Stores using Sunrise 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: templates/product.liquid or sections/product-template.liquid

<div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>

Sample code snippet for product page in sections/product_template.liquid
Sample code snippet for product page in sections/product_template.liquid

Collection Page

Location: snippets/product-price.liquid

<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>

Sample code snippet for collection page in snippets/product-price.liquid
Sample code snippet for collection page in snippets/product-price.liquid

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 instructions 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: sections/header.liquid

<a href="/a/wishlist" id="smartwishlist_desktop_link" title="My Wishlist">Wishlist</a>

Sample code to hardcode a link for Desktop screens on Sunrise theme
Sample code to hardcode a link for Desktop screens on Sunrise theme

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

<a href="/a/wishlist" id="smartwishlist_mobile_link" title="My Wishlist" class="menu-user"><i class="fa fa-heart"></i></a>

Sample code to hardcode a link for Mobile screens on Sunrise theme
Sample code to hardcode a link for Mobile screens on Sunrise theme

 

Extra CSS

Additionally, you should add the following CSS code to your theme’s CSS file e.g. assets/styles.scss.liquid. It can also be added to Extra CSS tool in App’s Merchant Console.

 

a#smartwishlist_mobile_link .topbadge {
display: none !important;
}
span.topbadge {
padding: 1px 5px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.