Create Widgets

Widgets are reusable components that you can create and modify easily to automatically update content across your store. In this video, learn how to create and manage widgets.

Who is this video for?

  • Website managers
  • Content designers

Video content

Today, I’ll be walking through how widgets help Emergent to display real time at dynamic opportunities for their customers to interact with their store. So in order to find widgets I’m going to be here in the admin panel and I’m going to go do content and widgets. That will take me to this page that I’m looking at right now. So widgets are reusable components, snippets of code that make it possible to display a wide range of content, and place it at specific places in my store. I’m going to quickly flip over to the Commerce user guide to give you an idea of all of the different types of widgets that you can create. So ranging from allowing you to have linkages between pages in your site, to displaying new products for increasing discoverability, to allowing your customers to see what they’ve most recently viewed or compared. So you are familiar with widgets even if you aren’t familiar with that specific terminology because widgets are useful for helping engage shoppers throughout their experience and show them the most interesting content in a dynamic way. So you can use widgets to create landing pages, promotional content, interactive elements, show external reviews, et cetera. Today, we’re going to be looking at this dashboard that helps me use the widget tool to create new widgets, modify existing ones, and also delete ones that are no longer in use. So I’m going to go to this widget that I’ve already created. This is my new products list. I can see here, the type of widget that I’m creating is this new products list. I’m making sure that my theme is the one that I’m using right now. I can title it, make sure it’s assigned to the right store views. I can also look at the sort order, so this is basically, if we have multiple widgets who gets priority here in the page, and then looking at layout updates. This is giving me the ability to select where I want to display this widget. In this case, I want to show all of this list of new products on simple product pages. So increasing discoverability, perhaps people haven’t been finding our newest stuff as easily. This widget is giving me the tool to dynamically keep on showing our latest and greatest to our customers. I can choose all different product types. I can choose all pages, some pages. I can get pretty specific here with where I want to display this widget. I can also choose the container as well as the type of template that I’m going to use here. In this case, selecting whether my new products appear in a grid or in a list. I can go down to my widget options here. I can select what types of products will display, whether it’s the newly added ones or the ones that have just been marked as new. I can choose how much of the display page this widget is able to control as well as the number of products to display. When I go ahead and hit save here, I can go and check out this new page, and this is a simple product. When I’m browsing this simple product, I can now see a list of new products. So as a merchandiser, this is incredibly helpful to just show the latest and greatest to my customers, and engage them throughout their experience. I can use widgets for all different types of use cases to learn more about those different types of widgets as well as how to create and manage your widgets. You can find that information in the Commerce user guide. -

Additional resources