Skip to main content

Creating and Managing Widgets

Naama
Updated

Overview

Widgets can be used to place existing content, like blocks and interactive content, anywhere on your Kano Store. This can be useful for including more user-oriented functionalities. 

This article shows how to create Widgets for three use cases: 

  1. Using Widgets to Position a Block
  2. Recently Compared Products
  3. Catalog Products List

You will also find descriptors for Widget Types and Layout Options. 

Using a Widget to Position a Block

A block is a modular unit of content that can be used to display information including text, images, and embedded videos. Blocks are positioned on a page using widgets. 

  1. On the Kano Store admin panel, navigate to Content>Elements>Widgets, then click Add Widget.

  2. Under Settings, configure the following settings.

    Type:  Select the CMS Static Block.
    Design Theme:  Select an appropriate widget design theme. Ensure that it matches or is cohesive with the overall Store theme. 
  3. Once you are complete, click Continue.

  4. Under Storefront Properties, configure the following settings.

    Widget Title: Enter a descriptive title for your widget. This will only be visible for store administrators. 
    Assign to Store Views:  Select the stores where the widget will be visible.
    Sort Order:  If necessary, enter a number to determine the order this widget will appear in relative to other parts of the page.

  5. Under the Layout Updates section, click Add Layout Update.

    Display On:  Select the type of page that the widget will appear. 
    Container List: Select the area of the page layout where the widget will appear.
    Template:  Accept the default setting, which is set to CMS Static Block Default Template.
  6. In the side panel, click Widget Options.
  7. Click Select Block and choose the block that you would like to place from the list.
  8. Once you are complete, click Save. 
NOTE: Please contact your Kano Support Team if you require assistance creating or updating blocks and widgets. 

Creating a Widget: Recently Compared Products

  1. On the Kano Store admin panel, navigate to Content>Elements>Widgets.
  2. Click Add Widget.

  3. Under Settings, configure the following settings.

    Type: Select an appropriate widget type. In this case, we will select Recently Compared Products.
    Design Theme:  Select an appropriate widget design theme. Ensure that it matches or is cohesive with the overall Store theme. 
  4. Once you are complete, click Continue.

  5. Under Storefront Properties, configure the following settings.

    Widget Title: Enter a descriptive title for your widget. This will only be visible to store administrators. 
    Assign to Store Views:  Select the stores where the widget will be visible.
    Sort Order:  If necessary, enter a number to determine the order this widget will appear in relative to other parts of the page.

  6. Under the Layout Updates section, click Add Layout Update.

    Display On: Select the type of page that the widget will appear on. 
    Container List: Select the area of the page layout where the widget will appear.
    Template: If the widget is a link, select whether it would be a Block Template (which formats the content so it can be placed as a standalone unit on the page) or an Inline Template (which formats the content so it can be placed inside other content).

  7. In the side panel, click Widget Options and configure the following settings. 

    Number of Products to Display: Enter an appropriate number of products that the widget will display.
    Product Attributes to Show: Select which product attributes will be displayed alongside the products in the widget.
    Buttons to Show: Select which actions customers can complete in the widget.
  8. Once you are done, click Save.
NOTE: Please contact your Kano Support Team if you require assistance creating or updating blocks and widgets. 

Creating a Widget: Catalog Products List

  1. On the Kano Store admin panel, navigate to Content >  Elements > Widgets.
  2. Click Add Widget.

  3. Under Settings, configure the following settings.

    Type:  Select an appropriate widget type. In this case, we will select Orders and Returns.
    Design Theme:  Select an appropriate widget design theme. Ensure that it matches or is cohesive with the overall Store theme. 
  4. Once you are complete, click Continue.

  5. Under Storefront Properties, configure the following settings.

    Widget Title:  Enter a descriptive title for your widget. This will only be visible for store administrators. 
    Assign to Store Views: Select the stores where the widget will be visible.
    Sort Order:  If necessary, enter a number to determine the order this widget will appear in relative to other parts of the page.

  6. Under the Layout Updates section, click Add Layout Update.

    Display On:  Select the type of page that the widget will appear. 
    Container List:  Select the area of the page layout where the widget will appear.
    Template: If the widget is a link, select whether it would be a Block Template (which formats the content so it can be placed as a standalone unit on the page) or an Inline Template (which formats the content so it can be placed inside other content).

  7. In the side panel, click Widget Options and configure the following settings. 

    Title:  Enter an appropriate header title, such as specific product categories.
    Display Page Control: Determine whether or not you would like the widget to allow for pages or continuous scrolling. 
    Number of Products per Page:  If you have enabled Page Control, enter the number of products to be displayed per page.
    Number of Products to Display: Enter the total number of products to be displayed.
    Cache Lifetime (Seconds): Enter an appropriate time (in seconds) between widget updates.
    Conditions: Select the necessary conditions for a product to appear on the page.
  8. Once you are complete, click Save.
NOTE: Please contact your Kano Support Team if you require assistance creating or updating blocks and widgets. 

Editing a Widget

  1. On the Kano Store admin panel, navigate to Content > Elements > Widgets.
  2. After locating your desired widget, click on the Widget Name.
  3. Make any necessary edits, and click Save once you are complete.

Widget Types

When creating widgets, there are many different widget types that determine how your widget will function and the settings that need to be configured.

Type Description
CMS Hierarchy Node Link Displays a link to a specific node in the page hierarchy that can be incorporated into other content.
CMS Page Link Displays a link to a specific CMS page. Allows you to specify custom text and title. When the link is complete, it can be used in content pages and blocks.
Catalog Category Link Displays either an inline or block-style link to a selected catalog category. When the link is complete, it can be used in content pages and blocks.
Catalog Events Carousel Displays a list of upcoming catalog events.
Catalog New Products List Displays a block of products which have been designated as new for the duration of time specified in the product record. 
Catalog Product Link Displays either an inline or block-style link to a selected catalog product. When the link is complete, it can be used in content pages and blocks.
Catalog Products List Displays a list of products from the catalog.
Dynamic Blocks Rotator Can be used to display a single dynamic block, or an assortment of dynamic blocks in a series, random order, or shuffled. The dynamic block can be triggered by a price rule and placed on a specific page and location, or configured to appear on all pages.
Gift Registry Search Gives shoppers the ability to search for public gift registries by name or Registry ID.
Order by SKU Order by SKU can be displayed in the store as a convenience for all shoppers, or made available only to those in specific customer groups. Shoppers can either enter the SKU and quantity information directly into the Order by SKU block, or upload a .csv file from their customer account.
Orders and Returns Gives guests the ability to check the status of their orders and submit requests to return merchandise. The widget appears only for guests and customers who are not logged in to their accounts.
Recently Compared Products Displays the block of recently compared products. You can specify the number of products included, and format them as a list or product grid.
Recently Viewed Products Displays the block of recently viewed products. You can specify the number of products included and format them as a list or product grid.
Wish List Search Gives a customer the ability to search for publicly available wish lists by the name or email address of the wish list owner. Store customers can find wish lists that belong to other customers, view them and order products from them, or add the products to their own wish lists. 

Layout Options

Categories Description
Anchor Categories

Displays the widget on the anchor category page. Options are:

Categories: Categories where the anchor is displayed. Includes either All/Specific Categories.

Container: Set the container to the part of the page layout where you would like to display the widget.

Template: Determines the theme of the layout.
Non-Anchor Categories

Displays the widget on the non-anchor category page. Options are:

Categories: Categories where the anchor is displayed. Includes either All/Specific Categories.

Container: Set the container to the part of the page layout where you want to display the widget.

Template: Determines the theme of the layout
Products Description
All Product Types

Displays the widget on either a specific type of product page or on all product pages. Options include:

Products: Products for which the widget is displayed. Includes either All/Specific Products.

Container: Set the container to the part of the page layout where you would like to display the widget.

Template: Determines the theme of the layout.
Generic Pages Description
All Pages

Displays the widget on all pages. Options include:

Container: Set the container to the part of the page layout where you would like to display the widget.

Template: Determines the theme of the layout. 
Specified Page

Displays the widget on a specific page. Options include:

Page: Pages for which the widget is displayed.

Container: Set the container to the part of the page layout where you would like to display the widget.

Template: Determines the theme of the layout.
Page Layout

Displays the widget on pages with a certain layout. Options include:

Page: Pages for which the widget is displayed.

Container: Set the container to the part of the page layout where you want to display the widget.

Template: Determines the theme of the layout.

Related articles

Comments

0 comments

Article is closed for comments.