Creating the Shop Page

The shop page is the first point of access to Clarity’s product catalog. The page contains a list of all the products, their associated facets, and search and sort functionality.

Adding a Banner

The first element on the shop page is a banner:

1. Open the Product Menu () and go to Site Builder → Pages.

2. Select the shop page. This opens the page in edit mode.

3. Drag and drop a container from the left menu.

4. Click the container and open its settings (in the right sidebar menu). In the General section, set the minimum height of the banner to 40VH. This ensures the banner takes up 40% of the Viewport Height of the current device.

5. Set the container’s Content Display to Flex Column and Justify Content to Start.

6. Go to the Styles tab and click Add () under the Background Image section.

7. Choose the catalog-hero.jpg image from Documents and Media.

8. Drag and drop a Heading fragment inside the container, followed by a Paragraph fragment below it.

9. Click the Heading fragment and set its content to Styles to fit your look,or start a new one.

10. From the right sidebar menu, click Styles.

11. In the Spacing settings, choose Spacer 5 for the margin on the left of the element.

    The value for each spacer setting is defined by the page’s Style Book.

12. Click the Paragraph fragment and set its content to Shop our range of eyeglasses, lenses, and sunglasses to find the one that fits your needs.

13. From the right sidebar menu, click Styles.

14. In the Spacing settings, choose Spacer 5 for the margin on the left of the element.

Adding a Container for Products and Facets

1. Drag and drop another container below the container added earlier.

2. Click the container and open its settings. In the General section, set the Container Width to Fixed Width.

3. Go to the Styles tab and in the Spacing settings, choose Spacer 5 for the margin on the top of the element.

4. Drag and drop a Grid fragment inside this container.

5. In the right sidebar menu, set the Number of Modules to 2. Adjust the size of the first module so that it takes up one-fourth of the total size of the container.

Adding the Search Bar and Facets

1. Inside the first module of the grid, drag and drop a Search Bar fragment from the left menu.

2. Go to its Styles section from the right sidebar menu and set its Margin Top to 3.5rem.

3. Click Actions () on the fragment, and choose Configuration.

4. Set the scope to Everything and click Save.

5. Drag and drop the following widgets below the search bar, one below the other:

   1. Category Facet
   2. Price Range Facet
   3. Specification Facet

6. Click Actions () on the category facet, and choose Configuration.

7. Choose Select Vocabularies and select Clarity from the Global scope.

8. Click Save.

9. Click Actions () on the price range facet, and choose Configuration.

10. In the Ranges JSON Array text area, paste the following array:

    [
       {'range': '[0 TO 25]'}\,
       {'range': '[25.01 TO 35]'}\,
       {'range': '[35.01 TO 50]'}\,
       {'range': '[50.01 TO 75]'}\,
       {'range': '[75.01 TO *]'}
    ]
    

11. Click Save.

12. Drag and drop a Search Options widget below the specification facet.

13. Click Actions () and select Configuration.

14. Check the box to Allow Empty Searches.

15. Click Save.

16. In the left hand layout menu, hide the search options widget.

Adding the Products

1. From the left menu, drag and drop a Sort widget from the Commerce section to the second module of the grid.

2. Directly below this, drag and drop the Search Results widget, again from the Commerce section.

3. Click Publish.

With that, you have a catalog page displaying all the products in the catalog. There’s also a search bar to search for products along with several functioning facets.

Next: Creating a Product Details Page