> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/smile/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/smile/installation-steps.md).

# Installation Steps

Before Smile can start working on your store, you will need to install the app onto your current theme.

This article goes over how to install the app on product pages, collection pages, blog posts, and article pages.

* [Install Smile on product pages](#smile-products)
* [Install Smile on blog posts](#smile-posts)
* [Install Smile on collection pages](#smile-collections)
* [Install Smile on article pages](#smile-articles)

Installing on **product pages** is required, but other pages are optional.

### Install Smile on product pages <a href="#smile-products" id="smile-products"></a>

We will start by installing the app on product pages.

1\. Starting from your Shopify dashboard, click on **Online Store**, and then click on **Themes**.

2\. Click the **Customize** button on your published theme.

<figure><img src="https://3515138802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqAxweFDc65KUhPuvgUv9%2Fuploads%2Fgit-blob-dcf817c53f5c63022fd95d70df124d275d711a44%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

3\. Select **Products** from the dropdown menu in the header and then select a product template. **Default product** is the standard template for Shopify themes.

<figure><img src="https://3515138802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqAxweFDc65KUhPuvgUv9%2Fuploads%2Fgit-blob-8ca33a3e03dffbc4d52c207be2d8a8a621ebf334%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

4\. In the **Product Information** section of the left-hand toolbar, click + **Add block** and do a search for the **Smile Emoji Picker** block.

<figure><img src="https://3515138802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqAxweFDc65KUhPuvgUv9%2Fuploads%2Fgit-blob-8c92fb28d7201ce37e16447b7259b57b15d26966%2Fsmile_emojiblock_as.png?alt=media" alt=""><figcaption></figcaption></figure>

5\. Move the **Smile Emoji Picker** block anywhere within the **Product Information** section where you would like it to display. We recommend adding it below buy buttons.

8\. Save your changes.

Your customers will now be able to use emojis to react to your store's products on product pages!

### Install Smile on blog posts <a href="#smile-posts" id="smile-posts"></a>

Now we will install the app on blog posts.

1\. Select **Blog Posts** from the dropdown menu in the header and then select a blog post template. Default blog post is the standard template for Shopify themes.

<figure><img src="https://3515138802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqAxweFDc65KUhPuvgUv9%2Fuploads%2Fgit-blob-b69d169c8820c59fc6e5d956d90615a3a1fe926e%2Fsmile_dblogpost_As.png?alt=media" alt=""><figcaption></figcaption></figure>

2\. In the **Blog post** section of the left-hand toolbar, click + **Add block** and do a search for the Smile Emoji Picker block.

<figure><img src="https://3515138802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqAxweFDc65KUhPuvgUv9%2Fuploads%2Fgit-blob-d89799afed7eb393085211dcb2de588fcc80c583%2Fsmile_addblock_as.png?alt=media" alt=""><figcaption></figcaption></figure>

3\. Move the **Smile Emoji Picker** block anywhere within the **Blog post** section where you would like it to display. We recommend adding it below the content.

<figure><img src="https://3515138802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqAxweFDc65KUhPuvgUv9%2Fuploads%2Fgit-blob-d9f69115171762c40cf9a765dd8630bf80156e03%2Fsmile_blockonblog_as.png?alt=media" alt=""><figcaption></figcaption></figure>

4\. Save your changes.

Your customers will now be able to use emojis to react to your store's blog posts!

### Install Smile on collection pages <a href="#smile-collections" id="smile-collections"></a>

Next up, we will install Smile on collection pages.

1\. Starting from your Shopify dashboard, click on **Online Store**, and then click on **Themes**.

2\. Click the **Actions** ▼ button, then select **Edit code**.

![](https://3515138802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqAxweFDc65KUhPuvgUv9%2Fuploads%2Fgit-blob-4699560ac14e6497938a5295bf59faf445773518%2Fdocsassets555e25e4e4b027e1978e1c9aimages64f90e83f15ed05267de5334file-6rrxmmhija.png?alt=media)

3\. Navigate to your **collection.liquid** file.

If this file is guiding you to your collection-template.liquid file, you can find that located under the Sections folder.

4\. Do a search (ctrl F or ⌘ F) for the following text.

```
{% for product in collection.products
```

Once you've found this line of code, you'll notice there's a line of code further down the file that contains **{% endfor %}** (It should have the same indentation).

5\. Copy the code snippet below.

```
<div data-smile="product-{{ product.handle }}"></div>
```

6\. Paste the code snippet anywhere between the two pieces of code specified above.

<figure><img src="https://3515138802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqAxweFDc65KUhPuvgUv9%2Fuploads%2Fgit-blob-a98a51ab913e96e0423d18fa37f79b0351a6dafd%2Fsmile_collectionspage_as.png?alt=media" alt=""><figcaption></figcaption></figure>

7\. Save your changes.

It's best to play around with the location of the code snippet so it is in the best place possible.

Your customers will now be able to use emojis to react to your store's products on collection pages!

### Install Smile on article pages <a href="#smile-articles" id="smile-articles"></a>

Next up, we'll install Smile on article pages.

1\. Navigate to your **article.liquid** file.

2\. Do a search (ctrl F or ⌘ F) for the following word within this file.

```
{{ article.content }}
```

3\. Copy the code snippet below.

```
<div data-smile="article-{{ article.handle }}"></div>
```

4\. Paste the code snippet below that section of code, after any ending \</div> tags.

<figure><img src="https://3515138802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqAxweFDc65KUhPuvgUv9%2Fuploads%2Fgit-blob-11d6b0912d72b4c55c4432b496538c52dc747163%2Fsmile_%20collections_as.png?alt=media" alt=""><figcaption></figcaption></figure>

5\. Save your changes.

It's best to play around with the location of the code snippet so it is in the best place possible.

Your customers will now be able to use emojis to react to your store's articles on article pages!
