Use Shopify Liquid Variables as Custom Properties

Lisa Fockens Updated by Lisa Fockens

When using our Shopify app, various custom properties are available out of the box. If you want to send more custom properties to Shopify, keep reading ๐Ÿ‘‡

This guide explains how to write code in your Shopify template, to define your own custom properties.

Creating the wisepops.liquid snippet

First, let's create a file where all the code related to Wisepops will be located. This helps keeping things together.

  1. Go to your store admin interface
  2. Click Online Store > Actions > Edit code
  3. Go to the Snippets folder, and create a snippet named wisepops. It's fine to leave the file empty at this point. But it must exist before going further.
  4. Go to the Layout folder (at the top of the files list), and open theย theme.liquidย ย file.
  5. At the end of the file, before </body>, copy/paste the following line, and save:
    {% include 'wisepops' %}

You can now write Wisepops related code in wisepops.liquid.

Creating a custom property from Liquid objects

With the Shopify Liquid objects, it's easy to define your own custom properties. Let say that our store has dedicated pages for product's variants. We may want to display campaigns based on the variant's SKU, and it's stock availability.

We can add this in wisepops.liquid:

<script>
// Variant's custom properties
wisepops('properties', {
  variant: {
    available: {{ variant.available | json }},
    sku: {{ variant.sku | json }}
  }
}, {temporary: true});
</script>

Then, if we want to display a popup when the variant is out of stock, we can type the name of our custom property in the Shopify properties targeting:

You're free to use other Liquid variables in your targeting. Each Liquid variable must be declared as follows:

NameOfTheVariableInWisepops: {{ LiquidVariableName | json }},

To go further, you can learn more about custom properties, and Shopify Liquid objects.

Don't hesitate to contact our support if you have any questions!

Use Google Tag Manager Variables as Custom Properties

Set Custom Properties Based on Cookie Values

Contact