> For the complete documentation index, see [llms.txt](https://the-wishlist-documentation.gitbook.io/the-wishlist-documentation-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-wishlist-documentation.gitbook.io/the-wishlist-documentation-docs/shopify-app-configuration/embedding-code-in-theme.md).

# Embedding Code in Theme

Steps to disable code injection for Wishlist buttons and embed code directly into theme

## Configure settings

### Launch Point Configuration

Select option “Disable config to use code in theme” ![Aspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.001.png](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-006ab3448df44ca3ab7d5259046cc35a04dfeccf%2FAspose-2.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.001.png?alt=media)

### Product Detail Page

Select option "Disable config to use code in theme"

![Aspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.002.png](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-0d003ad0a5b244e64879dee4e272aa694a3a7abf%2FAspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.002.png?alt=media)

### Collection Page

Deselect option "Show wishlist Icon on category page..."

![Aspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.003.jpeg](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-ba4dd845b62c1fabf51ee3b8da2c5285a07de733%2FAspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.003.jpeg?alt=media)

## Embed code in theme (example)

*NOTE: This is an advanced technique; you may need to get in touch with the developer of the theme or app for support. Below is an example of the Dawn theme*

*Please first configure the Launch Point, product detail and collection page settings as described above*

### Launch Point Configuration

Note - if you are using Shopify New Accounts, then please jump to [Snippets for Shopify New Custmer Accounts](#snippets-for-shopify-new-custmer-accounts)

#### Create snippets launch-point-wishlist.liquid

```
<div class="wishlist__launch-point"> 
  <!-- Link to page wishlist -->  
  <a href="/pages/wishlist">
    <!-- Icon wishlist -->
    <svg viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1.25em" height="1.25em"
      fill="currentColor" aria-hidden="true">
      <path
        d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84- 55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0- 69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6- 147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3- 356 429.3z">       
      </path>
    </svg>
    <!-- Count wishlist -->
    <span class="count-item"></span>
  </a>
</div> 

<!-- JS to get and update count item wishlist -->
<script> 
  document.body.addEventListener("initTheWishlist", () => { 
    const getCountItem = theWishlist.countItemWishlist(); 
    const elCountItemWishlist = document.querySelector('.wishlist__launch-point .count-item'); 
    if (elCountItemWishlist) { 
      elCountItemWishlist.textContent = getCountItem; 
    } else { 
    console.log('Element with the specified class not found.');     
    } 
  }); 
</script> 

<!--
CSS style
The following code is supported well on default theme, but other themes may need a different style as each theme has a different HTML structure.  
-->

<style> 
  .wishlist\_\_launch-point { 
    height: 4.4rem; 
    width: 4.4rem; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
  } 
  .wishlist\_\_launch-point a { 
    display: flex; 
  } 
  .wishlist\_\_launch-point svg { 
    height: 24px; 
    width: auto; 
    padding: 0; 
  }   
  .wishlist\_\_launch-point .count-item { 
    position: absolute; 
    background-color: rgb(var(--color-button)); 
    color: rgb(var(--color-button-text)); 
    height: 1.7rem; 
    width: 1.7rem; 
    border-radius: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: .9rem; 
    bottom: 0.8rem; 
    left: 2.2rem; 
    line-height: calc(1 + .1 / var(--font-body-scale));   
  } 
</style> 
```

#### Render snippets in sections header.liquid

![Aspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.007.png](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-6d1d7ef6a0fbf736becaa15fc3747dd306059c9f%2FAspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.007.png?alt=media)

#### Resulting page

![Aspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.008.png](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-6f38e08150bcc98b119f2a01dd19423a461b03e6%2FAspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.008.png?alt=media)

### Product Detail Page

#### Create snippets button-detail-wishlist.liquid

```
<div class="detail-add-wishlist-wrapper"> 
  <button 
    id="btn-detail-wishlist"
    class="btn-wishlist disable"
    data-productId="{{ product.id }}">
    <div class="button-icon">
      <svg class="icon-add-wishlist" viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1.25em" height="1.25em" fill="currentColor" aria-hidden="true" style="width: 20px; height: 20px;"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00- 84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0- 69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6- 147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z"></path></svg>     
    </div>
    <span class="button-text">Add To Wishlist</span>
  </button>
</div> 

<!-- JS to get and update count item wishlist -->
<script> 
  let initPage = false; 
  const buttonWishlistDetail = document.querySelector('#btn-detail- wishlist'); 
  const buttonType = { 
    LOADING: 'LOADING', 
    TEXT: 'TEXT' 
  } 
  const iconLoading =   
    <svg class="icon-loading-wishlist" aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" width="1.25em" height="1.25em" xmlns="http://www.w3.org/2000/svg"><circle class="path" fill="none" stroke- width="6" cx="33" cy="33" r="30" style="stroke: #FFF;"></circle>
    </svg>
    `; 
  const iconAddedWishlist =   
    <svg class="icon-added-wishlist" viewBox="64 64 896 896" 
      focusable="false" data-icon="heart" width="1.25em" height="1.25em" fill="currentColor" aria-hidden="true" style="width: 20px; height: 20px;"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 ![ref1]264.4 0 00- 84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0- 69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6- 147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z"></path>
    </svg>    
    `; 
  const iconAddWishlist =   
    <svg class="icon-add-wishlist" viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1.25em" height="1.25em" fill="currentColor" aria-hidden="true" style="width: 20px; height: 20px;"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00- 84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0- 69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6- 147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z"></path>
    </svg>    
    `; 

  function getVariantId () { 
    const hiddenInput = document.querySelector('.product-form input[name="id"]'); 

  if (!hiddenInput) { 
    console.log('Please, contact developer theme to querySelector exactly the input of variant'); 
    
    return;     
    } 

  const variantId = hiddenInput.value; 

  if (variantId) { 
    return variantId;     
  } else { 
    console.log('Can not get variant id');       
    return null; 
    } 
  } 
  function removeDisableButton() { 
    const elButton = document.querySelector('.detail-add-wishlist-wrapper .btn-wishlist.disable'); 
    if (elButton) { 
      elButton.classList.remove('disable'); 
    } 
  } 

  function renderButton (type) { 
    const buttonIcon = document.querySelector('.button-icon');     
    const buttonText = document.querySelector('.button-text');     
    if (type === buttonType.LOADING) { 
      buttonIcon.innerHTML = iconLoading; 
    } else { 
      const variantId = getVariantId(); 
      const checkItemInWishlist = theWishlist.checkVariantInWishlist(variantId); 
      if (checkItemInWishlist) { 
        buttonIcon.innerHTML = iconAddedWishlist; 
        buttonText.innerHTML = 'Added To Wishlist' 
      } else { 
        buttonIcon.innerHTML = iconAddWishlist; 
        buttonText.innerHTML = 'Add To Wishlist' 
      } 
    } 
  } 

  function actionButtonWishlist () { 
    buttonWishlistDetail.addEventListener("click", function() {       
      const variantId = getVariantId(); 
      const checkItemInWishlist = theWishlist.checkVariantInWishlist(variantId); 
      if (variantId) { 
        renderButton(buttonType.LOADING); 
        if (checkItemInWishlist) { 
          theWishlist.removeWishlistGeneral(variantId, 'DETAIL\_PAGE', function (res) { console.log(res);
        }); 
        } else { 
          theWishlist.addWishlistGeneral(variantId, 'DETAIL\_PAGE', function (res) { console.log(res); 
          }); 
        } 
      } 
    }); 
  } 

  function handleChangeVariant () { 
    const hiddenInput = document.querySelector('.product-form input[name="id"]'); 
    hiddenInput.addEventListener('change', **function** (event) {       
      renderButton(buttonType.TEXT); 
    }); 
  } 

  document.body.addEventListener("initTheWishlist", () => { 
    console.log('initTheWishlist ... '); 
    if (!initPage) { 
      initPage = true; 
      removeDisableButton(); 
      actionButtonWishlist(); 
      handleChangeVariant(); 
    } 
    renderButton(buttonType.TEXT); 
  }); 
</script> 

<!-- CSS style -->
<!--
The following code works well on default theme, but other themes may need a different style as each theme has a different HTML structure.  -->

<style> 
  .detail-add-wishlist-wrapper .btn-wishlist { 
    background-color: rgba(0,0,0,100); 
    border-color: transparent; 
    color: #fff; 
    cursor: pointer; 
    padding: 0.9rem 12px 1.1rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: none; 
    min-height: 4.5rem; 
    box-sizing: border-box; 
    transition: all 0.3s linear; 
  } 
  .detail-add-wishlist-wrapper .btn-wishlist.disable {     
    cursor: none; 
    opacity: 0.6; 
  } 
  .detail-add-wishlist-wrapper .button-icon { 
    margin-right: 5px; 
  } 
</style> 
```

#### Render snippets in sections main-product.liquid

![Aspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.011.png](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-9acaa38c5ff8bb33ae1c91e84f60a06c4d64f0ba%2FAspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.011.png?alt=media)

#### Resulting page

![Aspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.012.png](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-6c6b8b478ebe0bf9f0c1106d5fc6f00253424c33%2FAspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.012.png?alt=media)

### Collection Page

#### Follow the step in App Configuration

![Aspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.013.png](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-8c410098dc23c194c2de81313db1c43017f27498%2FAspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.013.png?alt=media)

#### Add the icon

Add the icon in: {Icon in here}

![Aspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.014.png](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-31c58154da20c2db1deedb45d91ef0eb6d8960c9%2FAspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.014.png?alt=media)

#### Add custom style in file base.css

```
.card-information .cart-inforamtion_wrapper,
.card_content  .card_information {
position: relative;

} 
.osc-css.wrapper-button-collection {     
  top: 15px;
  position: absolute;
  right: 0;
  z-index: 94;
}
```

#### Result

![Aspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.017.png](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-fbcd98710f61474dc8cdc0079bfd9a70897dfcaf%2FAspose.Words.3e49afb8-65cc-45f6-a980-f7a5f5a73234.017.png?alt=media)

### Snippets for Shopify New Custmer Accounts

If you are using New customer accounts from Shopify, we suggest you use these snippets for PLP and PDP:

```
<div
    class="btn-wishlist button-collection-wishlist button-{{ product.id }}"
    data-product-id="{{ product.id }}"
    data-has-only-variant="{{ product.has_only_default_variant }}"
    data-product-title="{{ product.title }}"
  >
    <span class="button-icon">
      {%- render 'icon-heart' -%}
    </span>
  </div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ product.id }}">
    {{ card_product | json }}
  </script>
  <script type="application/json" id="OptionJson-{{ product.id }}">
    {{ card_product.options_with_values | json }}
  </script>
{% endunless %}
```