How to Add Auto-Generated Custom Open Graph Images to Shopify Using Bannerbear

Set up custom Open Graph image auto-generation for Shopify stores to display product information dynamically on them on social media.
by Josephine Loo · October 2022

Contents

    Being one of the top e-commerce platforms, it’s no doubt that Shopify is making online shopping easy for merchants and customers regardless of the size of the business. From small-medium businesses to big brands like GymShark, Heinz, Sephora, Fitbit, etc., more than 1.75 million businesses use Shopify.

    Setting up an online store using Shopify is easy and can be done without any coding knowledge as users can create their store in a few clicks from a list of store templates. Despite that, many modifications can be done to improve the performance of a Shopify store by doing customizations with a little bit of code and third-party services.

    In this tutorial, we’ll learn how to add auto-generated custom Open Graph images to Shopify so that product information will be displayed on the image when a product link is shared on social media.

    a screenshot of a custom Open Graph image for a Shopify store

    What Is an Open Graph Image

    The Open Graph image (OG image) or social sharing image is an image that will be displayed when you share a website on social media. If it’s not set up correctly, social media users will only see a link or a blank image on the post.

    It can be set by adding the og:image or twitter:image meta tag within a website’s <head> section:

    <meta property='og:image' content="IMG_URL" />
    

    By default, Shopify will use the featured image of a product as the Open Graph image. It should look something like this with the product name being the title:

    a screenshot of Shopify's default Open Graph image

    Using a Custom Open Graph Image

    If your website is showing an Open Graph image successfully, it would be sufficient to provide social media users with a general context about the post—it’s a post about dinnerware. However, you might have missed an opportunity to promote your product.

    Using the default Shopify Open Graph image, social media users would only know that it’s a product link or that the product is on a promotion if they click on the link. Instead of using the default image, we can use a custom Open Graph image to display information like product name, price, brand logo, etc. on it.

    With this little modification, people will be able to know that the post is not just about dinnerware but it’s a product on a promotion. Here are some examples:

    Example 1

    a Shopify custom Open Graph image with the product information on it

    Example 2

    a Shopify custom Open Graph image with the product information on it

    These custom Open Graph images can be generated for different products automatically once it’s set up and we will be using Bannerbear to do so.

    What Is Bannerbear

    Bannerbear is an automated media generation service that helps you create custom images, videos, and more using API. To generate a custom Open Graph image automatically, we will use Bannerbear’s Image Generation API.

    The Image Generation API generates custom images automatically based on a design template which you can add static and dynamic images, texts, shapes, etc. The values of the dynamic objects can be set by passing different data to the API.

    Bannerbear offers different ways to use the API. You can use HTTP requests, SDKs (Node.js, Ruby, and PHP), third-party no-code integration, etc. To create and add custom Open Graph images automatically to Shopify using Bannerbear, the easiest method is using a Simple URL.

    As Shopify’s Liquid template language allows developers to access a store’s data and add custom code easily, we can construct a Simple URL for image generation and add it to the meta tags within the <head> section.

    Adding a Custom Open Graph Image Automatically Using Bannerbear

    Step 1. Prepare a Bannerbear Design Template

    Create a new Bannerbear project and create a design template for your Open Graph image. You can design your template from scratch or duplicate the Open Graph Image Template used in this tutorial.

    As we want to display the product name/title , price , collection name, featured image , and brand logo of a product on the Open Graph image, we will need these dynamic objects in the template:

    • Text - title, price, collection
    • Image - image_container, logo_container

    a screenshot of a Bannerbear design template

    The Open Graph images will be generated automatically based on this template and the values of the dynamic objects above can be changed every time we access the Bannerbear Image Generation API using a unique URL.

    Step 2. Go to Shopify’s Theme Code Editor

    Go to “ Online Store > Themes > Actions > Edit code ” to modify your Shopify theme’s code.

    a screenshot of Shopify settings

    You should be able to see the files which belong to your current theme. The code for the meta tags will be in “Snippets > meta-tags.liquid”.

    In the “meta-tags.liquid” file, you should see that the “page image” will be used as the default Open Graph image if it is present.

    a screenshot of Shopify theme code editor

    We will edit this file to add auto-generated custom Open Graph images to the product pages. Before that, we will need to prepare a Simple URL for image generation.

    Step 3. Create a Simple URL for Image Generation

    The Simple URL used to generate an Open Graph image automatically using Bannerbear consists of an API path and multiple sets of data in the format of “layer / attribute / data”.

    To construct a Simple URL, we will need an API path that is structured like the example below:

    https://ondemand.bannerbear.com/simpleurl/<URL Base>/image
    

    The URL Base will be different for every design template and you can create one from your design template menu.

    a screenshot of a Bannerbear template menu page

    Next, we will add the title, price, collection name, featured image, and brand logo following the layer/attribute/data format. These data will be set as the values of the dynamic objects in the design template.

    title: title/text/{{ og_title | escape }}

    price: price/text/{{ product.price | money_with_currency}}

    collection: collection/text/{{ product.collections.first.title | escape }}

    image: image_container/image_url/http:{{ product.featured_image | img_url: 'master' | url_encode}}

    logo: logo_container/image_url/http:{{"logo.png" | asset_url | url_encode}}

    The values of the attributes above will be retrieved from Shopify’s Product object using the Liquid language except for the logo. You can refer to Shopify.dev documentation for more information about the Product object.

    The logo from the Brand settings cannot be accessed from the current file. To get around it, we will upload the logo to the “Assets” folder in the code editor and use it instead.

    a screenshot of Shopify theme code editor-Assets folder a screenshot of Shopify theme code editor-upload file

    Combine the API path and layer/attribute/data strings to construct the complete Simple URL:

    https://ondemand.bannerbear.com/simpleurl/emR14qkKLMzdNODAZ2/image/title/text/{{ og_title | escape }}/price/text/{{ product.price | money_with_currency}}/collection/text/{{ product.collections.first.title | escape }}/image_container/image_url/http:{{ product.featured_image | img_url: 'master' | url_encode}}/logo_container/image_url/http:{{"logo.png" | asset_url | url_encode}}
    

    As the data will be retrieved from individual products, a unique Simple URL will be created dynamically for every product, generating different custom Open Graph images automatically.

    🐻 Reminder : Make sure that the same file name is used in the Simple URL for the logo.

    Step 5. Add the Meta Tags

    Add the Simple URL to the Open Graph meta tags.

    <meta property="og:image" content="https://ondemand.bannerbear.com/simpleurl/emR14qkKLMzdNODAZ2/image/title/text/{{ og_title | escape }}/price/text/{{ product.price | money_with_currency}}/collection/text/{{ product.collections.first.title | escape }}/image_container/image_url/http:{{ product.featured_image | img_url: 'master' | url_encode}}/logo_container/image_url/http:{{"logo.png" | asset_url | url_encode}}">
     <meta property="og:image:secure_url" content="https://ondemand.bannerbear.com/simpleurl/emR14qkKLMzdNODAZ2/image/title/text/{{ og_title | escape }}/price/text/{{ product.price | money_with_currency}}/collection/text/{{ product.collections.first.title | escape }}/image_container/image_url/http:{{ product.featured_image | img_url: 'master' | url_encode}}/logo_container/image_url/http:{{"logo.png" | asset_url | url_encode}}">
     <meta property="twitter:image" content="https://ondemand.bannerbear.com/simpleurl/emR14qkKLMzdNODAZ2/image/title/text/{{ og_title | escape }}/price/text/{{ product.price | money_with_currency}}/collection/text/{{ product.collections.first.title | escape }}/image_container/image_url/http:{{ product.featured_image | img_url: 'master' | url_encode}}/logo_container/image_url/http:{{"logo.png" | asset_url | url_encode}}">
    

    Add the meta tags to the if statement which checks for a product page.

    a screenshot of Shopify theme code editor-editing the code

    As we want custom Open Graph images to be generated automatically and displayed for product pages only, add and request.page_type != 'product’ to the if statement in the screenshot below so that other non-product pages will use the default Open Graph image.

    a screenshot of Shopify theme code editor-editing the code

    Testing the Result

    The meta tags should be injected into the <head> section of your website. Click “Preview store” to view your store.

    a screenshot of Shopify theme code editor-editing the code

    You can test the Simple URL by retrieving the complete URL from the meta tag using your browser inspector.

    viewing a Shopify store's HTML code in the inspector

    When you visit the URL, you should get a custom Open Graph image generated automatically by Bannerbear based on the design template using the product information.

    a Shopify custom Open Graph image with the product information on it

    Using an Open Graph Image Tester

    If you want to make sure that the custom Open Graph image auto-generation has been set up correctly, you can use an Open Graph image tester to preview the image.

    Here are some of them that are free:

    If your Shopify store is protected with a password, you will need to use a preview link of your store so that the meta tags are accessible.

    Click “Share preview > Copy link” and paste the link onto your browser’s address bar to visit the link.

    sharing a Shopify store for preview sharing a Shopify store for preview

    The URL should include “shopifypreview” and you can use the link in your preferred Open Graph image tester to preview the image.

    a preview Shopify store

    If all the steps are followed correctly, the auto-generated custom Open Graph image should be displayed:

    a screenshot of the Facebook sharing debugger

    What’s Next

    Besides adding auto-generated custom Open Graph images, there is more you can do with Bannerbear to automate media and content generation for your Shopify store. Some of them will require some coding knowledge while some can be done completely without code.

    Regardless of your level of coding knowledge, you can follow these tutorials to implement them for your Shopify store. So make sure to check them out!👇🏻

    About the authorJosephine Loo
    Josephine is an automation enthusiast. She loves automating stuff and helping people to increase productivity with automation.

    FFmpeg 101: Top 10 Command Options You Need to Know (with Examples)

    FFmpeg is a complete, cross-platform solution to edit media files programatically. With hundreds of command options available, it is easy to feel overwhelmed. In this article, we’ll go through 10 essential FFmpeg options you should know.

    How to Create an Image Slider in HTML, CSS, and Javascript

    Many JavaScript image slider libraries are available but which is the best for your project? Instead of using an external library, let's create one from scratch using simple HTML, CSS, and JavaScript.

    6 Pro Tips for Optimizing Web Automation Using Puppeteer

    Using Puppeteer to automate web browser-related tasks is a great way to speed up your work as a developer. In this article, we have listed six tips that will help you optimize them.

    Follow the Journey

    Sign up for our once a fortnight newsletter update on new Bannerbear features and our business journey

    How to Add Auto-Generated Custom Open Graph Images to Shopify Using Bannerbear
    How to Add Auto-Generated Custom Open Graph Images to Shopify Using Bannerbear