Common Elements widgets

Common Elements widgets are available on any page and provide additional functionality for your Configured Commerce website, especially the Header.

Read more about each of these widgets below.

Cart

This widget changes how your cart link displays to your customers.

• Settings
  • Show Both – Select to show both a label and an icon for the cart link.
  • Show Label Only – Select to show only the cart label.
  • Show Icon Only – Select to show only the cart icon.
• Shopping Cart Icon – Select an item from the drop-down list for the cart icon if you have chosen to show it.

Cart Approver Message

Use this widget to change the Cart Approver Message that displays. Click Save when you are done.

Currency Menu

Select whether to Show Icon.

Header Ship to Address Menu

Use this widget to edit the Ship to Address Menu that displays in the Header. Click Save when you are done.

Header Sign In

Use this widget to edit how the Sign In link displays to your customers.

• Settings
  • Both – Select to show both the label and icon for Sign In.
  • Show Label – Select to show just the label.
  • Show Icon – Select to show just the icon.
• Sign In Icon – Select your desired Sign In icon from the drop-down list.
• Include My Account Menu – Select whether to include the My Account Menu under the Sign In link. Enabling this displays options for pricing and inventory toggles:
  • Show/Hide Pricing Toggle – Let website users toggle pricing on or off with an Eye icon.
  • Show/Hide Inventory Toggle – Let website users toggle inventory on or off with an Eye icon.

    You must enable Display Pricing and Inventory in user profile settings for website users to have these icons.

Language Menu

Use this widget to display the icon for the Language menu.

Product Carousel

Use this widget to configure how the product carousel displays. This widget is also contextual, allowing you to edit what content displays, based on the size of the screen. The widget itself does not display any product content. Instead, it is the container to display a carousel of a defined group of products: Customers Also Purchased, Recently Viewed, Related Products, Top Sellers, and Web Cross Sells. You can customize each carousel type to control the number of products to display, which product data to display, and other details, depending on the carousel type.

You should run the NightlyMaintenance Job every night. This has scripts which run and assign scores to products in specific database tables developed for the widgets. It also does important cleanup tasks for the health of your ecommerce instance.

The Product Carousel has two options that use Order History to make recommendations, Customers Also Purchased, and Top Sellers. SQL Scripts run against Order History, create scores for all products, and place them into tables with the necessary category/segment/customer context. These Product Carousel options use the scores to display the correct products to customers (while still honoring product restriction groups).

• Customers Also Purchased
  • Product Detail page – References that specific product and shows corresponding products with the highest scores. If there are only a few products, use the option to show extra products from Related Products. 
  • Cart page - Looks at all products in the cart and shows the products with the highest total scores.
• Top Sellers
  • You can place this on any page and works similarly to Customers Also Purchased. During NightlyMaintenance job, Optimizely updates the TopSellers table. Products receive a score which determines the order of displayed products.
  • You can select products by specifying either categories or the segment to which that customer is assigned.
  • The Admin Console allows excluding selected products/categories from recommendations. This includes applying seasonal buying patterns. See the Category - Products section in the Admin Console.

You can only add the Top Sellers and Customers Also Purchased carousel types to specific page types if the Enable Dynamic Recommendations setting is set to Yes. See Dynamic product recommendations for more details.

• Title – Name the product carousel.
• Title Alignment – Choose if the title should align Left, Center, or Right.
• Carousel Type – Choose what type of products the carousel displays, such as Cross Sells or Top Sellers.
• Number of Products to Display – Set the number of products to display in the carousel.
• Max Number of Columns – Set the max number of columns that display in the product carousel.
• Visible Elements – Select what information to display in the product carousel:
  • Image (required)
  • Title
  • Brand Name
  • Part Numbers
  • Price
  • Add to Cart
  • Add to List
  • Image Badges
  • Text Badges
• Custom CSS (under Advanced) – Enter any additional customizations for the carousel.

Promotion Code Form

Add the Promotion Code form to the page for customers to add or remove promotions to their cart. This option is only available on the Cart page, Checkout - Shipping page, and Review and Submit page.

Purchased Products

Use this widget to display purchased products on a particular page.

• Title – Name the Purchased Products widget.
• Title Position – Choose whether to position the title Center, Left, or Right.
• Purchase Type – Choose the purchased product type, such as Recently Purchased or Frequently Purchased.
• Other options – Select what information to display in the widget:
  • Brand Name
  • Part Numbers
  • Price
  • Availability
  • Add to Cart
  • Add to List

Recent Orders

Use this widget to display a customer's recent orders.

• Number of Recent Orders Displayed – Set the number of recent orders that display to a customer.
• Advanced – Configure custom CSS for your Recent Orders widget. This is only for display CSS and is not intended for script.

Recent Quotes

Use this widget to display a customer's recent quotes.

Recent Wish Lists

Use this widget to display a customer's recent wish lists. Set how many you want to display.

Secondary Navigation

Use this widget to configure custom CSS for your secondary navigation. This is only for display CSS and is not intended for script.

• Show/Hide Pricing Toggle – Let website users toggle pricing on or off with an Eye icon.
• Show/Hide Inventory Toggle – Let website users toggle inventory on or off with an Eye icon.

You must enable Display Pricing and Inventory in user profile settings for website users to have these icons.