Installing Shareaholic on Shopify

Follow

The following tutorial will help you install Shareaholic on Shopify:

If you have not already signed up for Shareaholic, check out the Getting Started with Shareaholic Guide before following the instructions below.

Installing Shareaholic on Shopify

1. Login to your Shareaholic account, or create a new account if you don't already have one.

2. From the My Sites dropdown at the top of the page, select Add Site.

add-a-site-dropdown.png

3. Enter the URL of your Shopify store and click Continue. Please note, you should not include the HTTP/HTTPS prefix - just the domain is all we need!

add-site-1.png

4. On the 'Choose Platform' screen, select 'Shopify' from the list if it was not automatically selected. Click Continue.

shopify-select-cms.png

5. On the 'Install' page, make sure your Shopify store domain is correct and click Continue.

shopify-install-instructions.png

6. You will be redirected to your Shopify Admin dashboard, where you will be prompted to install the Shareaholic app. Click Install Unlisted App to install the plugin.

shopify-install-plugin.png

 You will be redirected to your site's Shareaholic Apps dashboard upon successful installation. 

 7. Congratulations! Shareaholic should now be installed on your Shopify site!

balloons.gif

 

To Install an In-Page App

Shareaholic In-Page Apps are special apps that you let place them exactly where you want in your website layout or template at the location where the app should appear on your page. Our Share Buttons and Related Content apps are both In-Page apps.

If you have not already created an In-Page Shareaholic App, check out the Installing an In-Page Shareaholic App Guide before following the instructions below. 

Please note Shopify does include their own Social Share Buttons in the templates, so be sure to disable this setting if you want to use Shareaholic Share Buttons instead.

All Shopify Files will be edited from within the Template Editor, which can be found by going to your Themes page and selecting "Edit Code" from the Actions dropdown on your current theme. 

Adding Apps to the Bottom of your Blog Feed

1. Open sections/blog-template.liquid in your editor.

shopify-blog-template-location.png

2. Find the following line in your template: {% include 'pagination' %}

shopify_include_pagination_line.png


3. Place your cursor at the end of the line, and press enter to start a new line.

shopify-pagination-newline.png


4. Paste your app's HTML code snippet.

shopify-code-below-pagination.png


5. Press the Save button in the top-right.


This will insert the app below the pagination in your blog feed pages.

 

Adding Apps in Below Each Post in Your Post Index 

1. Open sections/blog-template.liquid in your editor.

shopify-blog-template-location.png


2. Find the highlighted lines of code in your template by searching for: {% if article.excerpt.size > 0 %}

shopify-article-excerpt-location.png

Note: There may be multiple locations that match the above block of code. If you are displaying your blog posts in a Grid layout, look for {% if article.excerpt.size > 0%} line to be preceded by a line that says <div class="rte_article_grid-excerpt">. If you are displaying your blog posts in a List view, then look for the line to be preceded by <div class="rte">


3. Place your cursor at the end of the {% endif %} line and press enter, creating a new line below.

shopify-endif-newline.png


4. Paste your app's HTML code snippet.

shopify-below-post-code.png


5. Press the Save button in the top-right.


This will insert the app below each blog article preview in your post index.

 

Adding Apps to Your Single Post View

1. Open section/article-template.liquid in your editor.

shopify-article-template-location.png


2. Find the following line in the template: {{ article.content }}

shopify-article-content-loc.png


3. Place your cursor at the end of the line and press enter to start a new line.

shopify-article-newline.png


4. Paste your Share Buttons app code.

shopify-articlecontent-buttons.png

5. Press the Save button in the top-right.

This will insert the Share Buttons above your other social buttons.

To insert the Share Buttons or Related Content app below your other social buttons, follow the above steps with the following changes:

  • Create a blank line above the following line: {{ article.content }} 
  • Paste your Share Buttons or Related Content app code. This will insert the app below your other social buttons.

How to Add Apps to Your Product Page

1. Open sections/product-template.liquid in your editor.

shopify-prod-temp-loc.png


2. Find the following line in the template: {{ product.description }}

shopify-prod_desc-loc.png

3. Place your cursor after {{ product.description }} and press enter to start a new line.

shopify-prod_desc-newline.png


4. Paste your Share Buttons or Related Content app code.

shopify-prod_desc-codesnippet.png

5. Press the Save button in the top-right.


This will insert the Share Buttons below your other social buttons.

To insert the Share Buttons or Related Content app above your other social buttons, follow the above steps with the following changes:

  • Create a blank line above the following lines: {{ product.description }}
  • Paste your Share Buttons or Related Content app code.

Adding Apps to (almost) All Pages

1. Open page.liquid in your editor.


2. Find the following line in the template: {{ page.content }}


3. Place your cursor at the end of the line and press enter to start a new line.


4. Paste your Share Buttons app code.


5. Press the Save button in the top-right.

This will insert our apps on all non-product pages except Home, Catalog, and Blog.

Adding Apps to the Order Confirmation Page

1. Open your Shopify Account Dashboard.

2. In the menu to the left, select Settings under Configuration.


3. Now, under Store Settings, select Checkout from the menu.


4. Find Additional content & scripts in the Order Processing section.


5. Paste your app's HTML code snippet.


6. Press the Save Changes button in the Order Processing section.

 

 

Click here for information on special keys that can be set to customize the data being passed into the app.

Was this article helpful?