Examples
A resource list with simple items and no bulk actions, sorting, or filtering.
A resource list displays a collection of objects of the same type, like products or customers. The main job of a resource list is to help merchants find an object and navigate to a full-page representation of it.
Resource lists can also:
A resource list with simple items and no bulk actions, sorting, or filtering.
Using a resource list in a project involves combining the following components and subcomponents:
The resource list component provides the UI elements for list sorting, filtering, and pagination, but doesn’t provide the logic for these operations. When a sort option is changed, filter added, or second page requested, you’ll need to handle that event (including any network requests) and then update the component with new props.
Shopify is organized around objects that represent merchants businesses, like customers, products, and orders. Each individual order, for example, is given a dedicated page that can be linked to. In Shopify, we call these types of objects resources, and we call the object’s dedicated page its details page.
Take orders as an example. Merchants may have a lot of them. They need a way to scan their orders, see what state they’re in and find out which ones need action first. In other words, they need a way find an individual order, call up more information about it, and take action on it.
Resource lists function as:
Because a details page displays all the content and actions for an individual resource, you can think of a resource list as a summary of these details pages. In this way resource lists bridge a middle level in Shopify’s navigation hierarchy.
On wide screens, a resource list often looks like a table, especially if some content is aligned in columns. Despite this, resource lists and data tables have different purposes.
A data table is a form of data visualization. It works best to present highly structured data for comparison and analysis.
If your use case is more about visualizing or analyzing data, use the data table component. If your use case is more about finding and taking action on objects, use a resource list.
Resource lists can live in many places in Shopify. You could include a short resource list in a card summarizing recent marketing activities. You could also dedicate an entire page to a resource list like Shopify’s main products list.
Resource lists should:
Resource lists can optionally:
Resource lists should:
Identify the type of resource, usually with a heading
Products
Showing 50 products
No heading
Indicate when not all members of a resource are being shown. For a card summarizing and linking to recently purchased products:
Popular products this week
Products
Follow the verb + noun formula for bulk actions
Follow the content guidelines for filter options and applied filters