Smart Wishlist Setup on Stores using Providence theme

This article lists steps to configure Smart Wishlist App on Shopify Stores using Providence 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: snippets/product-variants.liquid

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

Collection Page

Location: snippets/product-price.liquid

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

Wishlist Page Links

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

Location: snippets/header-actions.liquid

<div class=”cell”><p class=”no-margin”><a href=”/a/wishlist” id=”smartwishlist_desktop_link”>Wishlist</a></p></div>

MOBILE LINK

Location: snippets/menu-structure.liquid

<li class=”hide-for-medium-up”>
<a href=”/a/wishlist” id=”smartwishlist_mobile_link” title=”My Wishlist”>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.

#smartwishlist .tooltip,.smartwishlist.tooltip {
display: initial;
background: inherit;
width: inherit;
left: initial;
padding-top: 1%;
padding-bottom: inherit;
}
a#smartwishlist_desktop_link {
margin-right: 10px;
}

#smartwishlist_desktop_link .topbadge {
padding: 1% 5% !important
}
#smartwishlist_mobile_link .topbadge {
padding: 1% 3% !important;
}

Wishlist Page

.wishlistpage a,.modal a {
color: #fff !important;
}
.modal {
max-width: inherit;
}

 

 

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.