Change product page images

Store Design

Topic summary

A user is experiencing layout issues with product page thumbnail images, where only three secondary images are visible beneath the main product image, with navigation arrows consuming excessive space.

Desired outcome:

  • Remove the navigation arrows
  • Display more thumbnail images (at least one additional image)

Current situation:

  • No built-in option exists to modify this layout
  • User provided screenshots showing the problem and their product landing page

Proposed solution:
A community member offered a CSS code snippet to be added to the base.css file via the theme editor (Actions > Edit code > Assets), though the code snippet appears corrupted or incomplete in the conversation.

The discussion remains open as the technical solution needs clarification or proper implementation.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, I have a problem with the secondary images (under the big image) on my product page.

It shows only three and uses a lot of space for arrows (see image). I want to remove the two arrows to allow for more visible secondary images (maby 1 more image down there). There is no option to do this so does anyone have a solution?

Here is the landing page: https://nattlig.no/products/nattligputen

Nattlig_0-1732203258767.png
Nattlig_0-1732203258767.png438×530 139 KB

2

Hi @Nattlig ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
    .thumbnail-list__item.slider__slide {
        width: calc(25% - .7rem) !important;
    }
}
1 Like