Fine-tune languages

The Wishlist Power app renders predefined texts. For example, when the wishlist is empty, a message is rendered to indicate to the customer the wishlist is empty.

Shopify does not allow merchants to change an app block's translations. When a merchant wants to customize the rendered text, a custom code has to be added to the theme's code.

To customize the wishlist's text, add the code below to the theme's code:

locales/en.default.json

At the end of the file and before the last }, add the following code:

"apps": {
  "wishlist": {
    "empty": {
      "title": "Empty wishlist",
      "description": "You have no products in your wishlist",
      "link": "Start shopping"
    }
  }

In case you need to translate the text into another language, add this code to the corresponding file. For example, if you want to translate the text for Spanish, add the previous code in the locales/es.json file and change values to fit your needs.

sections/footer.liquid

Add the following code on top of the {% schema %} tag:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const targetNode = document.querySelector('ooo-wl-content');
    const config = { attributes: true, childList: true };
    const callback = () => {
      const emptyWishlistTitle = document.querySelector('.ooo-wl-empty__title');
      emptyWishlistTitle.innerText = "{{ 'apps.wishlist.empty.title' | t }}";
  
      const emptyWishlistDescription = document.querySelector('.ooo-wl-empty__description');
      emptyWishlistDescription.innerText = "{{ 'apps.wishlist.empty.description' | t }}";
  
      const emptyWishlistLink = document.querySelector('.ooo-wl-link');
      emptyWishlistLink.innerText = "{{ 'apps.wishlist.empty.link' | t }}";
    }

    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
  });
</script>

This code will change the native app translations to the ones defined in the locale files.