# Add app blocks to your theme

## **Instructions** 

{% stepper %}
{% step %}

### Open theme editor

In Shopify Admin, navigate to Online Store -> [Themes](https://admin.shopify.com/themes) -> Customise Theme
{% endstep %}

{% step %}

### Add app block to header

* Within your theme editor, expand your '**Header**' section
* Click to 'Add block' in your '**Header**' section
* Select '**Apps**' -> **'Open wishlist button'** block\
  \ <img src="https://1134778209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMp2ekCAtVgFUnsQlGWfX%2Fuploads%2FKmacqsoERAZmNjCHP84O%2FScreen%20Shot%202024-11-09%20at%205.09.16%20pm.png?alt=media&#x26;token=fc178c62-b18a-493e-b61d-2bfce3e7363e" alt="" data-size="original"><br>
  {% endstep %}

{% step %}

### Configure header app block settings&#x20;

* Within the '**Open wishlists button**' app block you can configure settings to customise the styling as per your needs.
  * *Learn more about the available settings* [*here*](https://wishlist.nativeappco.com/customisation/custom-styling/product-page-button)*.*\
    ![](https://1134778209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMp2ekCAtVgFUnsQlGWfX%2Fuploads%2F2NQfZLR9OvzWv6F5ZGQN%2FScreen%20Shot%202024-11-09%20at%206.23.15%20pm.png?alt=media\&token=9e282ea2-0523-49bb-8d44-2dcee087d20d)
    {% endstep %}

{% step %}

### Add app block to product template/s

* Within your theme editor, navigate to your **Default Product** template
* Click to 'Add block' in your '**Product Information**' section&#x20;
  * *This section may have different name depending on your theme*
* Select '**Apps**' -> '**Add To List Button PDP'** bloc&#x6B;**.**\
  \
  ![](https://1134778209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMp2ekCAtVgFUnsQlGWfX%2Fuploads%2FXvMFKoNQcvkyIIBnWelG%2FScreen%20Shot%202024-11-09%20at%206.06.36%20pm.png?alt=media\&token=c2d366ce-23ab-4b13-8c1a-9b66a4a59a45)<br>
* Drag and drop the block within your product section to position it as required.
  {% endstep %}

{% step %}

### Configure product app block settings&#x20;

* Within the '**Add to list button PDP**' app block you can configure settings to customise the styling as per your needs.
  * *Learn more about the available settings* [*here*](https://wishlist.nativeappco.com/customisation/custom-styling/header-button)*.*\
    \
    ![](https://1134778209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMp2ekCAtVgFUnsQlGWfX%2Fuploads%2F69arSJRtM9Mho5BVE1K7%2FScreen%20Shot%202024-11-09%20at%206.24.30%20pm.png?alt=media\&token=fa20e611-c49f-4e36-8144-10e4b8183d2e)
    {% endstep %}

{% step %}

### Repeat steps 4 & 5 for any other product templates

If your theme is running multiple product templates, you'll need to repeat steps 4 & 5 (above) for any other product templates you use.
{% endstep %}
{% endstepper %}