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.

Simply hover over the respective image in the preview area of the Editor and select EditCircleIcon.png.
On the different tabs, you can make the following settings:

  • Edit alternative text
    On this tab, you can set an alternative text (alt text). This is a short description of the image that helps convey its content. This 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.
The text settings are not available for product images and only for specific image elements in the Editor.

If the content element contains multiple images, the settings for the text are usually only applied to the image selected during editing. If you want to add text to multiple images in a content element, you will need to add the text to each image individually.

How to add text to an image

All of the following options can be set on the second tab: Edit image texts

Example of text and button on an image

Option Description
Headline This will be displayed as the first line of text. It has the largest font size.
Text This will be displayed below the headline. Compared to the headline, the font size is much smaller.
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. Even if a product is set as not visible, it can still be accessed via its URL. However, it can't 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 will not be visible on the image. To open the added link, customers can select any part of the image.

Open link in new tab

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

Show button on image

If you have added a link, you can activate this checkbox to show a button. This clearly signals to your customers that the image is actually a link.

Even if you have added a button, your customers can still select any part of the image to open the link.

Button text

If you have decided to show a button, you should also add a text to it. This can be anything you want. Make sure to use clear wording that motivates your customers to actually select the button.

The use of "buy", for example, could stop customers from doing so as they might be worried of accidentally making a purchase. Instead of "Buy now", you could opt for a solution like "Discover now" or "View products".

How to edit the text design

All of the following options can be set on the third tab Edit text design after you have added text to an image.

Depending on the selected theme and the type of image element, the design may vary in position and style.

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. If you don't display a button, this option is not available.

The text colour of the button is either black or white, depending on the colour of the button.

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, the width of the colour overlay depends on the length of the added text. However, the overlay only extends to a predefined point before the text breaks into a new line.

Cover overlay opacity

Set the opacity of the overlay by moving the slider or changing the number on the right-hand side. 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.

If you don't want to use the overlay, set the opacity to 0.

By selecting an opacity of 100% for the color overlay, the image will be completely covered. This way, you can easily create text boxes in different colors.

Was this article helpful?