Headlines #
Managing headlines is easy with the standard setup in Content.
On the Update Content page, click Select Design to see the Headline input-field:
- Step 1: Change the text in the Headline box
- Step 2: click Update Content.
The change will be displayed immediately after when you refresh your webshop.
Dynamic text field tags #
Our standard designs use tags for setting different headlines for each Content.
These tags can be be used in any text field in Design Editor designs, and anywhere in code designs.
Tags have the syntax {{ variable }} and can have any name you choose.
Start by going to Designs and click Edit Design for the one you want to change:
On the Update Design page, insert a headline tag with {{ headline }} in the Container Code:
Click Update Design and you will be able to write a Headline from your Content tab .
You can add as many text-fields as you want, Headline is just an example.
Anything you write in Container Code with the {{ TEXT }} will be usable as an input-field from Content.
These tags can also be used in any text field in a Design Editor design
Filtering #
Dynamic filtering in snippets #
Clerk.io filters can be used directly in the embed codes using the data-filter attribute. This allows you to make dynamic filters in the logic based on variables in the webshop.
Below you’ll find a few examples, but you can use this in many other ways.
Display products that allow a free shipping limit to be reached: #
Assuming you shop has a variable called $free_shipping_limit that contains the remaining amount needed for the customer to reach the free shipping limit, you can use a dynamic filter that looks like this, to only display products above this price point:
<span class="clerk"
data-template="@complementary-to-basket"
data-filter="price > $free_shipping_limit">
</span>
Display products matching a specific gender: #
This example assumes your products has an attribute called gender that returns either female or male.
You then need a variable in your store containing the gender for the current product, which in this example is called $product_gender.
The embed code with the filter can then be setup like this:
<span class="clerk"
data-template="@Bestsellers"
data-filter="gender = $product_gender">
</span>
Display products of a specific type or brand: #
You can filter sliders to only show products from within the same category as the product that the customer is looking at.
In this case you need a list in your store containing the product categories, which we will call $categories here. The list should look like this : $categories =[1,2,3,4,5] The filter could then be setup like this:
<span class="clerk"
data-template="@type-slider"
data-filter="categories in $categories">
</span>