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.
Go to your store admin interface
Click Online Store > Actions > Edit code
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.
Go to the Layout folder (at the top of the files list), and open the
theme.liquidfile.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!