Hi everyone,
We are using the Enterprise theme by Clean Canvas and are trying to customise the product page layout beyond the built-in options (Stacked / Slider).
1) Custom product gallery layout (Stacked mode)
In desktop view, we would like to achieve the following layout:
-
First product image full width
-
Two smaller images below it (side by side)
-
Remaining images hidden
-
Optionally showing something like “+X more” on the third visible tile
We are currently using Stacked layout on large screens.
We tried overriding the layout using CSS Grid targeting:
However, the structure inside #product-media appears to include additional wrapper elements, and our grid rules are not applying as expected.
Has anyone successfully customised the Enterprise stacked gallery to behave like this?
If so, could you share:
2) Adjusting product page column widths
On desktop, the product page uses a two-column layout:
We would like to:
We attempted to override the layout using CSS (grid and flex overrides), but changes do not seem to apply, possibly due to theme-specific layout rules or wrapper structure.
Has anyone adjusted the column ratio in Enterprise successfully?
If so, which selector controls the column grid or flex distribution?
We would prefer to stay within Enterprise and avoid switching themes.
Any help or example snippets would be greatly appreciated.
Thank you.
Hello there, thanks for sharing all details. It’s really help us a lot. To provide you more better solution, would you like to share your site URL. This will helps to identify the correct css class based on your current layout.
I’ve tried this code against theme demo store:
@media (min-width: 1024px) {
/* modify columns widths */
.product-details, .product {
--product-info-width: 50%;
}
/* make first image big */
.product-media--stacked .media-viewer__item:first-child {
flex: 0 0 100%;
}
/* hide 4th and further images */
.product-media--stacked .media-viewer__item:nth-child(3) ~ li {
display:none;
}
/* output label if there are more than 3 images */
.product-media--stacked:has(.media-viewer__item:nth-child(4)) .media-viewer__item:nth-child(3) .media:before {
content: "more";
position:absolute;
z-index: 1;
right: 5px;
bottom: 5px;
background: var(--blend-bg-color);
padding: 2px 7px;
pointer-events: none;
opacity: 0.6;
}
}
Before/after:
→
The code can't be put into "Custom CSS" as it does not accept `content:` keyword.
(it can, if you do not use the "label" rule).
So it either need to go into stylesheet asset, or add a “Custom liquid”/“Custom code” section and paste this code wrapped with <style> and </style> tags.
A warning – the main image may/will look less sharp as it’s stretched to be two times wider than expected.
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
Hi Tim,
Thank you again for your suggestion and the code.
We are using the Enterprise theme by Clean Canvas on our store:
We tried your CSS solution on our theme copy, with the product media layout set to stacked, but unfortunately the whole product gallery disappears as soon as we add the code, even when we place it in the stylesheet asset rather than in the Custom CSS field.
We also tested it without our previous custom JS changes, so it seems the issue is specifically with how our version of Enterprise handles the product gallery.
Would you possibly know what might be causing the gallery to disappear in this case?
Do you think the selector would need to be adjusted for this version of Enterprise, or would this need a Liquid change instead of pure CSS?
For reference, the relevant product gallery is rendered through main-product.liquid → media-gallery.liquid → product-media.liquid.
If helpful, I can also share the exact part of our current media-gallery.css / media-gallery.liquid.
Thank you very much for any further guidance.
Not sure if it’s version difference, or the code which keeps “only currently selected variant images visible”.
My code above expects all of the gallery images to be visible (before my code hides them); on your site some of the images are hidden with variant selection and there are 3 first images which are hidden always…
In this case first-child and nth-child() selectors do not work the way we want them…
It’s possible to create a worse looking code, but it will do what you want:
@media (min-width: 1024px) {
/* modify images/info split */
.product-details, .product {
--product-info-width: 50%;
}
/* make all images full-width (would really only apply to the first visible */
.product-media--stacked .media-viewer .media-viewer__item {
flex: 0 0 100%;
}
/* make images after first visible one 50% */
.media-viewer .media-viewer__item:not([style*="display: none"]) ~ .media-viewer__item {
flex: 0 0 50%;
}
/* hide all images after 3rd visible one */
.media-viewer .media-viewer__item:not([style*="display: none"]) ~ :not([style*="display: none"]) ~ :not([style*="display: none"]) ~ * {
display: none;
}
/* output label if there are more than 3 images which do not have display: none */
.product-media--stacked:has(.media-viewer__item:not([style*="display: none"]) ~ :not([style*="display: none"]) ~ :not([style*="display: none"]) ~ :not([style*="display: none"]))
.media-viewer .media-viewer__item:not([style*="display: none"]) ~ :not([style*="display: none"]) ~ :not([style*="display: none"]) .media:before {
content: "more";
position:absolute;
z-index: 1;
right: 5px;
bottom: 5px;
background: var(--blend-bg-color);
padding: 2px 7px;
pointer-events: none;
opacity: 0.6;
}
}
Hi Tim,
Thank you very much again for your help. Your updated CSS solution does work on our Enterprise theme now, so we really appreciate the time you took to look into it.
However, after testing it properly, we realised it is unfortunately not usable for our store in practice. The reason is that the large first image becomes noticeably too soft / blurry on bigger desktop monitors. It seems the image is being stretched beyond the size it was originally loaded for, so although the layout looks the way we wanted, the image quality is not good enough for product presentation.
Because of that, we do not think the CSS-only approach will be suitable for us in the end.
Would you perhaps be able to suggest how this could be done properly via a small Liquid customization instead, so that the first large image could load at an appropriate size and remain sharp? We would ideally still like the same layout concept on desktop:
We are using Enterprise by Clean Canvas, and the relevant files seem to be:
-
sections/main-product.liquid
-
snippets/media-gallery.liquid
-
snippets/product-media.liquid
If you have any suggestion on the best way to approach this in Liquid, we would be very grateful.
Thank you again.
Yes, and I warned about this blurriness in my original post.
Since you can’t really predict which image would be first/big, you’d need to re-scale them all, I guess.
Not sure where exactly in the theme code, but currently your product images are rendered with this parameter:
sizes="(min-width: 1508px) 430px,
(min-width: 1280px) calc((100vw - 640px) / 2),
(min-width: 1024px) calc((50vw - 80px) / 2),
(min-width: 769px) calc(50vw - 64px),
(min-width: 600px) calc(100vw - 64px),
calc(100vw - 40px)"
I happen to have an older copy of the theme and there is some complex calculation
based on the page width and other theme settings in Liquid, but that’s how I see it on the rendered site.
In my copy of the theme the code has this part in snippets/product-media.liquid:
elsif section.settings.media_layout == 'stacked'
Which makes it calculate sizes for 2 images in a row.
I’d try to change this to
elsif section.settings.media_layout == 'stacked' and false
I expect this to force sizes to be the same as for the carousel (which has one image per row)…
Hi Tim,
Just a quick update after testing.
The CSS version does create the layout, but it also breaks the gallery / slider behaviour on our side. So unfortunately it does not seem reliable enough for our setup.
We also tried the and false test in product-media.liquid, but that did not really solve things well enough, so we reverted it.
Do you happen to know a relatively small Liquid-based way to approach this instead, while keeping the normal gallery / slider behaviour intact?
Thank you again.
That was probably the least intrusive way to do that (especially from the outside).
The problem could be that some products have stacked layout and some -- slider.
When you add the code to the stylesheet, it applies to all product pages.
If you’d used the “Custom CSS” or “Custom liquid” approach I’ve suggested initially, this would not have happened.
However, I see that my rules can be amended a bit to target only stacked product pages, even if added to the stylesheet – I’ve changed the selectors to only target stacked product media:
@media (min-width: 1024px) {
/* modify images/info split */
.product-details, .product {
--product-info-width: 50%;
}
/* make all images full-width (would really only apply to the first visible */
.product-media--stacked .media-viewer .media-viewer__item {
flex: 0 0 100%;
}
/* make images after first visible one 50% */
.product-media--stacked .media-viewer__item:not([style*="display: none"]) ~ .media-viewer__item {
flex: 0 0 50%;
}
/* hide all images after 3rd visible one */
.product-media--stacked .media-viewer__item:not([style*="display: none"]) ~ :not([style*="display: none"]) ~ :not([style*="display: none"]) ~ * {
display: none;
}
/* output label if there are more than 3 images which do not have display: none */
.product-media--stacked:has(.media-viewer__item:not([style*="display: none"]) ~ :not([style*="display: none"]) ~ :not([style*="display: none"]) ~ :not([style*="display: none"]))
.media-viewer .media-viewer__item:not([style*="display: none"]) ~ :not([style*="display: none"]) ~ :not([style*="display: none"]) .media:before {
content: "more";
position:absolute;
z-index: 1;
right: 5px;
bottom: 5px;
background: var(--blend-bg-color);
padding: 2px 7px;
pointer-events: none;
opacity: 0.6;
}
}
