Social media - Use Twitter cards

Community Manager
Community Manager
390 17 347

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.


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 their followers.

 

twitter01.jpg

 

 

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 Create my account.

 

Create your snippet

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Click the Snippets heading to reveal the Snippets content.

    twitter02.png

  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 Submit your website to Twitter section. 
  5. Under Snippets, click Add a new snippet. Create a snippet called twitter-card.

    twitter03.png

  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, under Layouts, click theme.liquid:

    twitter04.png

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

    {% render 'twitter-card' %}

    Like so:

    twitter05.png

  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:
    twitter06.png

 

TyW | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

1 Like