Adding Collections ๐Ÿ“‚


Collections are how you will organize the products on your site. Note that this is an optional step, it's entirely possible to have a store with a single or just a handful of products.

If you do not add any additional collections, the /shop route in your store will display a list of all live products. Otherwise, if you do add collections, it will display a list of collections.

config2 setup

Featured Products

Featured Products is the default collection that will display on your store's landing page.

To change the collections on your landing page, open the component src/components/Landing.js and edit

const featuredProducts = getProductsFromCollection(config, "featured-products");

Create a New Collection

Click the "Create New Collection" button on config?tab=1, and you will start the collection workflow.

Set the name of your collection, and then add products.

config2 step1

Collection Cover

Next, add a cover image for your collection. This will be displayed at /shop.

(The example image comes from this video)

config2 step2

Click "Finish", and then navigate over to /shop to see your collection in action.

config2 collection

Collection Displays

Clicking into your collection will display the product list, which for our example collection is viewable at /collection/pelagic-magic

config2 view

Note that when you click in to a product, the breadcrumb navigation at the top of the product page will reflect the collection that it came from.

config2 product