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. It's important to note that each of these installation steps are completely optional.

Contents

Install Smile on product pages

We'll start by installing the app on product pages.

1. Start by copying the code snippet below.

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

2. Navigate to your  product.liquid file (Instructions on how to locate this file can be found here).

3. Do a search (ctrl F or ⌘ F) for the word  </form>.

Can't find  </form> in your product.liquid file? Follow the instructions in this article on how to locate it.

4. Paste the install code snippet right below  </form> text, as seen below. 

5. Save your changes.

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

6. 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'll install the app on collection pages.

1. Start by copying the code snippet below.

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

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

3. Do a search (ctrl F or ⌘ F) for {% 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).

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

5. Save your changes.

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

6. 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'll install the app on article pages.

1. Start by copying the code snippet below.

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

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

3. Do a search (ctrl F or ⌘ F) for {{ article.content within this file.

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

5. Save you changes.

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

6. 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'll install the app on blog pages.

1. Start by copying the code snippet below.

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

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

3. Do a search (ctrl F or ⌘ F) for  {% 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).

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

5. Save your changes. 

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

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