Scaffolding incorporates a really useful feature for ecommerce supported by BigCommerce: Display widget.

Display widget is a feature that allows displaying text and image blocks in different parts of the Product card, the component that shows a product in the product listings, category pages, brand pages, search engine, home and product page feeds, and in Product view, the product page.

These blocks can display prices, percentage and discount amounts, arbitrary text and images, product attribute values, such as custom fields, inventory, among others. In turn, the visibility or not depends on the product values, for example, a block can be displayed if it has Sale price or if the stock is less than 5 units.

Display widgets offers a dynamic system that, without requiring technical knowledge, allows you to control where, how and even when to display not only the usual BigCommerce values: price, sale price, msrp, but also others such as prices and discounts associated with promotions, inventory, shoppability, among others.

Surely you have come across the need to announce the percentage discount applied to a product on sale, the resulting price of a product involved in an automatic BigCommerce promotion active during a period, display the code of a coupon that is applicable to the product, alert the buyer that there are few units left, or display a seal of certain regulatory compliance on certain products.

Display widget allows this and much more without any programming or application .

ToDo: Capture examples: a couple of real ones from Metro, one with a coupon, one with a text, if it can be an image better, with Hurry, limited quantities remaining.

Display widget is a feature of the Scaffolding theme so everything is done from the BigCommerce Page Builder.

There are 3 sections dedicated to this feature:

1. Display widget - Content
   Where you define the content to display and the location of the 10 blocks that Displat widget has
2. Display widget - Styles
   Where you define how they will be displayed: size, colors, image and style in general
3. Display widget - Discounts
   Where you set when and how to calculate prices and discounts that apply to product categories according to the Automatic Promotions rules of BigCommerce programmed, both for fixed or percentage discounts.

Display widget displays its blocks either on Product Card (category page, brand product, search engine, etc.) or Product View (product page), so these widgets accompany the product almost everywhere it is displayed.
 

Any of the 10 blocks that Display Widget manages can be positioned on the product image, the four corners and two central areas, or in the area destined to the price and product name, at the end of the name and below the name, and in two rows below the product name and brand .

The content to be displayed in the widget is entered in theContentfield of the corresponding block. Usually, along with the text, it is necessary to make reference to product data such as the price, to show Now $79.50 for example.

To refer to product values, Display Widget uses tokens, which is nothing more than a text enclosed in square brackets that refers to the name of an attribute or value of the product .

For example, the token corresponding to the price is {price} and to the offer price is {sale_price}.

Thus, if the content of a widget is "Now {sale_price}" and the offer price of the product is $79.50, Display widget will show "Now $79.50".

There is a multiplicity of tokens which gives Display widget a great versatility when displaying these blocks.

Among these tokens, Price tokens undoubtedly play a fundamental role .Display widget adds to BigCommerce prices (msrp, price and sale price), two more prices, dbc1 and dbc2 (discount by category 1 and 2), which complement the excellent Automatic promotions of BigCommerce, for fixed or percentage discounts applied to selected products by categories.

But it also incorporates Attribute tokens associated with product attributes, such as {stock}, {width}, {length} among others.

Finally, there are the Custom tokens, which allow to make reference to any custom field of the product, to a category, brand and even a parameter received in a url. For example, {band} could refer to a custom field Band of cell phones or {coupon} could refer to a coupon applicable to certain customers who accessed the site with a certain url.

Within these custom fields, there are image tokens, which are tokens that refer to an image loaded in the BigCommerce Image Manager. For example, {img_iso9001.png} would display an image named iso9001.png in the corresponding widget.

NOTE:Price tokens take precedence over Custom tokens and these over Attribute tokens, this means that if you have a custom field whose name is Price, it will not be displayed but instead will show the price of the product or if a custom field is named Width, it will show this value and not the value of the Width attribute of the product .

Display Widget uses two ways to identify if a block should be displayed or not: implicit and explicit.

The implicit is very simple and natural, the content "Now {sale_price}" should not appear if the product is not on sale, and that is exactly what Display Widget does , if any token of the content has no value, the content is not shown.

This applies to all tokens, for example, if you want to highlight the cell phones that comply with water resistance standards, it would be enough to assign a custom field name, for example, IP and the value of compliance. Then create a Display Widget with the content "IP Resistance: {IP}" that would be shown only in the products where {IP} has value and this will be when the product has a custom field IP.

The explicitform is required when it is not enough that the token has or does not have a value but you need to make comparisons or set other conditions. For example, to display a message if the stock is less than a certain value. In these cases the criterion is established by entering a comparison expression in the Content field itself .In the stock example just mentioned, the content "{stock}<5::Last {stock} units" would be displayed when the stock is 4 or less.


The double colon (::) is what tells Display Widget that this is a condition that must be met in order for the block to be displayed.

Usually part of the content has more relevance than the rest, for example, I want to highlight the offer price and show the previous price with less importance.

For this, the contents have 3 sections: before, middle and after and are separated simply with the characters < y >. The part of the content before < se muestra con un tamaño de font más chico a la izquierda (o arriba) de la parte central y lo mismo para el contenido que sigue a >, showing smaller to the right (or below).

Continuing with the initial example of a product on sale, the content "{price_was}Winter sale!" would show:

The Display Widgets blocks can be placed on the product image or in the product detail area.

• Product Image
  • Top Left
  • Top Center
  • Top Right
  • Bottom Left
  • Bottom Center
  • Bottom Right
• Product detail area
  • At the end of product name
  • Below product name
  • Row 1
  • Row 2 (only on Product view)

These locations are available in either Product card (the product card shown in the listings) or Product view (the product page) with the exception of Row 2 which is only shown on the product page.

ToDo: Schematic with possible locations of Product Card and Product Detail

You can create up to 5 different styles that define the format, size, colors and background that the blocks will have.
Each block is assigned a style which facilitates the reuse of the same design in more than one widget.

For each style of Display widgets you can select from the following shapes:

• Circle
• Label
• Box

ToDo: illustrate each one

DW can have up to 5 different sizes: Small, Medium, Large, Big and Full width.
These sizes will affect the area occupied by the widget but also the font size and will be automatically adapted to the size of the device.
The Full width size makes the widget occupy the full width of where it is displayed.

In the styles you can define both the font color of the text and the background color of the widget.

Also within the style, you can enter the name of an image that has been loaded in the BigCommerce Image manager which will be displayed as background.