Shopify/made for shopify

Guide for Theme Designers

Mocra Live Links allows you to design a perfectly-formatted, high-resolution social preview image for every product, collection, blog, and marketing page of your fantastic Shopify store.

You will design your social images from within your Shopify theme, and view them on your live store.

For example, we have an example product page at https://mocralivelinks.com/livelinks/v1/designer_tests/theoodie.

To view it's Live Links Designer, add ?livelinks=1 to the end of the URL https://mocralivelinks.com/livelinks/v1/designer_tests/theoodie?livelinks=1.

This is dynamic HTML, CSS, fonts, handlebars templates, and Shopify data that is used by Mocra Live Links to produce the high resolution social preview images when your customers share your products, collections, and blog posts with their friends.

Dr Nic Williams
3h ·

I'm definitely buying another one of these.

theoodie.com

Unicorn Oodie

4
5 comments

In the rest of this article we will show you how to add Mocra Live Links to your Shopify store, and to use the Live Links Designer to iterate on your social image designs.

Example Shopify Theme

We maintain an example of the Shopify Dawn theme that has been updated with the ideas we document in this guide. You can also view the differences between Shopify Dawn and our modifications.

Installation into a Shopify Theme

It is incredibly simple to install Mocra Live Links into your Shopify Theme and to design social preview images for your products in HTML/CSS/handlebars.

Replace social meta tags

If you are modifying a high-quality Shopify theme then look for a snippet named social-meta-tags.liquid (found in Shopify Starter theme) or meta-tags.liquid (found in Shopify Dawn theme) and find where it defines og:image meta properties:

html
{%- if page_image -%}
  <meta property="og:image" content="http:{{ page_image | img_url: 'master' }}">
  <meta property="og:image:secure_url" content="https:{{ page_image | img_url: 'master' }}">
  <meta property="og:image:width" content="{{ page_image.width }}">
  <meta property="og:image:height" content="{{ page_image.height }}">
{%- endif -%}

Replace this entire snippet — including the {%- if page_image %} wrapper block — with the following:

html
<meta property="og:image" content="https://mocralivelinks.com/livelinks/v1/render.png?panelheight=480&panelwidth=917&r=300&url=https%3A%2F%2Fmocralivelinks.com%2Fdesigner-guide&v=v183?v={{ 'now' | date: '%s' }}&panelheight=480&panelwidth=917&url={{ canonical_url }}">
<meta property="og:image:height" content="480">
<meta property="og:image:width" content="917">

Ensure that your meta tags snippet file also includes the following meta tags for twitter wide-screen images. It is very common for theme developers to include this meta tag, and it is already included in the Starter and Dawn themes mentioned above.

html
<meta name="twitter:card" content="summary_large_image">

The height (480px) and width (917px) values can be changed, but the width must be 1.91 times the height. The height and width are explicitly referenced twice. If you want to change the height and width values, you will need to modify the og:image URL as well as the two dedicated meta tag properties.

Add snippet for Live Links Designer

Create a new theme snippet snippets/mocralivelinks-designer.liquid to allow you to design and test the social preview images for

html
<div data-livelinks="v1" style="display: none">
  <div></div>
</div>

It is the inner <div></div> where you will design your social preview images for each different template in your Shopify store.

Near the bottom of your theme.liquid template, anywhere before the </body> tag, inject the snippet:

html
{% render 'mocralivelinks-designer' %}

Viewing the Live Links Designer

You can now test your theme changes to Shopify and you will be able to see the Live Links Designer. You will be able to design a different layout for each different template in your store.

Using the Shopify CLI you can link your theme to a store and run the store locally:

html
shopify login --store mystore.myshopify.com
shopify theme serve

Navigate to http://127.0.0.1:9292/ to view your store.

To view the Live Links Designer, add ?livelinks=1 to the end of any URL for your store.

Navigate to http://127.0.0.1:9292/?livelinks=1 to view the Live Links Designer for your homepage.

The white panel is the image to be displayed when someone shares this page inside Facebook, Apple Messenger, Twitter or more. This is your Live Links Designer. We will add content from your Shopify store soon.

The thick dashlined line is temporary. It is displayed to indicate you can not added anything in to the panel. The background blue is configurable and exists to help you see the panel.

You can also see an example of the Live Links Designer at https://mocralivelinks.com/livelinks/v1/designer_tests/blank?livelinks=1.

Designing your common Social Preview Images

First of all, let's design the social preview image for your home page, and every other page in your store that you do not want to design an individual preview image for.

Replace the contents of your mocralivelinks-designer.liquid snippet with the code below. It will place your shop name in the center, in front of a placeholder image.

html
<div data-livelinks="v1" style="display: none">
  <div style="position: relative; background: white; text: black;">
    <div style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">
      {{ 'lifestyle-1' | placeholder_svg_tag: 'h-full' }}
    </div>
    <div style="display: flex; align-items: center; justify-content: center; height: 100%; width: 100%;">
      <h1 style="font-size: 8rem; background: white; padding: 2rem; z-index: 10;">
        {{ shop.name | escape }}
      </h1>
    </div>
  </div>
</div>

The example above is using inline CSS. In your own designs you will apply CSS using a utility CSS library like Tailwind CSS, or your bespoke CSS files.

The Live Links Designer will update to look similar to:

You have now designed your own Live Links social preview image. If you were you deploy this to your production Shopify store, and then shared any URL from your application on any social app, then this image will be the social preview image that is displayed.

Dr Nic Williams
3h ·

Check out the image when you share my shop URL!

myshopisawesome.com

My Shop is Awesome

2
11 comments

If you're reading along without your own Shopify store, you can see an example page that contains this Live Links design embedded in its HTML; and also the Live Links Designer for the same page is here.

Designing social preview images for product pages

Product pages are one of the first places you should customize your Live Links design. Your customers and prospects will share your products on social media, and you want to make sure they are sharing your brand, good product images, social proof, and a call to action.

The social preview image for your product pages is probably why you were interested in Mocra Live Links in the first place. Hopefully by now you have a sense of what we can do to generate a unique social preview image for every unique product.

One reason we allow you to design your social preview images inside your Shopify theme is so you have direct access to your existing fonts, images, stylesheets, and Shopify data.

It also allows you to use Shopify liquid objects and helpers to determine what template you are using on the current page, thus what design and content should go inside the Live Links designer. Inside the panel <div> we can use liquid conditionals to determine if we are on a product page, a collection page, or any other page:

html
<div data-livelinks="v1" style="display: none">
  {% if template == "product" %}
    <div>
      {{ product.title | escape }}
    </div>
  {% elsif template == "collection" %}
    <div>
      {{ collection.title | escape }}
    </div>
  {% else %}
    <div>
      {{ shop.name | escape }}
    </div>
  {% endif %}
</div>

Each {% if %} block contains its own Live Links designer panel <div> which allows you to customize the social preview image for each type of page within your Shopify store.

There is no "one way" to design your social preview images. Your CSS, fonts, and layout preferences are unique to your Shopify store. In the examples above we used inline styles, and in the examples below we are using Tailwind CSS utility classes. You do not need to use Tailwind CSS to design your social preview images, instead can craft your own CSS, use inline styles, or use any other CSS framework you wish.

Inside the {% if template == "product" %} conditionals below we can describe a Live Links social preview image for everyone product in your shop. This example design includes the product title and pricing information.

html
<div data-livelinks="v1" style="display: none">
  {% if template == "product" %}
    <div class="bg-white">
      <div class="grid grid-cols-12 h-full">
        <div class="flex col-span-7 justify-center items-center">
          <img
            class="object-cover"
            src="{{ product.featured_image | img_url: '480x480' }}"
            width="480"
            height="480"
            loading="lazy"
          />
        </div>
        <div class="flex col-span-5 justify-center items-center">
          <div>
            <h1 class="text-6xl">
              {{ product.title | escape }}
            </h1>
            <div>
              {%- render 'price', product: product, price_class: 'text-5xl mt-10' -%}
            </div>
          </div>
        </div>
      </div>
    </div>
  {% else %}
    <div>
      ... see title example above ...
    </div>
  {% endif %}
</div>

The example above assumes Tailwind CSS utility classes are available to the theme, which provides grid classes to place the image on the left, and the product title and price on the right.

We also show above that we can use existing snippets from your Shopify theme in your Live Links designer, such as a pre-existing {% render 'price' %} snippet.

To see this example in the Live Links Designer, view https://mocralivelinks.com/livelinks/v1/designer_tests/designer-guide-product?livelinks=1.

In Facebook, the rendered image will look similar to:

Dr Nic Williams
3h ·

Two grid columns, with primary image on the left and product title on the right.

theoodie.com

My awesome product

4
5 comments

Dynamic stylesheets

We support dynamically enabling stylesheets when Live Links designer is running.

The following example will load Tailwind CSS into the browser only when Live Links designer is running.

html
<link
  disabled
  class="livelinks-onload"
  href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css"
  rel="stylesheet"
/>

Developing theme outside of Shopify Admin

Normally users of your Shopify theme will first activate Mocra Live Links via the Shopify App marketplace, and the JavaScript will be dynamically injected into each page via Scripttags.

You can manually inject the Live Links JavaScript into your theme during development, by using the following snippet:

html
<script async src="https://mocralivelinks.com/livelinks/v1/designer/installer.js"></script>

Browser support

There is only one browser that supports your social preview image and that is the latest version of Chromium. We use Chromium to load each page of your Shopify store, to render the social preview image HTML/CSS, and take a screenshot at the resolution you request.

© 2021 Mocra Pty Ltd
"JB Hi-fi" logo is a trademark of JB Hi-Fi Limited. "the Oodie" logo is a trademark of Davie Group Trading (Australia) Pty Ltd.