You can define up to 5 different styles with which to display the Display Widgets blocks.

The settings for indicating shapes, sizes, colors and images with which the Display Widgets blocks will be displayed are defined below.

There are 3 forms of Display Widget: Circle, Box and Label.

Circle and Box have a fixed size that will depend on the Size chosen, Label on the other hand, expands according to the content it contains. Another aspect that differentiates them is that the 3 content areas in Circle and Box are one on top of the other, front, center and back are on the top, middle and bottom respectively of the DW while in Label, it is on the left, center and right of the DW.

ToDo: 3 images with each of the shapes.

There are 5 block sizes that essentially define the width of the display widget and the size of the text, except for the Label format which expands according to the content:

• Small: 19%
• Medium: 22% Medium: 22% Medium: 22% Medium: 22% Medium: 22% Medium: 22% Medium: 22
• Large: 25%
• Big: 45% Full: 45% Full: 100%
• Full: 100%

The full size, which uses 100% of the space, for example, on the product image would occupy the entire width of the same, is often used combined with a Background image to put a PNG image with transparency and place badges, text and any graphics in the place of the image you want, it could even be as a kind of mask that is overprinted to the product image.

The size of the texts depends on the size of the display widget and the amount of text. Display Widget automatically calculates the font size although it applies limits trying to keep the text legible.

Finally, the images that are included in the block content using the Image token are in relation to the size of the text and therefore in relation to the size of the block.

ToDo: Update images when centering issues are corrected, illustrate a full house application with a background image

This option makes the text not so small and expands in successive lines by increasing the vertical size of the block.

Defines the color of the text in the DW.

Defines the background color of the block, this color will be below the content and even below the background image if one is defined. That is, if the image has transparent parts, the color set as background will be seen in the transparent parts.

A number from 0 to 100 that defines the opacity of the DW background, 0 is totally transparent, 100 is totally opaque. Applied on a DW placed on the image it allows to create very delicate displays.

This opacity is applied on the background color and/or image.

ToDo: A couple of examples with different opacity for DW with background color and another with background image.

This option allows you to define a background image for the block. The name of the image must be entered and it must be loaded in the BigCommerce Image Manager, if no file extension is indicated, Display Widget will look for a png image with that name.

The background image basically has two purposes, to use it to decorate a block or directly to display that image in the block, in the latter case, it is usually used with Fit size to background image (next option).

For example, the image shows an application to highlight products involved in a Black Friday campaign.

ToDo: Create a graphic that leaves a space to put the price, so that the price is enclosed by the graphic, something that could be used in a campaign, for example, for Christmas.

By enabling this option, the height of the display widget block is adjusted so that the image occupies the width corresponding to the size of the chosen block, always maintaining the proportions of the image, i.e. without deforming it.

ToDo: With the Black friday image, put two widgets, one top left and one bottom right, apply a semi-transparent background so that it is clear the area covered by the block and put big to the top and medium to the bottom.

ToDo: See if it holds