Social media - Use Twitter cards

Store Design
1

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren’t comfortable doing the steps in the 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
twitter01.jpg585×569 70.5 KB

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
    twitter02.png230×145 4.29 KB

  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
    twitter03.png620×214 10.5 KB

  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
    twitter04.png263×150 6.66 KB

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

    {% render 'twitter-card' %}

    Like so:

    twitter05.png
    twitter05.png521×131 17.4 KB

  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
    twitter06.png1001×548 59.7 KB

2

Thanks a Lot, TyW your step by step procedure really help me I have just implemented this on https://www.alphonsomango.in my store on Shopify.

My theme is the Basel theme.

Need your one more help

How to set up twitter universal website tag I am trying to add in liquid.theme but I think I am not able to get it thru.

Please help thank you in Advance and God bless you for this help

3

Hi, I actually tried the code and I’m still getting an error on the site mforia.com I took a screenshot from what woorank report. Please let me know what I can do.

Screen Shot 2020-05-26 at 7.36.15 PM.png
Screen Shot 2020-05-26 at 7.36.15 PM.png4084×2572 597 KB

4

You are the best fixed my issue without me googling other things, clear instructions :slightly_smiling_face:

5

This was so helpful! However, the image being extracted and shown in the card is the third one from my product. How can I make it show the first image?

6

It works well for the Home page however when I look to share an interior page, it doesn’t load any images. It just shows the default placeholder icon on grey background.

Any idea on how to resolve? Cheers!

7

Perfect! Perfect! Perfect! Thank you so much!