Shopify FAQs

How to Install ShareThis’ Tools on Shopify (with ShareThis App)

Our Shopify app makes it quick and easy for you to add share buttons or follow buttons to your website in a few simple clicks. 

  1. Navigate to the ShareThis Share Buttons app in Shopify and select the Add app button.
  2. Install the app and select one of the 4 options:
    • Inline Share Buttons: Add share buttons near your headline or product for ideal visibility 
    • Sticky Share Buttons: Keep share buttons anchored on the left or right rail of your website so visitors can share while they scroll 
    • Follow Buttons: Expand your web presence to your top social media channels 
    • Consent Management Platform: Manage users’ consent preferences with ease and comply with EU privacy regulations including the General Data Protection Regulation
  3. Select the ShareThis tool you would like to use and customize the buttons by selecting your social channels, size, shape, and more.
  4. On and Off switch for Shopify tools Turn on the switch and then scroll down and click on the Update button to save your changes.
  5. If you are installing inline tools, you can choose between:
    • Adding Inline ShareThis tools on a product page using a Custom Liquid Block
    • Adding Inline ShareThis tools on a product page by editing the Theme Code
    • Adding Inline ShareThis tools on a page or blog

Note: Inline tools require an extra snippet of code to work on your site. If you would like to install our Inline Share Buttons or Follow Buttons, you will need to add a placement code following the options above wherever you want the tool to appear

Before customizing your theme, it’s always recommended to make a backup first, follow these instructions to duplicate the theme for a backup copy in case you want to revert the changes.

Adding Inline ShareThis tools to your product page using a Custom Liquid Block

You can use the Shopify theme editor to have a visual guide when placing the inline buttons code. Although not limited to the products page, you could follow these instructions and the video at the end to place the code on your product description.

  1. Go to your Online Store Dashboard.
  2. Click on Themes and then click on the green button that says Customize.
  3. Navigate to the page where you want the buttons to appear by clicking on the live preview.
  4. Locate your mouse in the place you want to insert the buttons, a blue small button will appear with a Add a Section label.
  5. Select Custom Liquid from the list.
  6. Copy and paste the relevant placement code in the left sidebar that just appeared.
    1. Share Buttons placement code:
      <div class="sharethis-inline-share-buttons"></div>
    2. Follow Buttons placement code:
      <div class="sharethis-inline-follow-buttons"></div>
  7. Click Save in the upper right corner.

For your convenience, here’s a preview:

Adding Inline ShareThis tools on a product page by editing the Theme Code

  1. In the left navigation bar, select Online Store > Themes and then click Actions > Edit Code.
  2. Within the left sidebar, scroll down to the Sections folder and select main-product.liquid (If you’re using an older theme, go to Templates and locate the product.liquid file). Then, find the following code:
    {{ product.description }}
    Note: You can use Control + F to search for the word “description” on it (please be sure to click on the inside of the file so you can search for content within the code editor ), try placing the buttons in a new line after the section or lines which have this name. A section/element it’s delimited with the “}” character at the end of it.

  3. Copy and paste the relevant placement code above or below your product description.
    1. Share Buttons placement code:
      <div class="sharethis-inline-share-buttons"></div>
    2. Follow Buttons placement code:
      <div class="sharethis-inline-follow-buttons"></div>

For your convenience, here’s a preview:

Adding Inline ShareThis tools on a page or blog

  1. In the left navigation bar, select Online Store > Pages. Then, click on the page where you want to display your buttons in. 
  2. Click the Show HTML <> button in the Content section.
  3. Copy and paste the relevant placement code below wherever you want the ShareThis tool to appear.
    1. Share Buttons placement code:
      <div class="sharethis-inline-share-buttons"></div>
    2. Follow Buttons placement code
      <div class="sharethis-inline-follow-buttons"></div>
How to Install ShareThis’ Tools on Multiple Shopify Stores

You can manage multiple stores on Shopify via the ShareThis Platform (by adding their domains), to do this, you will need to manually add the ShareThis <script> code inside the <head> of your site(s), simply follow the steps below:

  1. Log in or Sign up to the ShareThis Platform.
  2. In the left navigation bar, click Settings and select + Add new domain under the Domains section.
  3. In the pop-up window, add the domain URL of your Shopify store and click Add new domain.
  4. Now that you’ve added your new domain, select the Activate code button in the top right corner and click the Copy code button in the pop-up window. 
  5. Log in to your Shopify website.
  6. In the left navigation bar, select Online Store > Themes, and from the Actions dropdown, click Edit Code.
  7. From the different files and folders, go to Layout and click theme.liquid.
  8. Copy and paste the unique ShareThis code that you copied from step 4 into the <head> section of your website.
  9. If you are installing inline tools, you can choose between:
    • Adding Inline ShareThis tools on a product page using a Custom Liquid Block
    • Adding Inline ShareThis tools on a product page by editing the Theme Code
    • Adding Inline ShareThis tools on a page or blog

Note: Inline tools require an extra snippet of code to work on your site. If you would like to install our Inline Share Buttons or Follow Buttons, you will need to add a placement code following the options above wherever you want the tool to appear

Before customizing your theme, it’s always recommended to make a backup first, follow these instructions to duplicate the theme for a backup copy in case you want to revert the changes.

Adding Inline ShareThis tools on a product page using a Custom Liquid Block

You can use the Shopify theme editor to have a visual guide when placing the inline buttons code. Although not limited to the products page, you could follow these instructions and the video at the end to place the code on your product description.

  1. Go to your Online Store Dashboard.
  2. Click on Themes and then click on the green button that says Customize.
  3. Navigate to the page where you want the buttons to appear by clicking on the live preview.
  4. Locate your mouse in the place you want to insert the buttons, a blue small button will appear with a Add a Section label.
  5. Select Custom Liquid from the list.
  6. Copy and paste the relevant placement code in the left sidebar that just appeared.
    1. Share Buttons placement code:
      <div class="sharethis-inline-share-buttons"></div>
    2. Follow Buttons placement code:
      <div class="sharethis-inline-follow-buttons"></div>
  7. Click Save in the upper right corner.

For your convenience, here’s a preview:

Adding Inline ShareThis tools on a product page by editing the Theme Code

  1. In the left navigation bar, select Online Store > Themes and then click Actions > Edit Code.
  2. Within the left sidebar, scroll down to the Sections folder and select main-product.liquid (If you’re using an older theme, go to Templates and locate the product.liquid file). Then, find the following code:
    {{ product.description }}
    Note: You can use Control + F to search for the word “description” on it (please be sure to click on the inside of the file so you can search for content within the code editor ), try placing the buttons in a new line after the section or lines which have this name. A section/element it’s delimited with the “}” character at the end of it.

  3. Copy and paste the relevant placement code above or below your product description.
    1. Share Buttons placement code:
      <div class="sharethis-inline-share-buttons"></div>
    2. Follow Buttons placement code:
      <div class="sharethis-inline-follow-buttons"></div>

For your convenience, here’s a preview:

Adding Inline ShareThis tools on a page or blog

  1. In the left navigation bar, select Online Store > Pages. Then, click on the page where you want to display your buttons in. 
  2. Click the Show HTML <> button in the Content section.
  3. Copy and paste the relevant placement code below wherever you want the ShareThis tool to appear.
    1. Share Buttons placement code:
      <div class="sharethis-inline-share-buttons"></div>
    2. Follow Buttons placement code
      <div class="sharethis-inline-follow-buttons"></div>
How to Install ShareThis’ Tools on Shopify with Javascript Code

You can also manage the ShareThis tools on Shopify using the ShareThis Platform, instead of the Shopify App, to do this you will need to manually add the ShareThis <script> code inside the <head> of your site, simply follow the steps below:

  1. Log in or Sign up to the ShareThis Platform.
  2. Select the ShareThis tool you would like to use and activate it by clicking the Enable tool button. 
  3. Then, customize the buttons by selecting your social channels, size, and shape.
  4. Select the Activate code button in the top right corner. In the pop-up, click the Copy code button.
  5. Log in to your Shopify website.
  6. In the left navigation bar, select Online Store > Themes, and from the Actions dropdown, click Edit Code.
  7. From the different files and folders, go to Layout and click theme.liquid.
  8. Copy and paste the unique ShareThis code that you copied from step 4 into the <head> section of your website.
  9. If you are installing inline tools, you can choose between:
    • Adding Inline ShareThis tools on a product page using a Custom Liquid Block
    • Adding Inline ShareThis tools on a product page by editing the Theme Code
    • Adding Inline ShareThis tools on a page or blog

Note: Inline tools require an extra snippet of code to work on your site. If you would like to install our Inline Share Buttons or Follow Buttons, you will need to add a placement code following the options above wherever you want the tool to appear

Before customizing your theme, it’s always recommended to make a backup first, follow these instructions to duplicate the theme for a backup copy in case you want to revert the changes.

Adding Inline ShareThis tools on a product page using a Custom Liquid Block

You can use the Shopify theme editor to have a visual guide when placing the inline buttons code. Although not limited to the products page, you could follow these instructions and the video at the end to place the code on your product description.

  1. Go to your Online Store Dashboard.
  2. Click on Themes and then click on the green button that says Customize.
  3. Navigate to the page where you want the buttons to appear by clicking on the live preview.
  4. Locate your mouse in the place you want to insert the buttons, a blue small button will appear with a Add a Section label.
  5. Select Custom Liquid from the list.
  6. Copy and paste the relevant placement code in the left sidebar that just appeared.
    1. Share Buttons placement code:
      <div class="sharethis-inline-share-buttons"></div>
    2. Follow Buttons placement code:
      <div class="sharethis-inline-follow-buttons"></div>
  7. Click Save in the upper right corner.

For your convenience, here’s a preview:

Adding Inline ShareThis tools on a product page by editing the Theme Code

  1. In the left navigation bar, select Online Store > Themes and then click Actions > Edit Code.
  2. Within the left sidebar, scroll down to the Sections folder and select main-product.liquid (If you’re using an older theme, go to Templates and locate the product.liquid file). Then, find the following code:
    {{ product.description }}
    Note: You can use Control + F to search for the word “description” on it (please be sure to click on the inside of the file so you can search for content within the code editor ), try placing the buttons in a new line after the section or lines which have this name. A section/element it’s delimited with the “}” character at the end of it.

  3. Copy and paste the relevant placement code above or below your product description.
    1. Share Buttons placement code:
      <div class="sharethis-inline-share-buttons"></div>
    2. Follow Buttons placement code:
      <div class="sharethis-inline-follow-buttons"></div>

For your convenience, here’s a preview:

To add the ShareThis tool to your page or blog

  1. In the left navigation bar, select Online Store > Pages. Then, click on the page where you want to display your buttons in. 
  2. Click the Show HTML <> button in the Content section.
  3. Copy and paste the relevant placement code below wherever you want the ShareThis tool to appear.
    1. Share Buttons placement code:
      <div class="sharethis-inline-share-buttons"></div>
    2. Follow Buttons placement code
      <div class="sharethis-inline-follow-buttons"></div>
Why aren’t my buttons sharing the correct information?

Please be aware that if your site is not live or if it’s password-protected, the Facebook Crawler (and other platforms) will not be able to access the pages, and therefore, some information such as title, description, and thumbnail image won’t be able to display or it can trigger an error when sharing.