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

[ClarityStudio]

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:

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😞

Any help would be much appreciated. 

[EBOOST]

Hi @ClarityStudio 

May I suggest to update code these steps:

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

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;}
}

[ClarityStudio]

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

[EBOOST]

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

[ClarityStudio]

Store link is https://chicjewelleryco.myshopify.com/collections/necklaces/products/mirage-necklace

Pass: chic123

[EBOOST · 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;}
}

[Nadine10]

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]

Hi @Nadine10 ,

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

[Sadire]

sadire.myshopify.com Can you help to do this for my home page FEATURED COLLECTIONS?

[EBOOST]

Hi @Sadire ,

Would you want to update to 2 columns? I saw this theme made a slider for this section so would you like to remove slider as well? 

[EBOOST]

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;
	}
}