ShopBuilder content widgets

This plugin adds 20 additional widgets to ShopBuilder.

1. Plugin installation

Installing plugins:

  1. Go to Plugins » Plugin set overview.

  2. Open the plugin set you want to edit by clicking on the line in the table.
    → The plugin set opens.

  3. Click on Add new plugin.

  4. Select ShopBuilder content widgets from the plugin list.
    → Information about ShopBuilder content widgets is displayed.

  5. Select the version you want to install from the Select version drop-down list. The newest version is selected by default.

  6. To install the plugin, click on Install.
    → The plugin is installed.
    → After installation has finished, the plugin set opens.
    → Now you can configure the plugin. To do so, proceed as described below.

  7. Open the Set priorities menu.

  8. Set the priority of ShopBuilder content widgets to 95. This assumes that Ceres and IO have the default priorities of 90 and 99 respectively. If you’ve changed the priorities of Ceres and IO, set the priority to any value in-between Ceres and IO instead.

  9. Save the priorities.

  10. Switch the plugin active ().

  11. Deploy () the plugin set.
    → If there’s a problem with saving the plugin set, click on View details to receive further information.

1.1. Plugin configuration

For this plugin to work correctly, you have to set its container links.

Setting the container links:

  1. Go to Plugins » Plugin set overview.

  2. Click on the table row of the plugin set that contains the ShopBuilder content widgets plugin.

  3. Click on the table row ShopBuilder content widgets.

  4. Go to Container links.

  5. Select all options in the area Default container links.

  6. Save () the settings.

2. Header widgets

The following widgets can only be used in the header area of a page. However, you can also use most other widgets, that are not specifically labelled as header widgets, in the header, even if they are not listed in this category.

2.1. Custom link navigation

This widget provides a link navigation that you can customise according to your needs. You can add links to categories, variations and files, as well as external links. Click Edit to carry out the widget settings.

3. Structure widgets

Structure widgets serve to structure the layout of your pages. They do not contain own content but can be filled with other widgets. Structure widgets can also be filled with other structure widgets in order to enable a large number of possible layout options.

3.1. Column widget

This widget gives you the option to structure your content in multiple columns. Add other widgets into the columns via drag-and-drop. Click Edit to carry out the widget settings.

Table 2. Settings column widget
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Color

Determines the colour of the element. To change the colours, use the Ceres design settings.

Column content layout

Determines from which position the content in the column starts. The following options are available:

  • Side by side: Content starts on the left side of the column.

  • Side by side reverse: Content starts on the right side of the column.

  • Underneath: Content starts at the top of the column.

  • Underneath reverse: Content starts at the bottom of the column.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.

4. Text

This widget category lists all widgets that process text in any form.

4.1. Article page quotation

This widget gives you the option to add a simple text and image combination to your page. Click Edit to carry out the widget settings.

Table 3. Settings article page quotation
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Image selection

Selects the image from the webspace.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.

4.2. Cards 4-8

This widget structures your content in two sections. One section contains a button. The other section contains an area for other widgets. Click Edit to carry out the widget settings.

Table 4. Settings cards 4-8
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Appearance

Determines the background colour of the element. To change the colours, use the Ceres design settings.

Button visibility

Toggles the button on or off.

Button text

Determines the text of the button label.

Button class

Determines the background colour of the button. To change the colours, use the Ceres design settings.

Button link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.

4.3. Cards 7-5

This widget structures your content in two sections. It contains an area for other widgets. Click Edit to carry out the widget settings.

Table 5. Settings cards 7-5
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Appearance

Determines the background colour of the element. To change the colours, use the Ceres design settings.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.

4.4. Image and text 4-8

This widget structures your content in two sections. One section contains a button. The other section contains an image or video. Click Edit to carry out the widget settings.

.Settings Image and text 4-8

Setting Explanation

CSS Class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Appearance

Determines the background colour of the element. To change the colours, use the Ceres design settings.

Select medium

Determines the type of the element. The following options are available:

  • Image

  • Video

Image selection

Selects the image from the webspace. For videos, the image is used as a thumbnail. If no image is selected, the widget uses the default thumbnail from Youtube.

Video URL

Contains the URL of a Youtube video.

Show button

Toggles the button on or off.

Button label

Determines the text of the button label.

Button class

Determines the background colour of the button. To change the colours, use the Ceres design settings.

Button link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the padding to Auto, it inherits the value from the element that contains the widget.

4.5. Image and text 5-7

This widget structures your content in two sections. One section contains a button. The other section contains an image or video. Click Edit to carry out the widget settings.

.Settings Image and text 5-7

Setting Explanation

CSS Class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Appearance

Determines the background colour of the element. To change the colours, use the Ceres design settings.

Select medium

Determines the type of the element. The following options are available:

  • Image

  • Video

Image selection

Selects the image from the webspace. For videos, the image is used as a thumbnail. If no image is selected, the widget uses the default thumbnail from Youtube.

Video URL

Contains the URL of a Youtube video.

Show button

Toggles the button on or off.

Button label

Determines the text of the button label.

Button class

Determines the background colour of the button. To change the colours, use the Ceres design settings.

Button link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the padding to Auto, it inherits the value from the element that contains the widget.

4.6. Image and text 6-6

This widget structures your content in two sections. One section contains a button. The other section contains an image, animation or video. Click Edit to carry out the widget settings.

.Settings Image and text 6-6

Setting Explanation

CSS Class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Appearance

Determines the background colour of the element. To change the colours, use the Ceres design settings.

Select medium

Determines the type of the element. The following options are available:

  • Image

  • Video

Image selection

Selects the image from the webspace. For videos, the image is used as a thumbnail. If no image is selected, the widget uses the default thumbnail from Youtube.

Video URL

Contains the URL of a Youtube video.

Show button

Toggles the button on or off.

Button label

Determines the text of the button label.

Button class

Determines the background colour of the button. To change the colours, use the Ceres design settings.

Button link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the padding to Auto, it inherits the value from the element that contains the widget.

4.7. Background overlap 5-7

This widget structures your content in two sections. One section contains a button. The other section contains an image or video. Click Edit to carry out the widget settings.

.Settings Background overlap 5-7

Setting Explanation

CSS Class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Appearance

Determines the background colour of the element. To change the colours, use the Ceres design settings.

Select medium

Determines the type of the element. The following options are available:

  • Image

  • Lottie

  • Video

Lottie is a file format for animations. For further information on Lottie, refer to the Lottie guide.

Image selection

Selects the image from the webspace. For videos, the image is used as a thumbnail. If no image is selected, the widget uses the default thumbnail from Youtube.

Lottie.js JSON animation file

Selects the animation file from the webspace.

Video URL

Contains the URL of a Youtube video.

Show button

Toggles the button on or off.

Button label

Determines the text of the button label.

Button class

Determines the background colour of the button. To change the colours, use the Ceres design settings.

Button link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the padding to Auto, it inherits the value from the element that contains the widget.

4.8. Background overlap 6-6

This widget structures your content in two sections. One section contains a button. The other section contains an image or video. Click Edit to carry out the widget settings.

.Settings Background overlap 6-6

Setting Explanation

CSS Class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Appearance

Determines the background colour of the element. To change the colours, use the Ceres design settings.

Select medium

Determines the type of the element. The following options are available:

  • Image

  • Lottie

  • Video

Lottie is a file format for animations. For further information on Lottie, refer to the Lottie guide.

Image selection

Selects the image from the webspace. For videos, the image is used as a thumbnail. If no image is selected, the widget uses the default thumbnail from Youtube.

Lottie.js JSON animation file

Selects the animation file from the webspace.

Video URL

Contains the URL of a Youtube video.

Show button

Toggles the button on or off.

Button label

Determines the text of the button label.

Button class

Determines the background colour of the button. To change the colours, use the Ceres design settings.

Button link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the padding to Auto, it inherits the value from the element that contains the widget.

4.9. Background overlap 7-5

This widget structures your content in two sections. One section contains a button. The other section contains an image or video. Click Edit to carry out the widget settings.

.Settings Background overlap 7-5

Setting Explanation

CSS Class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Appearance

Determines the background colour of the element. To change the colours, use the Ceres design settings.

Select medium

Determines the type of the element. The following options are available:

  • Image

  • Lottie

  • Video

Lottie is a file format for animations. For further information on Lottie, refer to the Lottie guide.

Image selection

Selects the image from the webspace. For videos, the image is used as a thumbnail. If no image is selected, the widget uses the default thumbnail from Youtube.

Lottie.js JSON animation file

Selects the animation file from the webspace.

Video URL

Contains the URL of a Youtube video.

Show button

Toggles the button on or off.

Button label

Determines the text of the button label.

Button class

Determines the background colour of the button. To change the colours, use the Ceres design settings.

Button link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the padding to Auto, it inherits the value from the element that contains the widget.

4.10. Background overlap full-size

This widget provides space for adding an image. Click Edit to carry out the widget settings.

Table 6. Settings background overlap full-size
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Image selection

Selects the image from the webspace. For videos, the image is used as a thumbnail. If no image is selected, the widget uses the default thumbnail from Youtube.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.

4.11. Background overlap Lottie

This widget structures your content in two sections. One section contains a button. The other section contains an image or animation. Click Edit to carry out the widget settings.

Table 7. Settings background overlap lottie
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Appearance

Determines the background colour of the element. To change the colours, use the Ceres design settings.

Background type

Determines the type of the background element. The following options are available:

  • Image

  • Lottie

Lottie is a file format for animations. For further information on Lottie, refer to the Lottie user guide.

Image selection (Background)

Selects the background image from the webspace.

Lottie.js JSON animation file (Background)

Selects the background animation file from the webspace.

Foreground type

Determines the type of the foreground element. The following options are available:

  • Image

  • Lottie

Lottie is a file format for animations. For further information on Lottie, refer to the Lottie user guide.

Image selection (Foreground)

Selects the foreground image from the webspace.

Lottie.js JSON animation file (Foreground)

Selects the foreground animation file from the webspace.

Button visibility

Toggles the button on or off.

Button text

Determines the text of the button label.

Button class

Determines the background colour of the button. To change the colours, use the Ceres design settings.

Button link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.

4.12. Quote image widget

This widget provides space for adding an image. Click Edit to carry out the widget settings.

Table 8. Settings quote image widget
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Alignment

Sets the alignment of the element to either left or right.

Image selection

Selects the image from the webspace.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.

5. Carousels

This widget category lists all widgets that are available for displaying carousels in your online store.

5.1. Testimonials carousel

This widget provides a carousel for testimonial cards. These cards are particular useful for customer references and the like. Click Edit to carry out the widget settings.

5.2. Module highlights carousel

This widget provides a carousel for cards. Each card can contain images, texts and links. Click Edit to carry out the widget settings.

6. Card

This widget category lists all widgets that are available for displaying your content on dedicated cards.

6.1. Logowall

This widget provides a space for displaying many images at once. Click Edit to carry out the widget settings.

Table 11. Settings logowall
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Logo

Selects the image for the logo picture from the webspace.

Link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.

6.2. Event card

This widget allows you to display the dates of important events, such as upcoming sales. Click Edit to carry out the widget settings.

Table 12. Settings event card
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Date of the event

Sets the date of the event. You can either enter the date manually in the format MM/DD/YYYY or select one from the calendar.

Time of day of the event

Sets the time of the event.

Button label

Determines the text of the button label.

CTA link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.

6.3. Video card

This widget allows to embed a Youtube video on your page. Click Edit to carry out the widget settings.

Table 13. Settings video card
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Thumbnail

Selects the image from the webspace. The image is used as a thumbnail. If no image is selected, the widget uses the default thumbnail from Youtube.

Video URL

Contains the URL of a Youtube video.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.

6.4. Universal card

This widget provides a multi-purpose card element. It can include regular text, a link or an image. Click Edit to carry out the widget settings.

Table 14. Settings universal card
Setting Explanation

CSS class

Adds custom CSS classes to the element. Use this setting if you want to customise the styling of the widget more than the other settings allow.

Appearance

Determines the background colour of the element. To change the colours, use the Ceres design settings.

Show image

Opens the image settings. This allows you to add an image to the card.

Logo

Selects the image for the logo picture from the webspace.

Image size

Determines the size of the image. The following sizes are available:

  • Full-size: Displays the images in its original size.

  • Logo-size: Displays the image scaled down.

Show icon

Opens the icon settings. This allows you to add an icon to the card.

Card icon

Determines if there’s an icon associated with the link. The following icons are available:

  • Email

  • User

  • External link

  • Arrow

  • Question mark

  • Info

  • Check

  • Exclamation mark

Icon frame

Determines whether or not there’s a circle around the icon.

Link formatting

Determines if there is a link. The following options are available:

  • No link

  • Text

  • Button

Link text

Determines the text of the button label.

Button class

Determines the background colour of the button. To change the colours, use the Ceres design settings.

Link colour

Determines the colour of the link. To change the colours, use the Ceres design settings.

Link

Determines the target of the link. The following types are available:

  • Category

  • External link

  • File (Webspace)

  • Variation ID

Check the option Open in new tab to open the target page in a new browser tab instead of the current one.

Preload image

If you activate this option, the image is prioritised when the page is loaded. You should only activate this option if you place the image in an area of the page that’s initially visible.

Lazy loading

If you activate this option, the image is only loaded when the user navigates to the image. By using lazy loading for images that aren’t initially visible, you can improve the overall loading speed of the page.

Edit padding

Determines the padding of the items the widget contains. In other words, this setting determines how far apart two items are. If you set the padding to Auto, it inherits the value from the element that contains the widget.

Edit margin

Determines the margin of the items the widget contains. In other words, this setting determines how far apart the widget is from other widgets. If you set the margin to Auto, it inherits the value from the element that contains the widget.