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.

 

Where to insert the Setup Code

Open your Shopify Account Dashboard.

In the menu to the left, select Themes under Your Website.


Click Template Editor.


From the file list, select the Layouts folder.

Click theme.liquid to open your theme in the editor.


Locate </head> in the file.


Create an empty line above this tag.

Paste the Setup Code into the empty line.


Press the Save button.

 

 

How to insert the App Code into your templates

Files will be edited from within the Template Editor.

 

ADDING APPS TO THE BOTTOM OF YOUR BLOG FEED

Open blog.liquid in your editor.



Find the following line in your template:

{% include 'pagination' %}


Place your cursor at the end of the line.

Press enter to start a new line.


Paste your app's HTML code snippet.


Press the Save button in the top-right.


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

 

ADDING APPS IN YOUR POST INDEX FOR ALL ARTICLES

Open blog.liquid in your editor.


Find the following line in the template:

{{ article.excerpt_or_content }}


Place your cursor at the end of the line.

Press enter to start a new line.


Paste your app's HTML code snippet.


Press the Save button in the top-right.


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

 

ADDING APPS TO YOUR SINGLE POST VIEW

Open article.liquid in your editor.


Find the following line in the template:

<!-- Begin social icons -->


Place your cursor at the end of the line.

Press enter to start a new line.


Paste your Share Buttons app code.


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

 

Alternatively:

Create a blank line above the following line:

<!-- End social icons -->

And paste your Share Buttons app code.

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

OR

Create a blank line following this line.

And paste your Related Content app code.

This will insert the Related Content below all social buttons.

 

Press the Save button in the top-right.

 

 

HOW TO ADD APPS TO YOUR PRODUCT PAGE

Open product.liquid in your editor.


Find the following line in the template:

<!-- Begin social icons -->

 

Place your cursor after <div class=”social”>

Press enter to start a new line.


Paste your Share Buttons app code.


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

 

Alternatively:

Create a blank line above the following lines:

  </div>
<!-- End social icons -->

And paste your Share Buttons app code.

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

OR

Create a blank line following these lines.

And paste your Related Content app code.

This will insert the Related Content below all social buttons.

 

Press the Save button in the top-right.

 

 

HOW TO ADD APPS TO *almost* ALL PAGES

Open page.liquid in your editor.


Find the following line in the template:

{{ page.content }}


Place your cursor at the end of the line.

Press enter to start a new line.


Paste your Share Buttons app code.


Press the Save button in the top-right.


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

 

HOW TO ADD APPS TO YOUR DYNAMIC HOMEPAGE

Open index.liquid in your editor.

Find the following line in the template:

</section>

 

Place your cursor at the beginning of the line.

Press enter to create a new line above.

Paste your app's HTML code snippet in the empty line.

Press the Save button in the top-right.

This will insert our apps on your homepage below your list of products.

 

How to add Apps to the Order Confirmation Page

Open your Shopify Account Dashboard.

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


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


Find Additional content & scripts in the Order Processing section.


Paste your app's HTML code snippet.


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?