How to Set Up Pages for Shopify
In this guide, you can read and learn about how to set up the product Pages with the Shopify platform.
For an in-depth introduction to Pages then read this guide here.
For more about API documentation for Pages then check here.
There are three different methods for how to implementing and setting up Pages:
You can read about the different methods in their individual guide.
Setup for Shopify with Pages
Shopify structures its products in another setup which is why Pages with Shopify differs a bit in the configuration of the data.
All products within Shopify are divided and organized into collections. Shopify has its own naming conventions but collections are the equivalent to what is most commonly known as either categories or hierarchies.
Shopify does not offer the possibility of having a hierarchy within a collection which means that there exist no sub-categories. Shopify’s way of creating the hierarchical relationship between these collections is by either:
Nesting to other collections through links
Filter a collection by tags
With either way of nesting through links or filtering with tags, these methods work as a way to show a subset of the collection.
Example
A collection named “Summer Dresses” could be a link to “Dresses” which has been filtered to only show “Summer Dresses” through the tag.
A product within a collection can therefore exist in multiple different collections. This is similar to the illustration explained here to understand it through a visual workflow Introduction to Pages.
Please check out Shopify's own resources and documentation:
To optimize the logic and combinations of the filters, you can either
Simple Option:
use the dynamic variable to add to your data filters.
To do that, you need to proceed to your Shopify Online Store and click on ''Themes’’.
Then click on the ''Actions'' icon and select ''Edit code'' in the dropdown menu.
Find where your collections are getting generated.
There you should insert the following HTML snippet so that your data filters are changed to:
<div id="helloretail-category-page-123456" data-filters="{ 'extraDataList.categoryIds': '{{ collection.id }}' }"></div>
Advanced Option:
Use the advanced syntax allowing you to combine filters with AND/OR logical operators to support nesting filters. This provides you with a good toolbox for some more advanced solutions, as presented below:
Case 1: Showing products on a category page from two different hierarchies. For example, all products from ‘’Shoes’’ or ‘’Shirts’’.
You have two options to do this:
A)
<div id="helloretail-category-page"-123456" data-filters='
{ "hierarchies": {$or: [["Shoes"], ["Shirts"]]} '>
</div>
B)
<div id="helloretail-category-page-123456" data-filters='
{ "$or": [
{ "hierarchies": ["Shoes"]},
{ "hierarchies": ["Shirts"]},
] } '>
</div>
Case 2: Showing products on a category page where they all belong to two hierarchies. For example, all products from ‘‘Shirts’’ and ‘’Shoes’’.
You can do either:
<div id="helloretail-category-page-123456" data-filters='
{ "hierarchies": {$and: [["Shoes"], ["Shirts"]]}
'></div>
or:
<div id="helloretail-category-page-123456" data-filters='
{
"$and": [
{ "hierarchies": ["Shoes"]},
{ "hierarchies": ["Shirts"]}
] } '></div>
For multiple levels hierarchies, it could be presented as:
<div id="helloretail-category-page-123456" data-filters='
{ "hierarchies": {$and: [["Women","Shoes"], ["Women","Shirts"]]}
'></div>
Case 3: Showing products from a specific category that are on sale. For example, all products in "Woman", and ‘’isOnSale’’ is ‘’true’’.
To do so, you can write as follows:
<div id="helloretail-category-page-123456" data-filters='
{ "hierarchies": ["Woman"], "isOnSale": "true"}
'></div>
is the same as:
<div id="helloretail-category-page-123456" data-filters='
{"$and": [
{ "hierarchies": ["Woman"]},
{ "isOnSale": "true"}
]}'
></div>
Case 4: Show all products from two different hierarchies that are on sale. For example, all products from "Shirts" or "Shoes", but only those that are on sale.
<div id="helloretail-category-page-123456" data-filters='
{
"hierarchies":
{ "$or": [["Shoes"], ["Shirts"]] },
"isOnSale": true
}
'></div>
In the example above there is an implicit AND between the hierarchies and the "isOnSale".
Case 5: Show all products that are in (brand “Nike” and "isOnSale") or in brand “NoName”
<div id="helloretail-category-page-123456" data-filters='
{
"$or": [
{
"$and":[
{ "brand": "Nike"},
{ "isOnSale": true }
]
}
{ "brand": "NoName"}
]
}'></div>