😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up now!

Displaying Sanity content in Liquid

When you enable the option to access content from Sanity.io in your Liquid storefronts, we will sync your product, variant and collection documents from Sanity back to metafields in Shopify.

This will allow you to take advantage of Sanity’s rich authoring alongside the benefits of a Liquid storefront via a Shopify theme.

Limitations

Before choosing to implement a Liquid storefront with Sanity over a custom headless storefront, it’s important to be aware of the current limitations:

  • Content types - at present we only sync product, variant and collection documents back to Shopify. This means that the content you can render in Liquid is restricted to these types.
  • References - references created between documents in Sanity are not currently synced back to Shopify in a manner which Liquid can parse.
  • There is a 1:1 relationship between a document in Sanity and in Shopify - it’s not possible to manage a product on multiple stores from one Sanity document.

Accessing the content in Liquid

When a document is synced back to your Shopify store, we pass it to a metafield on the relevant entity:

Namespace: app--6007307--sanity

Key: published

Type: json

Value: The full document JSON object

You can then access the values in your Liquid theme as you would any other metafield. For example on a product, the below would return the JSON object (note the .value to access the metafield value which is easily overlooked):

{{ product.metafields.app--6007307--sanity.published.value }}

// You could assign this to another variable:
{% assign doc = product.metafields.app--6007307--sanity.published.value %}

You can use dot notation to access the relevant fields from your Sanity document. If, for example, you wanted to echo a string field named subtitle, your Liquid would be:

{{ product.metafields.app--6007307--sanity.published.value.subtitle }}

// or if assigned to doc
{{ doc.subtitle }}

You can use other Liquid filters and tags you usually use in your theme on these values - such as if statements, looping through arrays or applying math filters.

Portable Text

We’ve created some Liquid snippets designed to minimize the work needed to render Portable Text in Liquid. These snippets will give you a great starting point, and can easily be extended to render any custom blocks, styles, marks or list item types you have added to your Portable Text editor in Sanity.

You can find more information on implementing these in the readme of the Github repo.

Shopify asset plugin

You might also want to consider using our Shopify asset plugin, which allows you to select assets from your Shopify store in the context of your Sanity Studio, allowing you to serve assets from the Shopify CDN in your frontend. Our Liquid snippets for Portable Text also support rendering of these assets.

Was this article helpful?