Creating a curated list for the home page

With our product listing component in place, we can proceed with making a curated list of products for our home page, and add more information to the product listing.

In this example, we are going to hardcode an array of product handles on our home page component that we want to display. If this were in development, you would expect this list to be controlled via a content management system or similar.

Create a data function on your HomePage component, that which includes an array titled selectedProducts:

data() {
  return {
    selectedProducts: []
  }
},

Populate the array with several handles from the product list. Try and get about six, but if you go over 12, remember it will paginate with our component. Add your selected handles to the selectedProducts array:

data() {
  return {
    selectedProducts: [
      'adjustable-stem',
...