Display Products as a List Instead of a Gallery - XMPieLab/uStore-NG GitHub Wiki

By default, uStore displays products in a gallery (grid) layout. The following CSS snippet overrides that behavior and renders products as a full-width list, with the product image and name on the left and the quantity controls and "Add to cart" button on the right.

Before:

After:

The gallery layout is driven by .gallery .main having flex-wrap: wrap, which causes product items to flow into a grid. The fix is to force flex-wrap: nowrap and flex-direction: column, then style each product item as a horizontal row.

Add the following to your store's custom CSS (edit store > Customize Theme > Custom CSS):

/* Product gallery as list */
.gallery .main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
 
.product-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--color-line);
  box-sizing: border-box;
gap: 16px;
}
 
.gallery .main > .product-item {
padding: 10px 0;
max-width: 100%; 
}
 
.product-item .image-wrapper {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
 
.product-item .image-wrapper img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
}
 
.product-item .product-name {
  max-height: none !important;
}
 
.product-item .product-description {
  max-height: 3em !important;
  overflow: hidden;
 
}
 
.product-item .add-to-cart {
  flex-shrink: 0;
  margin-left: auto;
}
 
.product-item .add-to-cart-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

• This CSS applies globally to all product galleries in the store. If you want to limit it to specific pages or categories, you will need to scope the selectors further.
• The image size is fixed at 60x60px. Adjust the width and height values in .image-wrapper and .image-wrapper img if you prefer larger thumbnails.
• Tested on the AquaBlue theme.