Ajusting the level of product image and Text

Deutsch Diskussion Shopify Design
,
1

Hello there everybody

My name is Marko and I need help with my shopify store.

Luburic_0-1712823429103.png
Luburic_0-1712823429103.png1312Ă—749 171 KB

As you can see in the image some of my Products and the text to it isnt alligned in one line is it possible to make all Productimages and all product Text in the same row?

store: https://mens-estls.com/

pw: eb78&d

I would be really Thankfull if someone can help.

2

Hey Marko! @Luburic

Thanks for your link and let’s see how you can achieve what you describe above regarding the product grids looking very inconsistent in uniformity. You have reached the German community here but we can chat in English too, that’s no problem!

First of all, the main reason your products don’t look consistent and aligned, is because of 2 things: your Image sizes and dimensions, and your product title lengths. The easy solution is to resize the Images in your Product Media Editor in the products admin, and to readjust your product title lengths to make them more consistent and shorter i.e. equidistant in length:

image.png
image.png2584Ă—1942 240 KB

The difficult solution - changing it in the Liquid Code:

There are two areas where you will see these size inconsistencies: in the featured collection section on the homepage and the collections pages like the “all products” collection. Thanks to your link I was able to analyse these two in the dev console:

11-23-qe0ex-ubxvk.png
11-23-qe0ex-ubxvk.png2858Ă—1786 881 KB

11-24-kvrtz-o7be3.png
11-24-kvrtz-o7be3.png2776Ă—1534 683 KB

Based on the Dom Tree and already existing CSS of the above two that I was able to extract from the dev console - to display product images and titles consistently in a single row in your Shopify store, specifically in the featured collection section on the homepage and on collection pages like the “all products” collection grid, you can use CSS to achieve a uniform appearance.

However please remember that this can have a knock-on effect on other page elements for the main reason that the space within the product grids is limited and you can’t simply pack more stuff into a limited space. Based on the HTML depicted above, here are some CSS approaches I recommend, 1) for consistent product images:

.grid-view-item__image-wrapper {
  height: 200px; /* Adjust the height according to your needs */
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-view-item__image {
  max-height: 100%;
  width: auto;
  max-width: 100%;
}

This CSS ensures all product images have the same height and are centered regardless of their original dimensions. Adjust the height (200px in the example) to the size you wish for your product images.

And 2) CSS for consistent product titles:

.grid-view-item__title {
  height: 60px; /* Adjust height based on the longest title */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

These styles use CSS tricks to standardize the height of the product titles. line-clamp is used to limit the number of lines (to two lines in this case). If the title is longer, it gets truncated with “…”. The height (60px in the example) should be adjusted to accommodate the height of the longest title in two lines.

You can use our Guide here for further instructions on how to test the above. Note that the exact class names (grid-view-item__image-wrapper, grid-view-item__image, grid-view-item__title) may vary depending on your theme and need to be adjusted if they are named differently in your theme. The class names suggested here are based on common conventions used in your files above.

Any further issues with that, I am happy to recommend an expert who can do a deep-dive into your code.

Hope that helps! :wink:

1 Like