Shopify

1. Install the official Liffery app from the Shopify app store https://apps.shopify.com/liffery/ (currently being released)
2. After installing, the app will automatically verify the domain for you. Wait for that to finish.
3. After verification, click the Install button. That’s it! Nothing else to do. Please note: there can sometimes be a short delay while the sidebar is activated. If you don’t see the sidebar straight away wait a few minutes and check again.

WordPress / WooCommerce

1. Install the official Liffery plugin from the WordPress website https://wordpress.org/plugins/liffery/
2. After installing and activating the Liffery plugin, head over to the plugin page via the WordPress settings. You will need to verify the installation by providing the installation code that can be found on the WooCommerce section of the Verification & Installation page in your business account.
3. If the verification was a success you should be able to see the Liffery Sidebar installed onto your site.

Squarespace

1. Log into your Squarespace account and select your website.
2. Open “Settings” on the left-side menu.
3. Scroll the menu down a little and choose the “Advanced” settings.
4. Choose the “Code Injection” console.
5. Insert the following code into the “Header” section:

   <!-- Liffery Sidebar -->
   <script async src="https://www.liffery.com/_/sidebar/p.js"></script>

That is it, your website will now be loading the Liffery Sidebar.

Magento

Magento is a very large and powerful platform with many options and variations of how it can be installed.

Due to the large variations and complexities in Magento, it is advisable to speak to your eCommerce site web developer.

Installation of the Liffery Sidebar requires extending the correct template on the server, for example, if you were using the default theme then:

• The magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml should be extended with the code snippet:

  <!-- Liffery Sidebar -->
  <script async src="https://www.liffery.com/_/sidebar/p.js" src_type="url"></script>

• NB: Take note of the Magento specific src_type=”url” on the script tag.

Google Tag Manager

Google Tag Manager is a great way to easily install the Liffery Sidebar. To install the Liffery Sidebar via Google Tag Manager you will need to add a custom tag.

The best way to learn how to install a Custom Tag to Google Tag Manager is to follow Google’s instructions on the topic: Google Custom Tags

Custom Tag Content:

<!-- Liffery Sidebar -->
<script async src="https://www.liffery.com/_/sidebar/p.js"></script>

Shopware 5

Shopware 5 does not require any special addons or similar for the Liffery Sidebar to be installed.

The default theme in Shopware 5 offers the ability to Embedding external resources without any additional libraries or Addons.

1. Copy the Liffery Sidebar snippet:

   <!-- Liffery Sidebar -->
   <script async src="https://www.liffery.com/_/sidebar/p.js"></script>

2. Paste into the Embedding external resources “Additional Javascript Libraries” box.
3. Press save.

That is it, your website will now be loading the Liffery Sidebar.

Shopware 6

The Liffery Sidebar on Shopware 6 is best installed as a custom script via the Custom JavaScript/CSS Manager for Shopware 6 extension. After installing this extension:

1. Copy the Liffery Sidebar code snippet to your clipboard:

   <!-- Liffery Sidebar --> <script async src="https://www.liffery.com/_/sidebar/p.js"></script>

2. Paste the snippet into the box titled “Javascript” and press save.

Universal One Liner

The manual installation of the Liffery Sidebar requires that you can add 1 script to your website.

The 1 Liner:

<!-- Liffery Sidebar -->
<script async src="https://www.liffery.com/_/sidebar/p.js"></script>

Ensure the above code snippet is added on every page you would like the sidebar to appear.

Typically this can be added to a common footer or header component of your website, but if you are unsure you can either contact the Liffery support or your web developer.

The post Installing the Liffery Sidebar appeared first on Liffery.

Before gaining access to the data from the Liffery platform or enabling the Liffery Sidebar on your site, first, you will need to verify that you own or manage the site. Verification prevents unwanted actors from gaining access to data that doesn’t rightfully belong to them.

The team at Liffery are continually expanding the coverage of app and plugins for different e-commerce platforms. However, if your site does not have a compatible Liffery app or plugin, you will have to verify your site manually… but don’t worry it is not overly complex, and if you need any help at any point of the journey, our team will be on hand to help!

The manual verification process

1. Download to your computer the verification file from the Liffery for Business app.
2. Upload the file to your platform and ensure it can be accessed from a web browser.
3. Lastly, enter the URL to the file into the Liffery for Business app, and press verify. Liffery will then attempt to read the file based on the URL you provided, and if it can be read, Liffery will consider the domain verified.

Resources

Uploading files to your website depends on the type of platform your website runs on.

Below are a few documentation links to some of the more popular platforms on how to upload files:

• Magento
• Shopify
• Shopware
• WordPress/Woocommerce

Although we advise using the official Liffery apps and plugins for Shopify and WordPress, you can also use the “One-Liner” option and manually upload the verification file to your site.

The post Uploading the Liffery verification file appeared first on Liffery.

When Liffery scrapes your website, along with all the other metadata we also aim to accurately pull out the price, if available, of the product that the person has posted.

The screenshot to the right (above on mobile) shows the most common place where someone on Liffery will see the price of a product. That is on the item card itself which is found on their dashboard, profile page, or channel page.

We support all currencies in the world and whenever possible will use the relevant currency symbol to represent the currency.

Formatting your website

To ensure that Liffery correctly gets the relevant price from your website there are two methods for structuring your data that you can use to help us.

OG Tags

Open Graph (OG) is a protocol introduced by Facebook and adopted by much of the web to standardise rich content across social media. At Liffery we also utilise OG tags. We will first look for any OG tags on a site and if available will use the data within those to make decisions. As well as type, image, description, title, you can also include your pricing data here.

The most efficient way is as so:

1. Set the og:type to “product”. This tells us unequivocally we are looking at a product which will have a price.
   • <meta property="og:type" content="product" />
2. Use the property “product:price:amount” and it’s corresponding content value to set the price.
   • <meta property="product:price:amount" content="12.50" />
3. Use the property “product:price:currency” and it’s corresponding content value to set the currency. Use the ISO 4217 international standard 3-letter currency code, e.g. GBP.
   • <meta property="product:price:currency" content="GBP" />

These 3 OG tags will guarantee we get the correct price and format it in the correct way on Liffery. The above will be £12.50. If you have set your og:type to something other than product, we also accept the properties “og:price:amount” and “og:price:currency” instead to represent your pricing data.

Please note: Any data we find in OG tags is at the highest level of hierarchy of what we find important. That is to say, if you have price data in OG tags and in JSON-LD tags, we will only keep the OG pricing data.

JSON-LD

JSON-LD (linked data) is another standardised way to represent rich data in a structured way to be used across social media. Whereas OG tags are more limited in what data you can provide but are quick to scan, JSON-LD is a little slower to scan but offers far more options for rich data. JSON-LD is formatted according to Schema.org. You can read all the available schema’s on their website; if looking at an example, be sure to select the JSON-LD tab as we don’t read RDFa or Microdata.

There are many different types of schema’s but if we find the product object we will give preference to any data found in here. It is the second highest in the hierarchy of what we find important behind OG tags.

Preferably within a product object, but can be at any level, you should include an offers object to hold your pricing data.

The pricing data looks like this where the currency is an ISO 4217 international standard 3-letter currency code:

"priceCurrency":"GBP",
"price":"27.99"

As simple as that. A full JSON-LD script tag including pricing data might look like:

<script type="application/ld+json">
{
  "@context":"https://schema.org/",
  "@type":"product",
  "offers":{
    "@type":"Offer",
    "availability":"https://schema.org/InStock",
    "url":"https://shop.liffery.com/products/organic-canvas-tote-bag",
    "priceCurrency":"GBP",
    "price":"41.05"
  },
  "productId":"6368471",
  "sku":"109222604",
  "url":"https://shop.liffery.com/products/organic-canvas-tote-bag",
  "name":"Organic Canvas Tote Bag",
  "description":"Designed with nature-approved materials, these personalized Econscious EC8040 canvas tote bags come with a 100% certified-organic cotton body and web handles.",
  "image":"https://cdn.shopify.com/s/files/1/0558/7982/7595/products/35bff1ab030890e922eeb8df09d271e0.jpg?v=1643917810",
}
</script>

The advantage of a JSON-LD tag is that the script tag can be injected anywhere on the page. It doesn’t have to be in the header. This makes it easier for Content Management Systems such as WordPress or Shopify to inject this data onto the page automatically without you needing to know how to code yourself. If your CMS is not currently doing this please get in touch with them to ask how. Or if you are managing it yourself please research how to add JSON-LD to the product pages of your chosen CMS.

Backup Price

If you do not provide OG tags containing the price or a properly structured JSON-LD script tag then Liffery will attempt to find the price in the html that we scrape. This is, however, a last resort. While we have done our best to ensure we extract the correct price, it will never be as accurate as explicitly stating the price in a structured way as per the examples above.

The post Ensuring Liffery gets the right price from your website appeared first on Liffery.

Within Liffery there are many ways in which content from your website will be presented to people. Structured data gives you control over what Liffery shows to people.

Item Cards

Item cards are the main components of Liffery. They are what people see when they log in. What they see then they view another persons profile. And what they see when they view channels.

If someone has posted a link to your website Liffery will generate the best preview of the product you are selling that we can do. This data is cached, so don’t worry, if 10,000 people post the same link to your website we will only crawl it the first time to generate the cache.

Item Detail Page

After seeing an item card, if a person likes what they see they might click on it for more detail or to interact with the poster.

Structured Data

The content showing in both the item card example and the item detail example can be controlled by you. There are two ways in which you can provide us with structured data. Both are widely used standards for providing rich content for social media and improving SEO. First by the Open Graph (OG) protocol. Second by using JSON-LD (linked data). JSON-LD is formatted according to Schema.org.

OG Tags

In the hierarchy of importance, any data in OG tags is considered to be the most important. It will supercede any data found elsewhere. The following is an example of the OG tags which would be scraped by Liffery to generate the previews used on this post.

<meta property="og:type" content="product" />
<meta property="og:title" content="Organic Canvas Tote Bag" />
<meta property="og:url" content="https://shop.liffery.com/products/organic-canvas-tote-bag" />
<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0558/7982/7595/products/35bff1ab030890e922eeb8df09d271e0.jpg?v=1643917810" />
<meta property="og:description" content="Designed with nature-approved materials, these personalized Econscious EC8040 canvas tote bags come with a 100% certified-organic cotton body and web handles. The open main compartment adds daily function with its easy-access, while the Econscious tag on the handle base is a discreet nod to this personalized tote bag being a green choice." />
<meta property="product:price:amount" content="41.05" />
<meta property="product:price:currency" content="GBP" />

These are all the OG tags you need. You can read more on price in this post here.

JSON-LD

An awful lot of data can be placed into JSON-LD script tags, and it is encouraged for SEO, but the most important object you can place in your JSON-LD for Liffery is the Product object. Liffery gives preference to the product object over any other JSON-LD type. And in the hierarchy of what we find important, it is the second highest behind OG tags.

<script type="application/ld+json">
{
  "@context":"https://schema.org/",
  "@type":"product",
  "offers":{
    "@type":"Offer",
    "availability":"https://schema.org/InStock",
    "url":"https://shop.liffery.com/products/organic-canvas-tote-bag",
    "priceCurrency":"GBP",
    "price":"41.05"
  },
  "productId":"6368471",
  "sku":"109222604",
  "url":"https://shop.liffery.com/products/organic-canvas-tote-bag",
  "name":"Organic Canvas Tote Bag",
  "description":"Designed with nature-approved materials, these personalized Econscious EC8040 canvas tote bags come with a 100% certified-organic cotton body and web handles. The open main compartment adds daily function with its easy-access, while the Econscious tag on the handle base is a discreet nod to this personalized tote bag being a green choice.",
  "image":"https://cdn.shopify.com/s/files/1/0558/7982/7595/products/35bff1ab030890e922eeb8df09d271e0.jpg?v=1643917810",
}
</script>

The main keys that we are looking for in JSON-LD are: name, description, image, url, price and priceCurrency. These keys are standard as described on Schema.org.

The advantage of a JSON-LD tag is that the script tag can be injected anywhere on the page. It doesn’t have to be in the header. This makes it easier for Content Management Systems such as WordPress or Shopify to inject this data onto the page automatically without you needing to know how to code yourself. If your CMS is not currently doing this please get in touch with them to ask how. Or if you are managing it yourself please research how to add JSON-LD to the product pages of your chosen CMS.

Backup

If we cannot find all the data we need in the structured data you provide, or you don’t provide any structured data, we will attempt to find a description and picture from the page itself.

Hierarchy of Data

The hierarchy of data is in the order of this post. OG > JSON-LD > Nothing. Any data in OG tags will be used over data found elsewhere. If we don’t find everything in the OG tags we will analyse the JSON-LD script tags you provide as well. If after going through OG and JSON-LD we still haven’t found enough data to generate a cache we will attempt to automatically find the best description and picture from the page, but there is no guarantee it will be the best description or picture.

The post Structured data and how it improves how your site looks on Liffery appeared first on Liffery.