How to Add a Dynamic Social Share Image to a Shopify Theme

What’s a social share image?

Introduction

When you share a link on Facebook, you will often see an image from the website being displayed as shown below. The image is not only displayed on Facebook, but almost all social media platforms, including Twitter and Slack. This image is referred to as a social share image.

Below is an example of a social share image displayed when sharing a Wistia video on Slack, by SuperHi’s founder and CEO Rik Lomas:

Benefits of social share images

• Branding: Builds brand awareness on third-party platforms such as Facebook, Twitter, WhatsApp, and Slack.

• Click-through rate: Users are more likely to click on the link when an image is shown, as it provides context to what the link is about.

Limitations of social share images

• It’s only possible to specify the images for Facebook and Twitter. For all the other platforms, the image uploaded for Facebook is used by default.

• Since the number of social media platforms keep increasing, it’s not possible to upload an image that will render perfectly across all platforms as the image dimensions are different across all of them.

What if I don’t have a social share image?

If you don’t have any social share image in your theme, the store’s logo will be displayed as the default social share image. Keep in mind that if the only image displayed is the logo, it doesn’t provide enough context to get users to click.

Creating a dynamic global element

Although theme sections are great for adding dynamic sections that store owners can easily modify from their admin dashboards, objects within a theme section cannot be accessed from every page.

For example, in the slideshow.liquid section for the InHouse Project in SuperHi’s Shopify Theme Development course, we access and render the slides’ titles by typing {{ block.settings.title }}. However, we can only access this object within the same page that contains this section, which would be the home page.

Certain elements such as the social sharing image, favicon or social media icons are used throughout the entire site, and are not limited to a specific page of the store. Such dynamic elements that need to be accessed globally should be created in settings_schema.json in the config folder.

Creating a social share image setting

In config/settings_schema.json, the first step is to create a setting for Social media. Each settings property must have the following object properties:

• name states the name of the settings, which would be Social media in this case.

• settings contains all the different settings associated with Social media.

The name value would be displayed as the category name when you go to Online store > Theme > Customize > Theme settings

{
  "name": "Social media",
  "settings": [
    
  ]
}

Adding settings for the social share image header

Let’s begin by adding a setting for the header, which has two properties:

• type which states the type of setting used. When the type is set to header, it creates a header for a setting. They are not interactive, and serve as a separator between different types of settings as well as inform users about which category certain settings belong to.

• content which contains the heading that should be displayed in the header. In this case, the setting is specifically for the Social sharing image. We won’t be including any settings for the share buttons on the product page, so the content will be set to Social sharing image.

{
  "name": "Social media",
  "settings": [
    {
      "type": "header",
      "content": "Social sharing image"
    }
  ]
}

Adding settings for the social share image

The second setting we want to add is one that allows users to select any image they would like as the social share image.

Since users will be uploading an image, the object will have the following values for each property:

• the type is set to image_picker which allows storeowners to upload any image or select an image that was already uploaded to the store previously;

• the id can be set to any string you like, and will not be visible to storeowners. In this example, the id will be set to share_card;

• the label informs storeowners what the input field is about;

• the info is optional and contains any additional information to help storeowners understand the settings better. For example, they may not know what a social share image is, and may find this setting confusing when they come across it. A small description explaining what a social share image is would help them understand its function.

Example

{
  "name": "Social media",
  "settings": [
    {
      "type": "header",
      "content": "Social sharing image"
    },
    {
      "type": "image_picker",
      "id": "share_card",
      "label": "Image",
      "info": "This image is shown when sharing a link of the site on social media."
    }
  ]
}

Once the two setting fields, header and image_picker, have been created, the settings will be displayed as shown below to store owners.

Let’s break this down:

The SOCIAL SHARING IMAGE is the header setting.

Everything below is part of the image_picker setting, in the following order:

• Label — Image

• Info — This image is shown when sharing a link of the site on social media.

• Setting input type — Select image block

Displaying the social share image

To add a social share image, <meta> tags are used within the <head> tag. However, we want the code for the social share image to be present only if an image is uploaded. To ensure that the code is only present if a social share image is uploaded, we create an if statement in Liquid, as shown below. Since the social sharing image has an id of share_card, we access it by writing settings.share_card.

Writing {% if settings.share_card %} will check whether the social share image is present. If it is, it will run any code within the if statement.

{% if settings.share_card %}

{% endif %}

Open Graph Image

To link the image, we need to add a <meta> tag within the <head> tag. The meta tag for the image has two attributes:

• property which determines the type of property the content is;

• content which contains the actual data for the property, which would be the image url in this case.

The property should be set to og:image for the social share image, therefore the <meta> tag would be:

<meta property="og:image" content="http:{{ settings.share_card | img_url: '1200x1200' }}">

Since certain webpages require the HTTPS url, a second <meta> tag is added to display the image for the secure version. In this case, the property is set to og:image:secure_url. Therefore, the code would be:

{% if settings.share_card %}
  <meta property="og:image" content="http:{{ settings.share_card | img_url: '1200x1200' }}">
  <meta property="og:image:secure_url" content="https:{{ settings.share_card | img_url: '1200x1200' }}">
{% endif %}

Displaying a different social share image for different pages

When links to products are shared, the social share image is usually the unique product image, rather than having the same image across all pages. In this case, it’s better to display the product image rather than the default social share image. The same goes for collections and articles — where it’s nicer to display the collection or blog article image, instead of the default image.

In this case, add an if statement in Liquid to check the page type. To check the page type, we just need to check whether template.name is equal to product, article, or collection.

Product

The following code block checks whether there is any media, which includes images, videos, and 3D models. If there is one or more media present, multiple social share images may be displayed in the form of a slideshow.

To avoid having too many social share images, we can impose a limit on how many images can be displayed by adding limit: followed by the maximum number of images.

Since we want to have a maximum of 3 images to be displayed, we will add limit:3.

{% if template.name == 'product' %}
  {% if product.media.size > 0 %}

    {% for media in product.media limit:3 -%}
      <meta property="og:image" content="http:{{ media | img_url: '1200x1200' }}">
    {% endfor -%}

    {% for media in product.media limit:3 -%}
      <meta property="og:image:secure_url" content="https:{{ media | img_url: '1200x1200' }}">
    {% endfor -%}

  {% endif %}
{% endif %}

Article

The following code checks if an article image is present. If an article image is present, the article image overrides the default social share image.

{% if template.name == 'article' %}
  {% if article.image %}
    <meta property="og:image" content="http:{{ article.image | img_url: '1200x1200' }}">
    <meta property="og:image:secure_url" content="https:{{ article.image | img_url: '1200x1200' }}">
  {% endif %}
{% endif %}

Collection

The following code checks if a collection image is present. If a collection image is present, the collection image overrides the default social share image.

{% if template.name == 'collection' %}
  {% if collection.image %}
    <meta property="og:image" content="http:{{ collection.image | img_url: '1200x1200' }}">
    <meta property="og:image:secure_url" content="https:{{ collection.image | img_url: '1200x1200' }}">
  {% endif %}
{% endif %}

Putting it all together

{% if settings.share_card %}
  <meta property="og:image" content="http:{{ settings.share_card | img_url: '1200x1200' }}">
  <meta property="og:image:secure_url" content="https:{{ settings.share_card | img_url: '1200x1200' }}">
{% endif %}

{% if template.name == 'product' %}
  {% if product.media.size > 0 %}

    {% for media in product.media limit:3 -%}
      <meta property="og:image" content="http:{{ media | img_url: '1200x1200' }}">
    {% endfor -%}

    {% for media in product.media limit:3 -%}
      <meta property="og:image:secure_url" content="https:{{ media | img_url: '1200x1200' }}">
    {% endfor -%}

  {% endif %}

{% elsif template.name == 'article' %}
  {% if article.image %}
    <meta property="og:image" content="http:{{ article.image | img_url: '1200x1200' }}">
    <meta property="og:image:secure_url" content="https:{{ article.image | img_url: '1200x1200' }}">
  {% endif %}

{% elsif template.name == 'collection' %}
  {% if collection.image %}
    <meta property="og:image" content="http:{{ collection.image | img_url: '1200x1200' }}">
    <meta property="og:image:secure_url" content="https:{{ collection.image | img_url: '1200x1200' }}">
  {% endif %}

{% endif %}

Selecting social share images

There are certain requirements for social share images for both Facebook and Twitter.

Facebook

According to Facebook guidelines, the following requirements need to be met:

• the image should be smaller than 8MB in size

• the image should have a minimum dimension of 200 x 200 pixels

• for highest resolution devices such as the iPad Pro, images should have a dimension of at least 1200 x 630 pixels for optimum display

The social share image may appear in two different formats on Facebook, depending on the dimensions. If the image is smaller than 600 x 315 pixels, the image appears much smaller, like so:

If the image is larger, it’s displayed at the top as shown here:

To prevent the image from being cropped on Facebook, it’s best to use an image as close as possible to the aspect ratio 1.91:1.

Twitter

Since Twitter is more flexible with the image sizing, the images are cropped to either a 1:1 aspect ratio or a 1.91:1 aspect ratio.

Summary

Social share images are a great way to customize how links to Shopify stores appear on various social media platforms, which can improve click-through rates as well as build brand awareness. You can customize any Shopify theme to include social sharing images so that storeowners can choose a general social sharing image, as well as designate unique social share images for products, collections and articles. If no social sharing image is assigned within theme settings, the store’s logo will be displayed, which may not be the most optimal experience from a sizing or brand perspective.

So build them into your theme, and if you’re a storeowner, make sure you make use of them to create the most fully branded experience of your store. You never know who’s sharing and on which platforms!