Install Smile

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, article pages, and blog pages.

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

Install Smile on product pages

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  Actions ▼ button, then select Edit code.

3. In the top left corner of the theme code editor, search for your  product.liquid file and click into it.

4. If you see that your product.liquid file is guiding you to your product-template.liquid file. Go into the  product-template.liquid file under the Sections folder. Otherwise, continue to the next step.

5. Do a search using the keyboard shortcuts (Ctrl F or ⌘ F) for the word.

{% endform %}

Can't find {% endform %} in your product.liquid or product-template.liquid  files? Follow the instructions in this article on how to locate it.

6. Copy the code snippet below.

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

7. Paste the install code snippet right below the {% endform %} text, as seen below.

8. 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 product pages.

Install Smile on collection pages

Next we will install the app on collection pages.

1. 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.

2. 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. An example of this line of code can be seen in the screenshot below, on line 70).

3. Copy the code snippet below.

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

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

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 products on collection pages.

Install Smile on article pages

Now we will install the app on article pages.

1. Navigate to your article.liquid file.

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

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. 

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. 

Install Smile on blog pages

Finally, we will install the app on blog pages.

1. Navigate to your blog.liquid file. 

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

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

{% for article in blog.articles

Once you've found this line of code, you'll notice there's a line of code further down the file that contains {% endfor %}. (For reference, it should have the same indentation. An example of this line of code can be seen in the screenshot below, on line 56).

3. Copy the code snippet below.

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

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

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 and blog pages.

Still need help? Contact Us Contact Us