Constraints Panel

Constraints indicate how layers/elements should respond when you resize their frames. This helps you control how designs look across different screen sizes and devices.

There are Horizontal and vertical constraints.

Horizontal constraints define how a layer behaves as you resize the frame along the x-axis.

• Left maintains the layer’s position, relative to the left side of the frame.
• Right maintains the layer’s position, relative to the right side of the frame.
• Left and right maintains the layer’s size and position relative to both sides of the frame. This may cause layers to grow or shrink along the x axis, when resized.
• Center maintains the layer’s position, relative to the horizontal center of the frame.
• Scale will define the layer’s size and position as a percentage of the frame’s dimensions. It will then maintain those proportions as you resize it.
• Relative means that these constraints depend on the relative positioning, or comparison with other layers

Vertical constraints define how a layer behaves as you resize the frame along the y-axis.

• Top maintains the layer’s position, relative to the top of the frame.
• Bottom maintains the layer’s position, relative to the bottom of the frame.
• Top and bottom maintains the layer’s size and position relative to the top and bottom of the frame. This may cause layers to grow or shrink along the y axis, when resized.
• Center maintains the layer’s position, relative to the vertical center of the frame.
• Scale will define the layer’s size and position as a percentage of the frame’s dimensions. It will then maintain those proportions as you resize it.
• Relative means that these constraints depend on the relative positioning, or comparison with other layers

Horizontal : Left Vertical: Top

Horizontal : Right Vertical: Bottom

Horizontal : Scale Vertical: Scale

Horizontal : Left and Right Vertical: Top and Bottom

Relative position

Let’s now explore the Relative feature, which enables you to create constraints based on relative positioning in comparison with other layers.

Consider a product price feed. Each price consists of three elements: currency, product cost, and payment frequency. When the price changes, it should retain its relative structure.

Let’s connect each element of the price to the data feed.

Connect payment frequency:

Connect product cost:

Connect currency:

Next, let’s set Constraints to each layer.

Let’s say we want the price to be always positioned to the right bottom corner of our creative.

First set the “per MO” text to the right bottom and also the text container – Dynamic Width and Height. In case there is more text, the container will resize.

The second price element “499” should remain adjacent to the “per MO” text, maintaining a 2px distance between them.

Set the Relative option for both horizontal and vertical axes.

For horizontal and vertical select the anchor points: left X position and bottom Y position relative to “per MO”.

For horizontal, set offset -2px, separating “499” element from the “per MO”.

The third currency element “$” should remain adjacent to the “499” text, maintaining a 2px distance between them and aligned to the top.

Set the Relative option for both horizontal and vertical axes.

For horizontal and vertical select the anchor points: left X position and top Y position relative to “499”.

For horizontal set offset -2px, separating “$” element from “499”.

Let’s see the result.

This feature is very useful for creatives connected to feeds because it ensures that ads are always well-structured and prevent elements from sliding out of place or becoming misaligned.

Publish Responsive HTML5 ads

To publish the Responsive banner always select the Responsive Width & Height option and place the AdTag/Embed code in a responsive div container on your page or use a responsive placeholder in DSP/SSP:

They provide a structured format, that allows you to organize and store various attributes associated with creative ads, such as image URLs, image files, product IDs, product descriptions, etc.

Data tables can be also used as an alternative to Google Spreadsheets for managing the dynamic data for the Feeds.

To create a new Data Table go to Data > Data Tables > click New Data Table button.

To rename your Data table click on the top menu and select Rename.

To import a CSV file, just click on Import CSV button in the top menu.

To add a new column, click on Add button and select from the dropdown menu the type of column you want to add.

To add a new row, click on Add button at the bottom left of your table.

To select a row, hover over it and click on it.

To view all the actions (like Rename, Delete, …) for a specific column, click on the drop-down arrow.

Let’s insert a new Text column on the left.

For the Text you have additional tools to fully customize it (including the Font Size).

For the image column, upload your images to your feed by clicking the Import File button or simply Drag the images directly from your PC to the Data table.

A thumbnail will be displayed for each uploaded image.

Now, let’s add a Color column.

To select a color, simply double-click inside the column, and the color picker will automatically appear.

A color thumbnail will be displayed for each added color.

Right-click to Copy/Paste/Delete color. You can also remove color by pressing Delete on your keyboard.

If you want to select more rows, select a row from the top and hold down the Shift key and select the bottom row. That selects all rows in between.

Use keyboard shortcuts to enhance productivity.

For Windows:

Undo last command – Ctrl + Z;

Redo last command – Ctrl + Shift + Z;

Cut – Ctrl + X;

Copy – Ctrl + C;

Paste – Ctrl + V.

For MacOs:

Undo last command – Cmd + Z;

Redo last command – Cmd + Shift + Z;

Cut – Cmd + X;

Copy – Cmd + C;

Paste – Cmd + V.

In this guide, we’ll walk you through the steps to protect your Google Sheets, ensuring your data remains private and secure.

Let’s begin by setting up access permissions for your Google Sheets. In the top-right corner click Share button.

Enter the email address provided by BannnerNow:

private-spreadsheets@bannernow-gcloud.iam.gserviceaccount.com

Click the Share button to share the spreadsheet. Viewer permission is sufficient. The platform will now have access to your Google Sheet based on the permissions you have set.

Let’s return to BannerNow and set up a new feed. Navigate to the Data menu, open the Feeds tab, and click on New feed.

Next, from the Data Source options select Google Spreadsheet.

In the modal:

1. input the name of your feed;

2. copy the link of your google spreadsheet and insert it in the Spreadsheet ID field;

3. check the Private Spreadsheet option.

And there you have it! Now your private Google Spreadsheet is serving as a dynamic feed source and you can easily manage and update the content displayed on your ads in real-time. Happy advertising!

*These dynamic images can be integrated with feeds, ensuring that any feed updates automatically re-render the image.

To publish a banner as a dynamic image and track impressions:

Open the Banner: Select the banner you wish to publish as an image and click the “Publish” button.

Choose the sizes you want to publish and click Next.

Select the Bannernow (Static Image) Ad network.

Choose the image format (JPG, PNG, or Auto/WEBP). Enable the retina option if you require a 2x image size.

After publishing, copy the provided image URL.

You can now use this image URL on any webpage or ad network. For instance, you might create an HTML page with an <img src= /> tag that references the dynamic image generated by BannerNow.

Let’s do a test and reload our web page a few times.

Reloading the webpage multiple times will load the dynamic image accordingly.

o verify impression tracking, access the Reporting dashboard in BannerNow. The report will display the exact number of impressions, corresponding to the number of times the dynamic image was loaded. For example, if you reload the page 7 times, the report should show 7 impressions.

This functionality allows for effective monitoring of your dynamic images performance across various platforms.

1. Let’s create a Real Estate spreadsheet document and use it as a data source for this tutorial. Add a City and Zip code columns to your feed so we can match these values to user’s data later.

2. Publish your Google document to the web ( File->Publish to the web… ).

3. Copy the Google Sheet URL from the browser tab (don’t use the one from the “publish to the web” modal).

4. Add an ID from your google sheet URL to https://gconv.bannernow.com/?id=

Note: If you want to use a specific sheet from your document then add the &sheet=2 (number of the sheet)

https://gconv.bannernow.com/?id=1Y_yMUxJHS00vUvCj1Cvd-ZqP8SMbzSdx44JxKh69OgE&sheet=2

5. This URL can now be used to create a feed on BannerNow. Don’t forget to select “Enable Targeting” checkbox.

6. Select the columns that you want to use in your ads and check “Unify results” checkbox (required for google spreadsheet). You will see the “Products” preview in the panel on the right side.

7. Now let’s add the targeting rules to our feed. Switch to Targeting tab and click “Add New Rule” button.

8. Set rule type to “Include” – means include ONLY results that match targeting rule (all other results/products will be excluded from the feed when ad is loaded).

Then select “City” in the dropdown on the left side, then cast as “String” equals and the second dropdown – attribute(column) from our feed – “city”.

This means that if user loads the Ad on some website and he is from the New York city – the Ad will try to find the product that has the attribute value that matches user’s data (product with city = New York) and all other products will be excluded from the feed.

As a result user will see the Ad with New York city real estate product that matched his geo targeting.

If none of the rules matches user’s data then feed will be not filtered and user will see the first product from the original feed.

Item visibility mode – Always. This is a default option and refers to a selected element/item that will be always visible (HTML/Fallback/Feed).

Item visibility mode – Only For HTML meaning this element will be shown in HTML5 format only and will not be visible on the Fallback GIF/MP4.

Item visibility mode – Only For Fallback. This option is the opposite of the previous one, meaning that the element will only be visible when the banner was generated as a fallback GIF/MP4. It will be hidden in HTML5 mode.

Item visibility mode – Feed Loaded & Item Feed Data Not Empty.

This option is related to Dynamic Data Feed.

Feed wasn’t loaded at all (some network error occurred) – Item visible FALSE

Feed was loaded but the data for the item is empty – Item visible FALSE

Feed was loaded and the data is not empty – Item visible TRUE

Item visibility mode – Feed Load Success.

Feed wasn’t loaded at all (some network error occurred) – Item visible FALSE

Feed was loaded but the data for the item is empty – Item visible TRUE

Feed was loaded and the data is not empty – Item visible TRUE

Item visibility mode – Feed Load Failed.

Feed wasn’t loaded at all (some network error occurred) – Item visible TRUE

Feed was loaded but the data for the item is empty – Item visible FALSE

Feed was loaded and the data is not empty – Item visible FALSE

*The feed visibility is usually used to display a fallback text or image in case there are some issues with the feed loading (network error) or when the feed data is empty. This way user will see the fallback elements instead of a broken feed banner.

Before you can create a feeded banner, you need to create a new feed, which will be used in your bannersets.

Learn how to do this:

Go to the Data > Feeds and click on the Add a New Feed button.

From Select Data Source dialog select JSON.

Fill in all the required input fields:

1. In the “FEED NAME” input the feed’s title.
2. In the “FEED URL” input the feed’s URL (XML or JSON). You”l also be able to use a Google Spreadsheet as a feed source.
3. In the “MAX ROWS” input the limit number of max results/rows.
4. Select the “UPDATE INTERVAL” – an interval that represents how often new data is fetched.
5. Click the Proceed to fields selection, to go to the next step.

 After your feed was parsed, select the data that can be accessed from inside the banner:

• Check the required fields in the left tree panel.
• The fields that you have selected will appear in the central panel (Selected Fields).
• You can use the jsonPath formula (read the documentation) if you need to select some specific data or to convert it into a different format (you can also contact us, we will gladly assist you with this). In this tutorial, we have used the UCASE({$[*].name}) formula to convert the name fields to uppercase strings. For the price_usd field we are using the NUMBER({$[*].price_usd}, ‘$0,0.00’) formula to display the price in the right format.
• You can also create a custom field manually by clicking the +Add Custom Field button.
• For the “img” custom field we will create a formula to help us to create a URL path to the image from the feed: ‘https://bannernow.com/demo/’+{$[*].id}+’.svg‘.
• Within the right panel, you’ll view the results accessible in your banners.

Use Filters:

Click the “Add New Filter” button.

You can manipulate the feed results using the following filter types: Include, Exclude, Replace, Sort, Prioritize, Remove Duplicates, URL Fallback

Here is an example:

1. Input filter title.
2. Select the Sort filter.
3. Select the filtering to sort by price.
4. Field type (string, number, date).
5. Operator (descending price).

Click the “Update/Create Feed” to save it.

Create a new bannerset.

When creating a bannerset, input the title and select the feed source from the dropdown menu. After that, click the create button.

Create a new banner.

You can use a different feed for the translated banners within the same bannerset:

• Click the Settings button in the translation modal
• Select a different feed from the dropdown
• Click the Update button

After adding the feed to your bannerset you can create a new banner (or edit an existing one). To add a feeded source to the item inside the banner, do the following:

• Select the each item
• Click on the green Feed button

Select the field that you want to display. The fixed row slider can be used in case you need to display the data from a specific row only. Click Save  to apply the feed to the item.

It’s also possible to connect the URL from the feed to the banner hyperlinks. To do this, go to canvas settings and set the feeded hyperlink to the whole banner or select an item and enable Hyperlink for it.

Select the field that contains the URL data format and click Save to apply the changes.

Save your banner and click Preview. You will notice that on each loop, the banner is taking the new data from the next row within the feed.

Now, you’re able to publish the banner to the ad network. When the feed data is updated, your banner will always display fresh data.

Showcase Example https://bannernow.com/html5-banner-examples

In this quick tutorial, we’ll cover the basics of using the Text tool, as well as advanced features.

We can access the Text tool by clicking the “Plus” button.

BannerNow comes pre-loaded with beautiful fonts so you can start designing quickly. Pick your favorite style. You can use this text as it is or customize it any way you need.

To edit an existing text element, double-click inside the text box.

At the top of the Properties panel is an alignment section that you can use to align text relative to the canvas.

Below, there is the transform section, where you can set the position: the X, the Y positions, Width, Height and Rotation.

Next, there are the Hover and Down tabs for changing the text style for mouse hover and down events.

Then, we have the Feed text connection button. It is now disabled because our creative is not connected to any feed yet. Dynamic creatives using a feed allow you to display multiple texts, as well as conduct A / B testing.

Other useful function is the drop down menu where you can select a new font. You can also type in this field to search. Let’s search for Roboto font. Below select a font style: bold, medium, regular, etc. Also, change size by pressing down/up arrow and color inside the color picker.

Above we have additional upload option. You’ll simply need a .ttf or a .otf file. After the upload, let’s type in the name of the new font to search and as you can see, it is already ready to go.

You can also change the font style, or the style of specific characters. For example, apply bold, italic or strikethrough, and if you want to reset all these changes, just click “Clear style” button.

Advanced settings includes:

Spacing – we can change the amount of space between characters;

Line Height – to change the amount of space between each line of your text;

Padding – is the space between the content and the border of our text box;

Skew – is when twist it vertically or horizontally;

Opacity – adds transparency to the text element;

RTL – means right to left text direction.

Now, let’s adjust the alignment to determine where the text should be placed within the text box. Our options are: left, center, right, top, middle, bottom.

Next, by default we have a Fixed text container, where the text will be automatically scaled to fit the container. For example, if we input more text, it will scale down inside the container.

But, we can change this behavior by setting the text alignment to Fixed Width, Dynamic Height. This allows the height of the text box to grow along with your text.

Another option is Dynamic Width and Height. Now, if I will type more text, the container will resize.

These features are super useful when preparing for the translation or for the dynamic feeded ad.

For example, I can place the text container fit to the bottom right corner, set the dynamic width and height, align it from right within the text box, vertical alignment set to bottom.

Now, if I translate this creative into a different language or connect the dynamic feed, the text will automatically scale to the left and top.

Next, let’s set a background color for the text container. It can be solid, linear or radial gradient.

We can add a stoke by editing the fill stroke, text box shadow, border size and also border radius to create nice round corners.

Also, you can set the hyperlink for the text element. The hyperlink should be always and absolute URL with the “https://…” . If your creative will be connected to a feed, you will also be able to connect the hyperlink to the feed data.

Another feature is the visibility mode. It’s usually used when you have a feeded text. For example, you can create 2 texts and display the first one only when there is the feed data; and the second one when there is no feed data as a fallback.

The ID can be used when interacting with this element via banner API.

Finally, you can save your text style as a preset, so the next time when you will add a new text, you will be able to use one of your saved text styles.

XML feeds are automatically converted to JSON format within Bannernow. You can use the default JSON path to extract data from your feed easily.

JSONPath is a special language for extracting data from XML or JSON feeds.

JSONPath uses special notation to represent nodes and their connections to adjacent nodes in a JsonPath path. There are two styles of notation, namely dot and bracket.

Both of the following paths refer to the same node from the above JSON document, which is the third element within the books field of store node under the root node.

With dot notation

$.store.books[2]

With bracket notation:

$[‘store‘][‘books‘][2]

Operators:

We have several helpful operators in JsonPath:

Root node ($): This symbol denotes the root member of a JSON structure no matter it is an object or array. Its usage examples were included in the previous sub-section.

Current node (@): Represents the node that is being processed, mostly used as part of input expressions for predicates. Suppose we are dealing with book array in the above JSON document, the expression book[?(@.price == 49.99)] refers to the first book in that array.

Wildcard (*): Expresses all elements within the specified scope. For instance, book[*] indicates all nodes inside a book array.

Let’s practice JSONPath expressions by some more examples. We start with a simple JSON structure:

{ "store": {
    "date": "Feb 9 2017",
    "book": [
      { "category": "reference",
        "author": "Nigel Rees",
        "title": "Sayings of the Century",
        "price": 8
      },
      { "category": "fiction",
        "author": "Evelyn Waugh",
        "title": "Sword of Honor",
        "price": 12
      },
      { "category": "fiction",
        "author": "Herman Melville",
        "title": "Moby Dick",
        "isbn": "0-553-21311-3",
        "price": 8
      },
      { "category": "fiction",
        "author": "J. R. R. Tolkien",
        "title": "The Lord of the Rings",
        "isbn": "0-395-19395-8",
        "price": 12
      }
    ],
    "bicycle": {
      "title": " Cool Bicycle ",
      "color": "Red",
      "price": "19.95",
      "oprice": 19.5,
      "rating": -10
    }
  }
}

JSONPath	Result
$.store.book[*].author	the authors of all books in the store
$..author	all authors
$.store.*	all things in store, which are some books and a red bicycle.
$.store..price	the price of everything in the store.
$..book[2]	the third book
$..book[(@.length-1)] $..book[-1:]	the last book in order.
$..book[0,1] $..book[:2]	the first two books
$..book[?(@.isbn)]	filter all books with isbn number
$..book[?(@.price<10)]	filter all books cheapier than 10
$..*	All members of JSON structure.

Functions:

Here’s a list of functions that can be applied to the feed in order to modify the output value. All functions can be combined (for example function 1 result + function 2 result).

Numeric Functions:

*Always use “{ }” for retrieving the value from feed

Function	Before	After
ABS({$.store.bicycle.rating})	-10	10
FLOOR({$.store.bicycle.price})	19.5	19
CEIL({$.store.bicycle.oprice})	19.5	20
ROUND({$.store.bicycle.price})	19.95	20
ADD({$.store.bicycle.price}, 1, 3, 6)	19.95	29.95
SUB({$.store.bicycle.price}, 1, 3, 6)	19.95	9.95
MUL({$.store.bicycle.price}, 2)	19.95	39.9
DIV({$.store.bicycle.price}, 5)	19.95	3.99
MOD({$.store.bicycle.price}, 3)	19.95	1.95
NUMBER({$.store.bicycle.price})	"19.95"	19.95
NUMBER(974)	974	974
NUMBER(0.12345)	0.12345	0.12345
NUMBER('10,000.12')	'10,000.12'	10000.12
NUMBER('23rd')	'23rd'	23
NUMBER('$10,000.00')	'$10,000.00'	10000
NUMBER('100B')	'100B'	100
NUMBER('3.467TB')	'3.467TB'	3467000000000
NUMBER('-76%')	'-76%'	-0.76
NUMBER('2:23:57')	'2:23:57'	NaN

String Functions:

Function	Before	After
LCASE({$.store.bicycle.color})	Red	red
UCASE({$.store.bicycle.color})	Red	RED
FCASE({$.store.bicycle.title})	Cool Bicycle	Cool bicycle
SCASE('cool bicycle. cool bicycle.')	cool bicycle. cool bicycle.	Cool bicycle. Cool bicycle.
WCASE({$.store.bicycle.title})	Cool Bicycle	Cool Bicycle
CCASE({$.store.bicycle.title})	Cool Bicycle	cool Bicycle
REPLACE({$.store.bicycle.title}, 'Cool', 'Best')	Cool Bicycle	Best Bicycle
TRIM({$.store.bicycle.title})	" Cool Bicycle "	"Cool Bicycle"
SPLIT({$.store.bicycle.title}, ' ')	" Cool Bicycle "	[ "", "Cool", "Bicycle", "" ]

Array Functions:

Use “{{ }}” instead of “{ }” to retrieve the whole Array/List

*For XML feeds only: use ARRAY() function to convert XML lists with one item to array (by default one item will be converted to a property)

Function	Before	After
WHERE({{$.store.book[*]}}, '_price', '=', '12')[0]._title	8,12,8,12	Sword of Honor
AVG({{$.store.book[*]}}, '_price')	8,12,8,12	10
MIN({{$.store.book[*]}}, '_price')[0]	8,12,8,12	8
MAX({{$.store.book[*]}}, '_price')[0]	8,12,8,12	12
SUM({{$.store.book[*]}}, '_price')	8,12,8,12	40
COUNT({{$.store.book[*]}}, '_price')	8,12,8,12	4
JOIN({{$.store.book[*]}}, '_price', '--')	8,12,8,12	8--12--8--12--10
DISTINCT({{$.store.book[*]}}, '_price')	8,12,8,12	8,12

Currency Conversion Functions:

Currency rates are pulled in realtime from http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml

Function	Before	After
CURRENCY({$.store.bicycle.price},'USD','EUR')	19.95	18.57

Number Formatting Functions:

Function	Before	After
NUMBER(10000, '0,0.0000')	10000	10,000.0000
NUMBER(10000.23, '0,0')	10000.23	10,000
NUMBER(10000.23, '+0,0')	10000.23	+10,000
NUMBER(-10000, '0,0.0')	-10000	-10,000.0
NUMBER(10000.1234, '0.000')	10000.1234	10000.123
NUMBER(100.1234, '00000')	100.1234	00100
NUMBER(1000.1234, '000000,0')	1000.1234	001,000
NUMBER(10, '000.00')	10	010.00
NUMBER(10000.1234, '0[.]00000')	10000.1234	10000.12340
NUMBER(-10000, '(0,0.0000)')	-10000	(10,000.0000)
NUMBER(-0.23, '.00')	-0.23	-.23
NUMBER(-0.23, '(.00)')	-0.23	(.23)
NUMBER(0.23, '0.00000')	0.23	0.23000
NUMBER(0.23, '0.0[0000]')	0.23	0.23
NUMBER(1230974, '0.0a')	1230974	1.2m
NUMBER(1460, '0 a')	1460	1 k
NUMBER(-104000, '0a')	-104000	-104k
NUMBER(1, '0o')	1	1st
NUMBER(100, '0o')	100	100th
FRACTION(0.25)	0.25	1/4

Currency Formatting Functions:

Function	Before	After
NUMBER(1000.234, '$0,0.00')	1000.234	$1,000.23
NUMBER(1000.2, '0,0[.]00 $')	1000.2	1,000.20 $
NUMBER(1001, '$ 0,0[.]00')	1001	$ 1,001
NUMBER(-1000.234, '($0,0)')	-1000.234	($1,000)
NUMBER(-1000.234, '$0.00')	-1000.234	-$1000.23
NUMBER(1230974, '($ 0.00 a)')	1230974	$ 1.23 m

Percentage Formatting Functions:

Function	Before	After
NUMBER(1, '0%')	1	100%
NUMBER(0.974878234, '0.000%')	0.974878234	97.488%
NUMBER(-0.43, '0 %')	-0.43	-43 %
NUMBER(0.43, '(0.000 %)')	0.43	43.000 %

Time Formatting Functions:

Function	Before	After
NUMBER(25, '00:00:00')	25	0:00:25
NUMBER(238, '00:00:00')	238	0:03:58
NUMBER(63846, '00:00:00')	63846	17:44:06

Date Formatting Functions:

Function	Before	After
DATE({$.store.date}, 'UTC:h:MM:ss TT Z')	Feb 9 2017	11:00:00 PM UTC
DATE({$.store.date}, 'fullDate')	Feb 9 2017	Thursday, February 9, 2017
DATE({$.store.date}, 'fullDate', 'ru')	Feb 9 2017	четверг, февраля 9, 2017

Named Date Formats

*Need to be passed as a second argument to DATE(…, format name):

Name	Mask	Example
default	ddd mmm dd yyyy HH:MM:ss	Sat Jun 09 2007 17:46:21
shortDate	m/d/yy	6/9/07
mediumDate	mmm d, yyyy	Jun 9, 2007
longDate	mmmm d, yyyy	June 9, 2007
fullDate	dddd, mmmm d, yyyy	Saturday, June 9, 2007
shortTime	h:MM TT	5:46 PM
mediumTime	h:MM:ss TT	5:46:21 PM
longTime	h:MM:ss TT Z	5:46:21 PM EST
isoDate	yyyy-mm-dd	2007-06-09
isoTime	HH:MM:ss	17:46:21
isoDateTime	yyyy-mm-dd'T'HH:MM:ss	2007-06-09T17:46:21
isoUtcDateTime	UTC:yyyy-mm-dd'T'HH:MM:ss'Z'	2007-06-09T22:46:21Z

Date Format Mask

*Can be combined to any format (for example HH:MM:ss)

Mask	Description
d	Day of the month as digits; no leading zero for single-digit days.
dd	Day of the month as digits; leading zero for single-digit days.
ddd	Day of the week as a three-letter abbreviation.
dddd	Day of the week as its full name.
m	Month as digits; no leading zero for single-digit months.
mm	Month as digits; leading zero for single-digit months.
mmm	Month as a three-letter abbreviation.
mmmm	Month as its full name.
yy	Year as last two digits; leading zero for years less than 10.
yyyy	Year represented by four digits.
h	Hours; no leading zero for single-digit hours (12-hour clock).
hh	Hours; leading zero for single-digit hours (12-hour clock).
H	Hours; no leading zero for single-digit hours (24-hour clock).
HH	Hours; leading zero for single-digit hours (24-hour clock).
M	Minutes; no leading zero for single-digit minutes.
MM	Minutes; leading zero for single-digit minutes.
N	ISO 8601 numeric representation of the day of the week.
o	GMT/UTC timezone offset, e.g. -0500 or +0230.
s	Seconds; no leading zero for single-digit seconds.
ss	Seconds; leading zero for single-digit seconds.
S	The date's ordinal suffix (st, nd, rd, or th). Works well with d.
l	Milliseconds; gives 3 digits.
L	Milliseconds; gives 2 digits.
t	Lowercase, single-character time marker string: a or p.
tt	Lowercase, two-character time marker string: am or pm.
T	Uppercase, single-character time marker string: A or P.
TT	Uppercase, two-character time marker string: AM or PM.
W	ISO 8601 week number of the year, e.g. 42
Z	US timezone abbreviation, e.g. EST or MDT. With non-US timezones or in the
'...', "..."	Literal character sequence. Surrounding quotes are removed.
UTC:	Must be the first four characters of the mask. Converts the date from local time to UTC/GMT/Zulu time before applying the mask. The "UTC:" prefix is removed.

Image Fallback

replace broken URLs with a fallback URL

FUNCTION	BEFORE	AFTER
URL_FALLBACK({$.store.image_url}, 'https://example.com/fallback_image.png')	https://example.com /broken_image.png	https://example.com /fallback_image.png