Theme Integration

Dive into the details of using Advanced Wishlist App

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

Edit Shopify Theme Code

2. In this case, we are adding Wishlist button to the Product page below “Add to Cart“ button.

3. Copy the code {% render 'hulkapps-wishlist-product-btn' %} (this code can be found at the Instal Info section).

Install information

4. For adding the code to the Collections page, add code: “{% render 'hulkapps-wishlist-collection-btn', productId: product.id, variantId: product.selected_or_first_available_variant.id %}” to the product-card-grid.liquid file.

Product Card grid

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

header template

6. Adding “Save for Later” button to the Cart page - copy the code: “{% render 'hulkapps-wishlist-cart-btn', productId: item.product.id, variantId: item.variant.id, loopIndex: forloop.index %}” and add it to the cart-template.liquid file.

Cart page template

NOTE: Button customisation is done in backend : Settings > Button customisation

Button Customization

Precautionary measures

  • It is always recommended to take a backup of your LIVE theme before performing any integration steps.
  • The integration procedure is dependent on your theme structure. In case, if the app fails to display the wishlist options on your storefront then it could be some specific reason behind it. Sometimes it might be due to a coding conflict or missing any installation steps. In such cases, we recommend you to please contact our support team at help@hulk-support.com and we will make sure to help you out with the issues as soon as possible to offer you a reliable app experience.


Shopify Online store 2.0 theme doesn’t require code placement for Wishlist button on product page. The button can easily be enabled and placed right from the theme customisation section.

Check out the steps below to understand how Shopify Online Store 2.0 theme works with the app:

Wishlist Button Placement

1. Navigate to the Online Store section of your Shopify store and under the Themes page look for your preferred Shopify 2.0 theme that is compatible and click Customize.

Theme Integration

2. On the Theme Customization page, click on Theme Settings on the bottom left corner. This enables you to customize the Shopify theme

Theme Integration

3. Click on App embeds tab on the right side of the page under Theme settings block and enable the Advanced Wishlist app and Save the settings.

Advanced wishlist app embed

4. On Theme Editor select Products - Default product from dropdown list.

Advanced wishlist - Theme Editor

5. Click on Add block option on the left side. Select Wishlist Button.

Wishlist button

6. Preview the Shopify storefront by selecting the View button from the Action menu in top menu and findWishlist button added to product page.

Find Wishlist button

Adding Wishlist button on collection page

If you want to add Wishlist button to the collection page, you need to add code: {% render 'hulkapps-wishlist-collection-btn', productId: product.id, variantId: product.selected_or_first_available_variant.id %} to the file card-product.liquid.

Adding “Save for Later” button

For adding “Save for Later” button to the cart page you need to embed code: {% render 'hulkapps-wishlist-cart-btn', productId: product.id, variantId: product.selected_or_first_available_variant.id, loopIndex: loopIndex %}, in the main-cart-items.liquid file.

NOTE: You can drag and drop the block to adjust the position of the button and customisation options to style it as per your preference.

Style Wishlist Button

Other settings

Please update your preferences in the app’s admin panel, except for the button customization.

IMPORTANT NOTE: Currently, only the button customisation is possible in theme editor section. Anything that is changed in admin panel for buttons isn't visible on storefront. Merchants do not have to update the button customization settings in app’s admin panel again. This section is only applicable for Online Store 1.0 users.


  • Congratulations!

    You have successfully installed app and placed the snippets into your Shopify Online Store 2.0 theme.

  • Need Installation Assistance?

    To facilitate a faster response, request Installation Support

    A staff account invite may be sent to help@hulk-support.com


    Cart

    Your cart

    Close

    Your cart is currently empty.

    Total