CODE

Twitter Summary Card With Large Image

ESTIMATE 2-MINUTE READ

How to Change Twitter Image Size

Pin

Nearly every Shopify theme comes with a built-in Twitter share button. I really haven’t checked them all, but it should be there as a fundamental feature.

During an ambitious phase, Twitter introduced many Twitter Card styles, like Gallery and Product cards. Currently, there is only support for four styles. The default, which Shopify developers often adopt, is the summary card. On Twitter, this appears as a small square image beside the boxed title.

Standard Twitter Card Summary

You may have noticed tweets with full-width images above the page title. Obviously, this larger image attracts more attention. With a few tweaks, your tweets from Shopify blog articles can do the same. For best results, your default image should be landscape. It will be cropped at 2:1 ratio in the center if necessary.

Twitter Card Large Image Summary

Choose Twitter Card Type

How To Create Large-Image Twitter Card

If your blog articles have large, preferably wide, images, use Summary Card with Large Image. Product pages with square images can use the standard Summary Card featuring default product image. The home page and others feature square logo on Summary Card as well. (Twitter specifications do not permit a logo or generic image on Summary Card with Large Image.)

When programming, remember: validate and default. Before including a link to the article image for Summary Card With Large Image, make certain that one exists. If not, you can use the fallback to the Summary Card with logo. So the first step is to make certain you have a logo. Then make it appear.

Prepare Your Company Logo

When your logo has the name apple-touch-icon.png and resides in the home directory, it is not only the default logo for Twitter, but it also appears on mobile devices when a user saves a bookmark to the desktop. Shopify does not provide access to the home directory.

Some themes include settings to add a social sharing image. In this case the Apple Touch Icon still provides a mobile bookmark icon. The Liquid code likely already includes logic to utilize the social media icon. If there is a chance you might not have the global theme setting, you can include a default.

{%- assign share_image = settings.share_image | default: '/apple-touch-icon.png' -%}

Edit Social Media Snippet

Shopify is an e-commerce platform on which sellers build custom websites based on themes. Each theme adheres to similar underlying structure based on programming code called Liquid.

Before making modifications to your Shopify theme, it is good to duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate and preview before activating when done.

The Liquid programming environment groups code into different categories. Snippets are bits that can be use elsewhere—perhaps multiple places without retyping code. Your theme likely includes a snippet for social media tags. The actual name is up to the developer. The snippet will include the words “twitter:card” within the code.

Beneath the conditional statement that determines whether the template is an article, change the twitter:card content type from “summary” to “summary_large_image”.

{%- if template.name == 'product' -%}
  <meta name="twitter:card" content="summary">
  [ additional code… ]
{%- elsif template.name == 'article' -%}
  <meta name="twitter:title" content="{{ article.title }}">
  <meta name="twitter:description" content="{{ article.excerpt_or_content | strip_html | truncatewords: 140, '' | escape }}">
  {%- if article.image -%}
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https:{{ article.image | img_url: '1024x', crop: 'center' }}">
  {%- else -%}
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image" content="https:{{ share_image | img_url: '600x600', crop: 'center' }}">
  {%- endif -%}

{%- elsif template.name == 'collection' -%}
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image" content="https:{{ share_image | img_url: '600x600', crop: 'center' }}">
  [ additional code… ]

If your theme does not include settings to define the social media image, you can use {{ '/apple-touch-icon.png' }} for twitter:image. Within this excerpt, notice that the code checks to see if an article image exists. If not, it defaults to the regular Summary Card. Also notice that the card type is set to “summary” for product collections and other page types.

Switching to Summary Card With Large Image takes up to a week to matriculate through Twitter servers. There is no need to replace prior tweets.

Code samples include hidden formatting characters that can interfere with operation. Paste into a text editor and reveal invisibles before pasting into Shopify theme. Replace non-breaking spaces (&nbsp;) with regular space. Remove HTML line breaks (<br />). You may also need to replace HTML less-than (&lt;) and greater-than (&gt;) with actual characters. Are you interested in more tips like this? Please indicate so within the comment field.

Kevin Williams is a Shopify Partner that has been program­ming data­base systems since 1990 and writing since 2010, before main­tain­ing an e-commerce site in Perl. Along with him, explore the Shopify platform and Liquid programming with marketing and writing tips.

Include Meaningful Comment