Skip to main content

Department pages

On department pages, customers can view the products in the department and add items to their cart. Products are displayed in item tiles, which are small product cards that appear in the department page and in product carousels.

Department page layout​

The following image shows a sample department page:

The department page includes the following sections:

Item tiles​

Item tiles display information about individual products or an assortment of products. Assortments can be a selection of grocery items or a specialty assortment of items for a catering tray or holiday meal. When shopping online, customers want to see enough key details on the item tile to make a purchasing decision quickly. They also want to be able to add a quantity of the item to their cart from the tile. You can configure how much information appears on item tiles on your storefront.

The following image shows a sample item tile with some of the most commonly used components:

  1. Product image. Retrieved from the inventory file. A customer can click the image to open the product details page.
  2. Buy it again label. Based on a customer's purchase history. Indicates items previously purchased by a customer. For more information, see Buy it again.
  3. Pricing details. Retrieved from the inventory file. The default price is always displayed when available. The other pricing components are displayed automatically for sales, discounts, offers, or if the customer is a loyalty member.
  4. Product labels. Retrieved from the inventory file and displayed in the global label color.
  5. Snap label. (Optional) Retrieved from the inventory file.
  6. Product name. Retrieved from the inventory file and displayed using a subset of the global text style.
  7. Product size and price per unit. Retrieved from the inventory file and displayed using a subset of the global text style.
  8. Add to cart. Enables customers to add items to the cart. The button uses the global button color. For produce sold in more than one way, the quantity icon spells out the unit. For example, a customer might see "1 banana" or "3 bunches" instead of a bare number. In these cases, the product image matches the actual unit (a single banana, a full bunch, or a box).
  9. Stock levels. (Optional) The stock levels for an item. For more information, see Stock levels.

Automatically generated carousels​

Customers may also see the following automatically generated carousels at the top of department pages:

  • Picked for you. Shows recommended items based on the customer's interests, purchase behavior, and browsing history.
  • On sale now. Shows items that are currently on sale or part of a promotion. By default, the carousel appears only if there is at least one item on sale in the department. You can customize this minimum threshold by contacting your Instacart representative.

Customize department pages​

With Storefront Pro, you can configure the global layout for your L1, L2, and L3 department pages. You can also customize the layout of individual pages, including by adding banners and carousels.

Configure department page layouts​

You can customize the global template for department pages as well as the layout of individual department pages. For example, you can add banners and carousels to the pages.

To configure page layouts, banners, and carousels, use Instacart Platform Portal. For more information, see:

Department menu in the custom header​

If you are using the custom header, you can add a list of departments to a menu in the header of your desktop site. The list of departments is visible in the sidebar navigation when customers are viewing collection pages or search results pages.

You can hide or show the sidebar list of departments on the desktop homepage by editing the desktop styling in the following ways:

  • Collapsing departments into a menu item in the desktop header provides more space on the homepage for customers to view your custom content, such as banners and campaigns.
  • Always displaying departments in a desktop sidebar provides an experience similar to Instacart Marketplace. Customers have access to departments at all times.

The following example shows the experience with the departments collapsed into a menu in the desktop header:

The following example shows the departments visible in the desktop sidebar:

To add a Departments menu to your custom header, use Instacart Platform Portal. For more information, see the following topics: