Properties

When you place a property on your site, it acts as a reference to certain data and will update dynamically when that information changes. For example, if you add a product title property to your page, if the title of the product changes in Shopify, it will change on your site as well.

Nyla properties allow you to access and interact with dynamic variables, and include constructs that lets you change output. See them as tags or references for data that come from a source you can drop in can use in various places on Nyla to display data, or use it in conditional logic. When entering a property, you are defining what data from the source to use at that moment. 

 

Objects output pieces of data from a source. On a page, where it is used in a content item, page setting, or conditional statement, objects are wrapped in double curly brace delimiters 

{{ }}, and look like this:

{{ product.title }} 

In the above example, product is the object, and title is a property of that object. Each object has a list of associated properties. To learn more about the product object's properties see Product

Filters are used to modify the output of numbers, strings, objects, and variables. They are placed within the output tag {{ }} , and are denoted by a pipe character |.

An example is the count array filter:

{{ collection.products | count }}

This filter gets the count of the number of items in the array. In this case, if the collection has 4 products, the output would be 4 .

See all currently available filters here: Property Filters

The most common use of a property is to display the value of that property on your site within a text field. This is done by adding the property to a Text Content Item.

An example might be to display product information on your PDP pages.

 

Properties are easy to add to a Content Block. Just use the {{ }} double bracket syntax with the property you want to display.

 

You can use text and properties within the same input. In the example below, The action of adding a product to the cart as well as the price are used both appear as the label for on a call to action, making it possible to save this into a template which will apply on a variety of product pages.

 

You can use multiple properties within the same input. Below is an example of using the Compare At Price and Price of a product in a single text input.

When you add a page source, Nyla has an option to automatically add properties to the page settings. When the page is created, the properties will be added to the settings and serve as a reference to the data.

 

You can always remove or change page settings to customize the details and slugs of your pages. An example might be to set a unique URL slug, allowing you to have multiple pages with the same product.

Conditional visibility lets you show or hide a content item or section depending on the value of a property. An example would be to show a Content Item only if a customer is logged in. Conditional visibility can also be used in more complex user interactions to show and hide content.

Properties can be used in the Grid layout item to repeat over the items in the array. Only property type arrays can be used as items that can be repeated over.

 

Use layouts to conditionally target items within an array. This lets you define unique layouts and contents for each item.