Skip to main content

Text

You can add a new text element by clicking on the A icon in the toolbar.

Content​

Text content options
Text content options

With the content options you can enter the text you want to display. This can either be static text or a variable. Variables are surrounded with @ (e.g. @PRICE@). These variables are then replaced with the actual value when the text is displayed on the canvas. The variables changes with the selected product.

The available variables can be found under the input field. Simply click on to add it to the input field. Some variables are using the product value directly, while others are computed values.

This means that the value is calculated based on the product value. For example, the @PRICE@ variable is a computed value. It always takes the actual price. If the product is on sale, the sale price is used. If the product is not on sale, the regular price is used.

Computed values​

  • @PRICE@ - The price of the product. If the product is on sale, the sale price is used. If the product is not on sale, the regular price is used.
  • @REGULARPRICE@ - The regular price of the product. Even though the product is on sale, the regular price is used.
  • @DISCOUNT@ - The discount of the product in units. Example: a product with a regular price of 100 and a sale price of 80 has a discount of 20.
  • @DISCOUNTINPERCENT@ - The discount of the product in percentage. Example: a product with a regular price of 100 and a sale price of 80 has a discount of 20%.

Radix​

The radix is used to format number values.

You can choose between the following options:

  • None - No formatting is applied (1000000,00).
  • Decimal point (0.1) - The number is formatted with a decimal point (1,000,000,00).
  • Decimal comma (0,1) - The number is formatted with a comma (1.000.000,00).

Show Decimals​

It's optional if you want to show decimals or not. This takes your radix into account.

Available options:

  • No - No decimals are shown (1.000.000).
  • Yes - Decimals are shown (1.000.000,00).
  • Only if needed - Decimals are shown only if needed. Whole numbers are shown without decimals (1.000.000) and numbers with decimals are shown with decimals (1.000.000,95).
  • Only if needed or dash - Decimals are shown only if needed. Whole numbers are shown with a dash (1.000.000,-) and numbers with decimals are shown with decimals (1.000.000,95).

Transform​

The transform option allows you to transform the text. You can choose between the following options:

  • None - No transform is applied.
  • Uppercase - The text is transformed to uppercase.
  • Lowercase - The text is transformed to lowercase.
  • Capitalize first - The first letter is capitalized.
  • Capitalize all - The first letter of each word is capitalized.

Rounding​

The rounding option allows you to round the number. This only has an effect if Show Decimals are set to No.

You can choose between the following options:

  • Closest - The number is rounded to the closest whole number.
  • Up - The number is rounded up to the next whole number.
  • Down - The number is rounded down to the previous whole number.

Variable Number Parsing​

caution

This is an advanced option - you probably won't need it

When we import the product data from your shop, we try to pick every value. If the value isn't known to us, we treat it as text and not a number. This means that we don't know to apply the radix and show decimals options on the variable.

This setting can be used to tell us that the variable is a number and how to parse it.

Options:

  • None - No parsing is applied.
  • Parse as 1.234,56 - The variable is parsed as a number with a decimal comma (1.234,56).
  • Parse as 1,234.56 - The variable is parsed as a number with a decimal point (1,234.56).
Example

You have an extra variable called summer_price (i.e. 1.999,95) that was imported.

To use the above options, you need to set the variable number parsing to Parse as 1.234,56. In that way you can use the radix and show decimals options on the variable.

Positioning​

Positioning
Positioning

In this panel group, you can change the position of the image. You can also change the size of the image by dragging the corners of the image.

tip

If you want to resize the element without changing the aspect ratio hold the shift key while dragging the resize handles. If you want to resize it from the center hold the option (macOS) or alt (Windows) key while dragging the resize handles.

Font​

Font options
Font options

You have full control over the font of the text. You can change the font family, font size, font weight, font style, text alignment, line height, letter spacing, padding and decoration.

Font Family​

You pick a new font by clicking on the current font name. This will open a window that allows you to search for a new font.

We have included all of the Google Fonts. You can search for a font by typing in the search field. You can also filter the fonts by their weight and style.

Font family window
Font family window

It's also possible to upload your own font. Simply click the Custom Fonts tab and either drag and drop the font file or click the Upload field.

Custom fonts window
Custom fonts window
note

When you use a custom font you need to upload all variants to be able to use them. For example, if you want to use the Roboto font with the Regular and Bold variants, you need to upload both the Roboto-Regular.ttf and Roboto-Bold.ttf files.

Alignment​

Alignment options
Alignment options

With the alignment options you can choose how the text is laid out within the text element.

Horizontal​

You can choose between the following options:

  • Left - The text is aligned to the left.
  • Center - The text is aligned to the center.
  • Right - The text is aligned to the right.
  • Justify - The text is justified (spread to fill the width).

Vertical​

You can choose between the following options:

  • Top - The text is aligned to the top.
  • Middle - The text is aligned to the middle.
  • Bottom - The text is aligned to the bottom.

Wrap​

You can choose between the following options:

  • Word - The text is wrapped on word boundaries.
  • Character - The text is wrapped on character boundaries.
  • None - The text is not wrapped.

Display​

The display option is for when you're using a background color for the text.

You can choose between the following options:

Inline​

Inline display
Inline display

Block​

Block display
Block display

Seperate lines​

Seperate lines display
Seperate lines display

Colors​

It's possible to change the color of the text, the stroke of the text and the background of the text.

You can read more about the different fill options in the Fill section.

Text fill options
Text fill options
Text stroke options
Text stroke options
Background fill options
Background fill options
Background stroke options
Background stroke options

Background Corner Radius​

If you're having display as either Block or Seperate lines you can change the corner radius of the background.

Background corner radius options
Background corner radius options

Shadow​

Shadow
Shadow

You can add a shadow to the text. You can change the color, blur, horizontal offset, vertical offset and opacity. It can be turned on and off by clicking the toggle left of the color picker.