Solved

Can I change the Lorenza theme to a two grid per row product layout?

ClarityStudio
Shopify Partner
8 0 0

Hi,

 

I was wondering if it was possible to change the product page image layout on the Lorenza theme from one image and thumbnails below to a two grid per row product layout per the example below.

 

Currently, the demo store product pages (https://themes.shopify.com/themes/lorenza/styles/chic/preview) all have one image and thumbnails below:

Screenshot 2024-04-08 at 00.12.24.png

 

But i would like to change it to two product images per row with no thumbnails like this store which is also using Lorenza (https://www.ca-fune.com/products/stance-wallet-white😞

Screenshot 2024-04-08 at 00.13.18.png

 

Any help would be much appreciated. 

Accepted Solution (1)
EBOOST
Shopify Partner
863 235 263

This is an accepted solution.

Hi,

You can add code below for vertical layout.

 

@media(min-width: 60rem){
	body .product--thumbnails-vertical.product--thumbnails-small .product-thumbnails__list {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: var(--spacing-small);
	}
	body .product-thumbnails {
		width: 100%;
	}
	.product--has-thumbs.product--thumbnails-vertical.product--thumbnails-small .product__media {
		display: none;
	}
	body .product-thumbnails__item + .product-thumbnails__item {
		margin: 0;
	}
        .product__media-action { display: none!important;}
}

 

EBOOST_0-1712554293148.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤

View solution in original post

Replies 8 (8)

EBOOST
Shopify Partner
863 235 263

Hi @ClarityStudio 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Assets/theme.css
3. Add code below to end of file

body .product--thumbnails-horizontal.product--thumbnails-medium .product-thumbnails__list {
grid-template-columns: repeat(2,1fr)!important;
}
@media(min-width: 60rem){
.product--has-thumbs.product--thumbnails-horizontal .product__media { display: none!important;}
}

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
ClarityStudio
Shopify Partner
8 0 0

Hi, i tried this the mentioned code into the theme.css file, however it didn't work.

EBOOST
Shopify Partner
863 235 263

Hi,

Could you please share your store? I tried to add code above to https://lorenza-theme-chic.myshopify.com/collections/spring-summer-2023/products/dez-blazer

It will look like the screenshot below

EBOOST_0-1712551840168.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
ClarityStudio
Shopify Partner
8 0 0
EBOOST
Shopify Partner
863 235 263

This is an accepted solution.

Hi,

You can add code below for vertical layout.

 

@media(min-width: 60rem){
	body .product--thumbnails-vertical.product--thumbnails-small .product-thumbnails__list {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: var(--spacing-small);
	}
	body .product-thumbnails {
		width: 100%;
	}
	.product--has-thumbs.product--thumbnails-vertical.product--thumbnails-small .product__media {
		display: none;
	}
	body .product-thumbnails__item + .product-thumbnails__item {
		margin: 0;
	}
        .product__media-action { display: none!important;}
}

 

EBOOST_0-1712554293148.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
Nadine10
Excursionist
44 0 5

Hi there,

I'm wanting to do the same with my site, but the code isn't working for me. 
Any chance you could help out?

Thanks!

EBOOST
Shopify Partner
863 235 263

Hi @Nadine10 ,

could you please share your store url? We will help to check it.

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
EBOOST
Shopify Partner
863 235 263

Hi,

May I suggest code below:

@media(min-width: 960px){
	.product-page-wrapper .product__media-container .product__media {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: var(--spacing-small);
	}
	.product-page-wrapper .product__media-container .product__media .media-wrapper {
		margin-top: 0!important;
	}
}
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤