How can I display multiple product images on desktop view?

Store Design

Topic summary

Main issue: Multiple product images only show on mobile (swipeable), but desktop displays just one image.

Actions taken:

  • Suggested editing theme CSS (Themes → Edit code → assets → theme–critical.css) to force the product media/gallery to display on desktop. Result: multiple images now appear on desktop.
  • Requested layout change to place images on the left and product details on the right. A CSS order/layout tweak was provided. Result: layout changed as requested.

Problem encountered:

  • After the left/right layout change, desktop product images became significantly smaller (shrunk). Screenshots were shared to illustrate.

Further attempt:

  • Additional CSS with a desktop media query and grid column adjustments (e.g., setting two equal columns) was proposed to fix the shrinkage. Result: images still shrank; issue persisted.

Current status:

  • No final fix yet for the image sizing on desktop after layout change.
  • Next step proposed: grant collaborator access so the helper can inspect the theme and resolve the sizing issue.

Notes:

  • Code snippets and screenshots are central to understanding the troubleshooting and partial outcomes.
Summarized with AI on November 25. AI used: gpt-5.
1

Hello, I have multiple Product Images for each item. On Mobile Devices it shows all images available to swipe across to. But on Desktop View it only Displays 1 of the Multiple Images.

Can someone help me to show more of the Product Images on Desktop View. See Below

Click Here For The Website

Thank You

1.png
1.png1920×1080 168 KB

2

Hi @LucianoFashion
To show the images as you want, You can try follow this path:
Themes => edit code => asset => theme–critical.css
and add this code to bottom of the file theme–critical.css

.product-page--center .product-media--wrapper .modal--root{
display: none!important;
}
.product-page--center .product-media--wrapper .product-page--carousel {
display: block!important;
}
3

Worked, Perfect.

One more question: How do I have the Image to the Left Side of Desktop then Product information on the Right of Desktop Screen?

Untitled.png
Untitled.png1317×1080 134 KB

4

Hi @LucianoFashion
You can try to use this code:

.product-page--left-column {
order: 2;}
5

The code worked and images are now on the Left… But the images have shrunk in size dramatically. See Screenshot.

Untitled-1.jpg
Untitled-1.jpg1647×759 110 KB

6

I think this code will resolve the problem

@media only screen and (min-width: 1280px){
.product-page--wrapper {
  grid-template-columns: 1fr 1fr;
}
.product-page--left-column {
order: 2;}
}
7

Again…The code worked and images are now on the Left… But the images have shrunk in size dramatically. See Screenshot above

8

Hi @LucianoFashion
I think you can give me the access, then I can check and help you fix the problem.
If you agree with that, please send me an email