Google+

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

To add a Google+ button:

  1. Go to https://developers.google.com/+/web/+1button/. Select a Size, Width, and Language. Annotation can be left as "inline".

  2. Copy all the code from the text box on Google. It should look similar to this:

    Google plus 1
  3. In a new tab, open your Shopify admin.

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. Under the Layouts folder, locate and click theme.liquid to open it in the online code editor.

  3. Before the </head>, paste the code (where the 'head' section ends).

  4. Save your changes.

  5. Go back to the Google Plus page and copy this code:

    Google plus 2
  6. Back on your Edit HTML/CSS page, under the Templates folder, locate and click product.liquid to open it in the online code editor.

  7. Where you place the code is dependent on where you want to have the button display within your product page, though a safe bet would be to place it right after {{ product.description }} so that it shows up directly after your product description.

  8. Save your changes.

To see an example, visit http://daugherty-bashirian-and-cassin6306.myshopify.com/products/focused-system-worthy-graphical-user-interface.

Want to discuss this page?

Visit the Shopify Community