Multiple stores in one site different layout 7.1

Hi. I'm building a site that has two separate stores within it - in 7.1.
I want to make a change to the collection/store page.

One store is selling paintings that are all square so I want to do 1x1 - Love Store, and one they are mostly vertical - Painting Gallery- so I want to do 2x3.
For now, when I make a change to one store it changes the layout on the other.
I've attached screen grabs so you get the idea.

Is there a way or line of code I can drop in to make them each have their own layout? Actual individual product pages can stay the same. 

I hope this makes sense. Thanks.

I guess you can with some custom code. Can you share link 2 product pages?

Did you figure this out as I need to do the same, the code I am using isn't working/

Tried to change code but didn't seem like it worked.

Thanks

Hey,
 

A summary block might be a good choice without any custom coding

1) go to your initial shop module and apply categories to your products ( e.g. square and vertical)
2) make a new page or section
3) use a Summary block and choose the shop as source
4) apply a certain aspect ration (1:1, 16:9.... vertical...)
5) use the advanced settings of the summary block to ONLY SHOW CATEGORY 1

so you can optimize the layout for your 2 categories!

Hope that helps!
 

On 11/2/2020 at 5:01 PM, ArminB said:

Hey,
 

A summary block might be a good choice without any custom coding

1) go to your initial shop module and apply categories to your products ( e.g. square and vertical)
2) make a new page or section
3) use a Summary block and choose the shop as source
4) apply a certain aspect ration (1:1, 16:9.... vertical...)
5) use the advanced settings of the summary block to ONLY SHOW CATEGORY 1

so you can optimize the layout for your 2 categories!

Hope that helps!
 

hey, this is a good idea.. I have thevsame problem.. but I don't have this nice rollover image switch affect it I don't use a shop site! any idea for that?

On 3/2/2022 at 3:46 AM, billyholiday said:

hey, this is a good idea.. I have thevsame problem.. but I don't have this nice rollover image switch affect it I don't use a shop site! any idea for that?

You can use Summary Block to pull products & This plugin to add rollover effect

Or we can use code to set rollover effect manually on each product

(The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.)

works on 7.1.    Copy and paste this to CSS code for your website.  Worked for me.  now all images have the own correct aspect ratios without jumping thru hoops.  

/*original aspect ratio for images in store*/

// code #2//

/* list page */

.products.collection-content-wrapper .grid-item .grid-image-cover {

    object-fit: contain !important;

}

/* detail page */

img.ProductItem-gallery-slides-item-image {

    object-fit: contain !important;

    height: auto !important;

}