Use Twitter cards

Twitter Cards make it possible for you to attach media experiences to Tweets that link to your store content. Simply add a snippet to your theme, and visitors who Tweet your products and blog posts will have an attractive “card” added to their Tweet that will be visible to all of their followers.

Twitter cards example

Create a Twitter account

You will need a Twitter account for this. If you already have a Twitter account, then jump ahead to the next step.

  1. If you don't have a Twitter account, go to https://twitter.com/signup.

  2. Fill out the account creation form.

  3. Click on Create my account.

Create your snippet

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click on the Snippets heading to reveal the Snippets content.

    Twitter cards snippets heading
  4. Look for a snippet called twitter-cards.liquid. It's possible that your theme already contains that snippet! If it does, then you need to skip ahead to the section Submit your website to Twitter. If you don't have this snippet, let's create one now.

  5. Click on the link “Add a new snippet” right below the Snippets heading. Create a snippet called twitter-card. Use the singular form:

    Twitter cards create snippet
  6. In your new twitter-card.liquid snippet, add the code here.

  7. Save your snippet file.

  8. Still on the Edit HTML/CSS page, right under Layouts on the left, click on theme.liquid:

    Twitter cards theme liquid
  9. Locate the closing </head> tag, and right above it, add this code:

    
    {% include 'twitter-card' %}
    
    

    Like so:

    Twitter cards include snippet
  10. Save your file.

Submit your website to Twitter

Next, you will test your store's URL by validating it using the Twitter card validator.

  1. Go to your storefront, and browse to a random product page.

  2. Grab that product page URL from your browser address bar, select it then use Ctrl-C on Windows, or Cmd-C on the Mac.

  3. Head over to the Twitter Card Validator page.

  4. In the Card URL field, paste your product page URL.

  5. Click Preview card:

    Twitter card validator

Want to discuss this page?

Visit the Shopify Community