Introduction to Widgets
Widgets can be used to place existing content, link blocks and interactive content, anywhere on the Store. This can be useful for including more user-oriented functionalities.
Some popular widget types include:
1. Using Widgets to Position a Block
2. Recently Compared Products
3. Catalog Products List
NOTE
When adding or editing widgets on your site, ensure that you are careful as any changes will be reflected on your production site. When trying out new widgets, we recommend that you do not delete any existing widgets in case you would like to revert to your original layout.
Additionally, inserting too many directives, especially widgets like the Recently Views/Compared Products type, can negatively affect the first page load when the page is not cached. While this will not create issues in most cases, use these with caution.
Using a Widget to Position a Block
1. On the Lambda Store admin panel, navigate to Content > Elements > Widgets.
2. Click Add Widget.
3. 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.
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 relatively 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: Accept the default setting, which is set to CMS Static Block Default Template.
7. In the side panel, click Widget Options.
8. Click Select Block and choose the blow that you would like to place from the list.
9. Once you are complete, click Save.
NOTE
After creating your widget, please notify the Lambda Support team so that we can update the index and page cache.
Creating a Widget: Recently Compared Products
1. On the Lambda 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 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 relatively 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.
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 complete, click Save.
NOTE
After creating your widget, please notify the Lambda Support team so that we can update the index and page cache.
Creating a Widget: Catalog Products List
1. On the Lambda 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 relatively 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
After creating your widget, please notify the Lambda Support team so that we can update the index and page cache.
Editing a Widget
1. On the Lambda 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 Updates 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 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 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 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 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 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 container to the part of the page layout where you want to display the widget. Template: Determines the theme of the layout. |
Comments
0 comments
Article is closed for comments.