Atlantic theme: Steps to Setup Smart Wishlist

This article explains how to setup Smart Wishlist App on Shopify stores using Atlantic theme.

Product Pages

In order to add the Snippet to product pages:

1. Open templates/product.liquid,
2. Locate the following line
   <input type=”submit” class=”action-button submit” value=”{{ ‘products.product.add_to_cart’ | t }}”>
3. Add the following code just after this line
   <div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>

Collection Pages

1. Open snippets/product-quick-shop.liquid
2. Locate the following line
   <input class=”action-button submit” type=”submit” value=”{{ ‘products.product.add_to_cart’ | t }}” />
3. Add the following code immediately after it
   <span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>

Link

In order to add links to My Wishlist page, follow the below steps:

1. Open snippets/header-tools.liquid
2. Locate the following line: <div class=”tools-right”>
3. Add the following code immediately after it
   <div class="mini-cart-wrap">
<a href="/a/wishlist" id="smartwishlist_desktop_link" title="My Wishlist">Wishlist</a>
</div>
4. Open snippets/header-mobile-dropdown.liquid
5. Locate the following line
   <li class=”list-item” id=”coin-container”></li>
6. Add the following code immediately before it
   <li class="list-item last "><a href="/a/wishlist" id="smartwishlist_mobile_link" title="My Wishlist">Wishlist</a></li>

User Account Integration

This is an optional step.

1. Open layout/theme.liquid
2. Add the following code immediately after opening <bod> tag
   <input type="hidden" name="sw_customer_id" id="sw_customer_id" value="{% if customer %}{{ customer.id}}{% else %}0{% endif %}" />
3. Visit Apps => Smart Wishlist => User Accounts in your Shopify Admin and enable it.

Extra CSS

Atlantic theme faces some issues with modals on My Wishlist page.  To fix it, do the following

1. Open Extra CSS tool in your Shopify Admin
   Apps => Smart Wishlist => Configure Appearance => Extra CSS
2. Add the following CSS code to in the second box
   .product {
width: initial;
}
.modal {
z-index: 6000 !important;
}