How can I create a grid image on my product page?

Store Design
,

Topic summary

A user wants to display product images in a 2x2 grid layout on their Shopify store using the Impulse theme, rather than the default single-image display.

Initial Problem:

  • User shared an example image showing desired grid layout
  • Default theme options only offer two media description positions, which don’t achieve the grid effect

Attempted Solution:

  • Another user provided custom CSS code to modify the .flickity-slider properties (width and height set to 50% on desktop)
  • The CSS initially didn’t work when added to theme.css

Current Status:

  • User partially achieved the grid layout but now faces a new issue: images display as 3+3 instead of the desired 2+2 configuration
  • The discussion remains open with the user seeking guidance on how to adjust the grid to show exactly 2 images per row
Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I’m looking to make my product image grid, so It shows 2 picture at same time.

Example:

Untitled.png
Untitled.png1963×1056 189 KB

I’m using Impulse theme.

Thanks!

2

Hi @leosef ,

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

3

Hello!

Yes, it’s https://carncier.com

4

@leosef
There’s only two type of media description are there you can select one of them
customize-> default product-> Description position

Ujjaval_0-1680677601786.png
Ujjaval_0-1680677601786.png1585×776 64.9 KB

5

Yes i’m aware of that, but that does not make it show 2 pictures of the product, I have it under the media.

6

@leosef add below css into your theme.css file

@media (min-width:1024px)
{
.flickity-slider {
    position: absolute;
    width: 50% !important;
    height: 50% !important;
}
.flickity-viewport {
    height: 550.86px !important;
    touch-action: pan-y;
}
}

It will be look like below one :

Ujjaval_0-1680680513878.png
Ujjaval_0-1680680513878.png1587×714 134 KB

7

Hi!

I added that code but did not change anything.

8

Managed to get it like that. But now is the thing, how can I get it 2 and 2 pictures? it shows like 3