We have already have header icon placement by default in the app but if some of the users want to place the header icon matching there theme aesthetics they can do so by simply going through this documentation .
To add the wishlist icon of your choice in the header section, you simply need to:
1. Go to the general settings
2. Scroll to the Custom code integration at the bottom of the page
3. Then navigate to the Wishlist icon or text with custom code section, where you can see the Custom short code.

Please turn on the toggle on the right side; this will allow the custom code to function properly.

Here is the custom code that you can easily copy and paste into the file: #
For icon : <span class=”custom-wishlist-icon” wishlist-type=”icon”> </span>
For text : <span class=”custom-wishlist-icon” wishlist-type=”text”> </span>
Now, where to add this? #
As an example we have chosen “Dawn Theme” you can place the code according to your theme in the respective live theme that you select.
It can be done through these very simple steps :
1. Go to the Online store, then click Themes Customise
2. Click on edit code as shown in the screenshot below, and search for the header file and paste the code where you want to show the icon or text.

3. You can add the code before or after the add to cart in the same ways as mentioned in this document.
Note: You can add a wishlist icon or text anywhere on your site to open a modal, page, or drawer. To do this, simply add a custom selector (class=’custom-wishlist-icon’) to the specific `<div>` or `<span>` tag.
Additionally, if you want to specify whether to display an icon or text, include the `wishlist-type` attribute. If the `wishlist-type` is not specified, an icon will be shown by default.
We can also do this customization of header icon from our end if you do not have any coding background just reach us out at support@webframez.com .