Add text/links to images

You can add text and links/buttons to most image content elements in the Editor. This is optional, but can improve the appearance of your shop and make it look more professional.

Hover over the respective image in the preview area of the Editor and select Edit image texts.
On the different tabs, you can make the following settings:

  • Edit alternative text
    On this tab, you can set an alternative text (alt text). Alt text is important for customers who use a screen reader or if the image fails to load. For further information, refer to Define alternative texts for images.
  • Edit image texts
    On this tab, you can add text to images. For further information, refer to the section How to add text to an image.
  • Edit text design
    On this tab, you can customise the text design. For further information, refer to the section How to edit the text design.
Text settings are not available for product images and only for specific image elements in the Editor.

If the content element contains multiple images, text settings usually only apply to the selected image. To add text to multiple images, edit each image individually.

How to add text to an image

The following options are available on the second tab: Edit image texts

Example of text and button on an image

Option Description
Headline Displayed as the first line of text. Uses the largest font size.
Text Displayed below the headline in a smaller font size.
Link

If you want to add a link to your image, add it to this field.

  • If you want to link to an internal product/page, select Pages or Products. You can then select the item you want to link to.
    Alternatively, you can also enter search terms in the Enter link or search page/product field to more easily find the item you would like to link to.

    Caution

    You can also select products via the link picker that are currently set as not visible in the product settings. Products that are not visible can still be linked and accessed via their URL, but they cannot be ordered.
  • If you want to add a link to an external website, enter the desired link in the Enter link or search page/product field.

Confirm by selecting Apply link to the right of the link field.

The link is not visible on the image. Customers can select any part of the image to open it.

Open link in new tab

If you want an added link to be opened in a new tab, activate this checkbox. This is useful for external links so customers can easily return to your shop.

Show button on image

If a link is added, activate this checkbox to display a button. This makes it clear that the image is a link.

Even with a button, customers can still select any part of the image to open the link.

Button text

If you display a button, add a label to it. Use clear wording that motivates customers to select it.

Avoid wording like "Buy now," which may discourage customers. Instead, use alternatives such as "Discover now" or "View products".

How to edit the text design

The following options are available on the third tab Edit text design after text has been added to an image.

The design may vary depending on the selected theme and image element type.

Example of text design

Option Description
Text colour

Use the drop-down menu to choose from the shop colours as well as black and white. Make sure to choose a colour that contrasts well with the background to ensure the text is easy to read.

Button colour

Use the drop-down menu to choose from the shop colours as well as black and white. This option is only available if a button is displayed.

Button text is automatically set to black or white depending on the button colour.

Colour overlay

Use the drop-down menu to choose from the shop colours as well as black and white. Make sure to choose a colour that contrasts well with the text colour to ensure the text is easy to read.

In some themes and depending on the type of content element, overlay width depends on the length of the text, but only up to a predefined line break point.

Cover overlay opacity

Adjust opacity with the slider or by entering a value. Make sure to set an opacity level that provides a good contrast between the added image and the text so that the text is easy to read.

Set opacity to 0 to disable the overlay.

Set opacity to 100% to fully cover the image and create a solid text box in the chosen colour.

Was this article helpful?