How to use Twitter Cards with Bigcommerce

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
Placing the Twitter Product Card Code in your template

1. In the Bigcommerce control panel, go to Setup & Tools › Design.

2. Click on Edit HTML/CSS.

The Edit HTMLCSS tab in the Design section

3. In the list of Other Template Files on the left, locate and click on ProductDescription.html.

ProductDescriptionhtml located in the Other Template Files list

Use Ctrl F or Command F to quickly locate template files in the list.


4. Copy the code below, and paste it into the top of the HTML code on ProductDescription.html

<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@yourtwittername">
<meta name="twitter:title" content="%%GLOBAL_ProductName%%">
<meta name="twitter:description" content="%%GLOBAL_ProductDesc%%">
<meta name="twitter:image" content="%%GLOBAL_ThumbImageURL%%">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data1" content="%%GLOBAL_ProductPrice%%">
<meta name="twitter:label2" content="Shipping">
<meta name="twitter:data2" content="%%GLOBAL_ShippingPrice%%">
<meta name="twitter:domain" content="%%GLOBAL_ShopPathNormal%%">

5. Change the @yourtwittername to your business' Twitter screen name, including the "@" symbol at the beginning. If your product description contains any javascript, photos, or videos at the beginning, your Twitter card might look a little strange. To avoid this, you can change%%GLOBAL_ProductDesc%% to %%Page.MetaDescription%% to use the meta description for your product instead.

The ProductDescriptionhtml containing the above code with changes to the twitter name and shipping cost

Don't want to show the shipping cost? You can customize what appears here by changing Shipping and %%GLOBAL_ShippingPrice%% to anything you like. For instance, you can use Brand and %%GLOBAL_BrandName%% to show the product brand, or Returns and"We offer a generous 30 day full refund for returns" to show static text about your returns. All variables must be contained in quotation marks.


6. Save your changes.

Save button in HTML Editor

Getting your card approved by Twitter

1. Go to the Twitter Card Validator and log in using your Twitter account.

Twitter Validator login page

2. Choose the Product card.

Select the product card from the list of possible Twitter cards

3. Click on the Validate & Apply tab.

The Validate and Apply tab on Twitter

4. Enter the URL of one of your products, then click Go!An example of a URL would bemystore.com/blue-jean-jacket.

The URL of a product is entered in the field

5. If there are no errors, you will see a yellow circle and a text box saying www.yourdomain.com not approved. Click Request Approval.

Box with an error that your domain has not been approved

6. A pop up will appear asking you for some further information. Fill it out, then click Request Approval.

Request Approval button

7. The form will process and then you will be informed that your request has been submitted. Twitter approval can take up to two weeks. You will receive an email as soon as you are approved.

Your request has been submitted notification

Viewing your Twitter card

Your Twitter cards will begin to show within a few hours of receiving the email from Twitter that you are approved.

1. Go to Twitter and create a new tweet using the URL of one of your products. For example, "Checkout our amazing new product! http://mystore.com/blue-jean-jacket";

Sample Tweet

2. To see your card just click the tweet to view the details.

3. Marvel at your amazing Twitter Product Card!

Sample of an amazing Twitter Product Card


Photo of Drew N

Drew N, Community Manager

  • 251,726 Points 100k badge 2x thumb

Posted 4 years ago

  • 0
  • 1

Be the first to post a reply!