Shopify Online store 1.0 


NOTE: These integration guidelines are limited to Shopify Online Store 1.0 only. 

Like most of the Shopify apps, we also offer automatic theme integration. It works for almost all the themes available in Shopify.

Please ensure to integrate the theme with your store's duplicate/staging theme to avoid conflicts.


Follow the steps for theme integration:

With Online Store 1.0 Theme Integration, it is necessary to manually add the snippets in the theme files to display the Wishlist button in the Shopify storefront.


  1. Access the Shopify store admin and navigate to Themes > Choose the theme > Actions > Edit Code


Product Pages


  1. In order to add the Snippet to display the Wishlist button on your Product pages below the “Add to Cart ” button.
  2. Open templates/product.liquid
  3. Locate the following line: <input type=“submit” class=“action-button submit” value=“{{ ‘products.product.add_to_cart’ | t }}“>
  4. Add the following code just after this line
{% render ‘hulkapps-wishlist-product-btn’ %}


  • Open Snippets: https://d.pr/i/eGCz6T
  • Add a new snippet "hulkapps-wishlist-product-btn"
  • Add the following code and press save.
{% assign button_layout = 'simple_button' %}
{% if shop.metafields.hulkapps_wishlist.hulkapps_wishlisfirt_general.button_layout != null %}
    {% assign button_layout = shop.metafields.hulkapps_wishlist.hulkapps_wishlist_general.button_layout %}
{% endif %}
<a href="#" class="icon-wishlist-heart-empty wishlist-btn grid-wishlist-btn heart-wishlist-animation" data-wishList data-added="false" data-proID="{{ product.id }}" data-varID="{{ product.selected_or_first_available_variant.id }}" data-button-layout="{{ button_layout }}" style="display:none">
    <div class="hulk_wl_icon-text" hulk-wl-custom-style data-count="{{ shop.metafields.hulkapps_wishlist.hulkapps_wishlist_general.public_wishlist_count }}">
        <div class="hulk_wl_icon">
            <i class="heart-hulk-animation"><i class="icon-wishlist-heart-empty"></i></i>
            <span>Add to wishlist</span>
        </div>
    </div>
    {% if button_layout == 'multi_color_button' and shop.metafields.hulkapps_wishlist.hulkapps_wishlist_buttonstyle.button_style == 'style_2' or shop.metafields.hulkapps_wishlist.hulkapps_wishlist_buttonstyle.button_style == 'style_4' %}
        <span class="count" hulk-wl-custom-style>0</span>
    {% else %}
        <span class="count" hulk-wl-custom-style>(0)</span>
    {% endif %}
</a>

Collection Pages 


  1. For adding the code to the Collections page 
  2. Open snippets/product-card-grid.liquid
  3. Locate the following line: <input class=“action-button submit” type=“submit” value=“{{ ‘products.product.add_to_cart’ | t }}” />
  4. Add the following code immediately after it
{% render ‘hulkapps-wishlist-collection-btn’, productId: product.id, variantId: product.selected_or_first_available_variant.id %}


Header Navigation

  1. For adding the heart icon to the header, copy the below code and add it to the header.liquid file.
<a href=“/apps/advanced-wishlist” class=“site-header__icon icon-wishlist-heart-empty” style=“font-size: x-large;“></a>



Move to Wishlist

  1. Adding the “Move to Wishlist” button to the Cart page - copy the below code and add it to the cart-template.liquid file.
     

{% render ‘hulkapps-wishlist-cart-btn’, productId: item.product.id, variantId: item.variant.id, loopIndex: forloop.index %}