Payment Methods
Apps

Docs

No results for undefined
Powered by Algolia

Products not aligned properly on list view

The alignment of the products in the list view is based on many factors. In J2Store, the products are displayed in a product block structure.

What the product block consists:

The product block typically consists of

  • The product image
  • The product name
  • The price, SKU and stock
  • The description part(while many users don’t publish the description on the list view, some users do)
  • The add to cart button or the view details button

Factors causing misalignment:

Product images being of different heights

In J2Store, the products are arranged in a block structure. The product image, which is also a part of the product block plays a major role in determining the product alignment.

That is, when you use images of varying heights on your site, the product block of the image with a greater height would be large than the one with a relatively smaller product image.

Solution: To a certain extent, this could be overcome by minor CSS tweaks. However, if your images are of entirely different heights, then you might want to consider using uniformly sized images for a neat layout.

The product title being big and greater font-size

When you use higher font-sizes for your product title and have a big name for the products, then the product block would be aligned up and down.

Solution: To use a font-size of about 16px would do good. Also having product titles within two words is a good practise to get a neat layout.

Publishing Description in the list view

Generally, most users don’t publish the description on the list view but a very few users do. This might also cause the products to be aligned up and down.

Solution: To a certain extent, this could also be overcome by adding minor CSS tweaks. However, if you have a lengthy description, then it is better to avoid publishing it on the list view since this might lead to a layout not so clean.