🔍

Product Listing Atom

Before we get started, you'll of course want some Product objects to list out. If you've already done so, continue reading; if not, read about Product objects in this help resource.

When you create a Product Listing atom on a page, the following details window will appear:

The first thing you'll notice is the Order Type field. You'll be putting in the same object in this field for your Product Listing, Basket and Shopping Cart atoms, as all your customer's orders will go through this Order Type object. It's the base of your selling system - keep it handy! To make an Order Type object see the relevant [help resource].

Just below this are the Listing View Settings. You'll configure these to change the layout of the products list. Here's what each field does:

  • Products Root - in this field you select the place (parent object) of your products. Make sure to keep the products you wish to list out in the same place - that way you don't have to make multiple different Product Listing atoms on one page.
  • Listing Mode - the layout of your list. The two options available are Detailed List (for a top-down list displaying details such as the product description and available Variants), and Tiles (for a grid of products without descriptions, but good for listing lots of products)
  • Page Size - the amount of products to be listed per page. To set it to unlimited (one long page), type -1 into the field.
  • Enable Search - the Product Listing atom comes with a built-in search feature that searches your chosen Products Root object. Check this box to render it at the top for customers to use.
  • Enable Sort Dropdown - there's also an option to sort products in certain ways - here are your various options. The two Name options sort products by either A-Z or Z-A, and the Price options allow lowest-to-highest and highest-to-lowest:

  • Paging Type - where to position the page bar with the options such as Next Page, Jump To Page, etc. You can choose between the bottom of the list, top of the list, both, or neither.
  • Description Character Limit - if you want to cut your descriptions down so as to not make each product's box too big on the list, you can set a character limit for the description. To set it to unlimited, type -1 into the field.
  • Enable Image - lets you show the product image on the list. The image is taken from the Product Image tab on the Product object.
  • Image Height/Width - if you'd like to resize your image as it appears on the page, use these fields to specify a max height/width in pixels.

The last two options also appear again in the Article View Settings as separate settings - these are for the image when you click on a product in the list to view the details. If you'd like to keep it the same image, use the same details as earlier; if not you can change its size or even remove the image altogether by unchecking the Enable Image box.

When you're happy with your settings, click Save & Close in the bottom-right. You'll need to Close Editor on the web page you're working on in order to see the effect - the button for this is in the top right. Then, you'll see your Product Lister render out! Have a look at it to make sure you're happy and make tweaks to the settings according to your own preferences.

Here is how the Product Lister looks in the "Tiles" view with some examples. You get some useful things too:

  • Basket - this is the button that takes you to your Basket, to view all the items that you've selected. This comes with the Product Lister atom, but you can also add your own Basket atom if you want to put it on other pages of your site too. For this extra feature you can check out the Basket atom help resource.
  • Add to Cart - this button is generated for each product in the list. By typing in a quantity on the left and clicking this button, you can add an item to your Basket, just like standard online shopping services.
  • Product Image/Name - you can click these! They will open up the chosen product in its own window, for you to view additional details on the product if desired..

That covers the Product Listing atom!