Publishing Wishlist Plus to show up on your Shopify store’s Dev theme

When you install Wishlist Plus on your Shopify store, we install the application by default on the live theme. However, there are times when that default approach might not work for your store, and you might instead want to install the Wishlist on the dev theme and not on production.  Depending on your Shopify store’s requirements, you might want to first make your changes on a dev/unpublished theme, and validate those changes before publishing it to the live store. This blog post outlines the steps to do exactly that:

Step 1: Remove Wishlist from Production theme

  • In the Shopify admin console, go to Online Store ->Themes.
  • Choose the PRODUCTION theme.
  • Click on “Edit HTML/CSS”

  • Open “theme.liquid” file
  • Search for the line of code – {% include ‘swymSnippet’ %}
  • Comment this code out. Replace the above line with this instead – {% comment %}{% include ‘swymSnippet’ %} {% endcomment %}

Now Wishlist is turned OFF for your Production theme. Simply uncomment the line of code any time you feel like you are ready to re-enable the app/snippet on your production theme.

Step 2 : Install Wishlist on Dev theme

We will need to include 2 snippet files as part of the dev theme and here are the steps outlined to copy over the contents of the 2 snippets from the production theme to the dev theme.

  • Open the Production theme on a browser tab  
    1. In the Shopify admin console, go to Online Store ->Themes.
    2. Choose the Production theme
    3. Click on “Edit HTML/CSS”
  • Open a new browser tab and open the DEV theme
    1. In the Shopify admin console, go to Online Store ->Themes.
    2. Choose the unpublished theme where you’d like to enable the app
    3. Click on “Edit HTML/CSS”

  • Now open the theme.liquid in your DEV theme.
  • Add {% include ‘swymSnippet’ %} in your theme. liquid file. We recommend adding before the </body> tag.
  • Create a new snippet – swymSnippet.liquid
    • In the editor, goto Snippets and click on “Add a new snippet”

    • Give the name of the snippet and hit Create.

    • This will create the swymSnippet.liquid file and open an empty file for editing
  • Copy the contents for this snippet from your PRODUCTION theme.
    • Go to your PRODUCTION theme.
    • Open snippets/swymSnippet.liquid

    • Select all the content and copy it
    • Switch to the browser tab with the DEV theme.
    • Paste the code that you copied, in the file that is in the DEV theme.
    • Hit Save.
  • Create a new snippet – swym-product-view.liquid
    • In the editor, goto Snippets and click on “Add a new snippet”

    • Give the name of the snippet and hit Create.

    • This will create the swym-product-view.liquid file and open an empty file for editing
  • Copy the contents for this snippet from your PRODUCTION theme.
    • Go to your PRODUCTION theme.
    • Open snippets/swym-product-view.liquid

    • Select all the content and copy it.
    • Switch to the browser tab with the DEV theme.
    • Paste the code that you copied, in the file that is in the DEV theme.
    • Hit Save.

Voila! You are done. The Wishlist Plus app is enabled on your Dev themes. You can preview the app on your theme and validate that it is functioning correctly before enabling this on your live site.

Note: This blog helps you to integrate Wishlist Plus capabilities into your Shopify store. You might need to fine tune it a bit to make it blend well with your theme.

Recommended Posts

Leave a Comment