LAB

« back to LAB posts index

Dawn theme posts

Collections list

Converting the horizontal toolbar to the sidebar

25 Mar, 2022

Horizontal toolbar or the tradicional sidebar .
When designing our ecommerce site we want to test the filter, horizontal or vertical, and see which one performe better. In this example I will change the orientation of the filter from horizontal to the tradicional and most common in most ecommerce sites the left sidebar. I will not advocate one solution over the other, our analyse shows that horizontal toolbar is only appropriate for certain types of e-commerce sites.

The Challenge

To make this change we will have to change the width size of collection list to gain space for the sidebar.
Adittionally besides having to change the orientation of the filter we will have to limit the width size of the boxes and text inside.

Let's break down this job:

  1. Remove the sort and filter from the grid
  2. Convert filter orientation from row to column
  3. Reduce the size of collection list
  4. Limit the size of the filter elements and text

Original design

Dawn Products Page

Existing CSS code

To find the file go to: assets>template-collection.css

                  
/* 161 */
.facets__heading {
  display: block;
  color: rgba(var(--color-foreground), 0.85);
  font-size: 1.4rem;
  line-height: 1;
  margin: 0 0 1rem 0.5rem;
  width: 100%;
}

/* 142 */
.facets__form {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 2.5rem 2rem;
}

/* 153 */
.facets__wrapper {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.5rem;
}

/* 57 */
.collection-filters {
  display: flex;
  flex-direction: column;
}

/* 1*/
.collection {
  position: relative;
}

/* 131 */
@media screen and (min-width: 750px) {
  .collection-filters .collection-filters__sort {
    width: 25rem;
    max-width: 100%;
  }
}

/* 198 */
.facets__display {
  background-color: rgb(var(--color-background));
  position: absolute;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  top: calc(100% + 0.5rem);
  left: -0.1rem;
  width: 35rem;
  max-height: 55rem;
  overflow-y: auto;
}

The Solution

Dawn Products Page After.jpg

To find the file go to: assets>template-collection.css

                  
/* remove the grid so filter is independent of sort by */
.facets__heading {
  display: block;
}

.facets__form{
  display: block;
}

/* convert filter to column */
.facets__wrapper {
  flex-direction: column;
  float: left;
}

/* reduce side of filters and put left */
.collection-filters {
  width: 20%;
  float: left;
}

/* reduce size of collections grid and put right*/
.collection {
  width: 80%;
  float: right;
}

/* reduce size of sort by */
.collection-filters .collection-filters__sort {
  width: 16rem;
}

.facets__display{
  width: auto;
}

Next to make the arrow of sort by inside the box go to the file: assets>base.css

                  
.text-area, .select {
    width: auto;
}

« back to LAB posts index