You may have noticed tweets with full-width images above a text summary. Obviously, this attracts more attention. With a few tweaks, your tweets can do the same.
How to Change Twitter Image Size
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.
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.
Choose Twitter Card Type
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.
Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.
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.
