Add a Twitter button to your blog

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.

If your theme does not include a Twitter button and you want to add one, then you will need to edit your theme. Contact the designer of your theme if you're not sure if your theme already includes a Twitter button – chances are, there is a theme setting to add Tweet buttons to your blog.

If your theme doesn't have that feature:

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

  2. Under the Templates folder, locate and click article.liquid and blog.liquid to open them in the online code editor.

    Article blog liquid
  3. In blog.liquid and article.liquid — both templates will need to be edited in the same way - look for this code:

    
    {{ article.content }}
    
    

    Above the element that outputs the article content, paste the following code:

    
    <script src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>
    <div>
       <a href="https://twitter.com/share" class="twitter-share-button"
          data-url="{{ shop.url }}{{ article.url }}"
          data-via="your_screen_name"
          data-text="{{ article.title | escape }}"
          data-count="horizontal">Tweet</a>
    </div>
    
    
  4. Replace your_screen_name with your Twitter account alias, without the @. For example, Shopify's twitter account name is shopify.

  5. Save your changes.

Repeat the above procedure for both templates.

Want to discuss this page?

Visit the Shopify Community