How'd They Do That? Using Product and Category Elements to Build the Perfect Store

With Black Friday and Cyber Monday fast approaching, there's no better time to rethink the design of your store—especially with consumers gearing up to spend an average of $426 on 14 gifts during the 2016 holiday season. What retailer wouldn't want a slice of that spending?

Your best strategy for boosting sales is to make your store easy to navigate. We've made it simple to build a well-structured store with Product and Category elements. For example, the store for Artisan Bath & Body is divided into categories that are easy for shoppers to explore. So, if bar soaps are your thing, clicking on that category section brings up a variety of options. A handy link tree on the left navigation makes it easy for shoppers to find best sellers, accessories, a list of on-sale items and much more.

​Artisan Bath & Body's store is designed to get you to the product you want in as few clicks as possible. So how can you start taking advantage of Product and Category elements at your store? Follow along as we go behind the scenes to reveal how you can bring an online store to life.


Follow these steps to add products and category elements and build the perfect online store:

  • Step 1: Create a storefront by adding a new standard page using the left toolbar in the Editor. Choose whether you want a header.
  • Step 2: Scroll to the eCommerce section of the toolbar and click and hold the Products element and drop it on the page. A pop-up will show you all the products in your store organized by category. Select what you want to appear on your page and click "select products" when finished. (NOTE: If you've yet to add products to your store, check out our related tutorial about creating and populating a store.)
  • Step 3: Choose one of four layouts from the pop-up. When finished, click on the element to bring up a dialog box to make adjustments. You can increase or decrease the number of columns, add pagination to address overflow if you have a lot of products, fine tune the size and look of images, change the name and style of buttons, shorten or enhance descriptions, and choose how you want that information displayed on the page.
  • Step 4: Pick the Categories element and drop it on the page. Another pop-up will appear. Select the categories you want to display, choose your layout, and customize using the pop-up, just as you did with your products.

We hope this tutorial helps you build the perfect store for your eCommerce business. Have other store building ideas? Feel free to share your thoughts with us directly in the comments.

Ready to get started? Lets go.