Some merchants use very long product titles in their shop which may cause some issues for the customers. As we work with a "Mobile First" approach we prefer to see titles that are short and to the point while fitting as many products possible into the screen. However, sometimes merchants need to use long titles or gets the titles from their product data sheet from their suppliers. Then it is good to be able to change the layout of the Touchize Commerce products cards.

In order to change the height please follow the steps below.


1. Go to your Touchize Commerce configure page in your PrestaShop backoffice


2. Go to the Settings page


3. Find the field called "Head HTML"


4. Copy & Paste the following CSS snippet into the field

<style>
/** General & Tablet Landscape Styling **/
.tz-productlist__product,
.tz-productrelations__product {
padding-bottom: 43%;
}
.tz-productrelations__product {
padding-bottom: 48%;
}
/** Tablet Potrait Styling **/
@media (max-width: 800px) {
.tz-productlist__product,
.tz-productrelations__product {
padding-bottom: 57%;
}
.tz-productrelations__product {
padding-bottom: 65%;
}
}
/** Phone Potrait Styling **/
@media (max-width: 479px) {
.tz-productlist__product,
.tz-productrelations__product {
padding-bottom: 100%;
}
.tz-productrelations__product {
padding-bottom: 105%;
}
}
</style>

5. You might want to experiment with different % values depending on shop, preferred layout and device

6. Save settings

Did this answer your question?