Shapes theme: Changing image navigation arrows and thumbnails

Store Design
, , ,

Topic summary

A Shopify store owner using the Shapes theme seeks to customize their product page image gallery in two ways:

Current Issues:

  • Navigation arrows appear below product images, consuming excessive space
  • Thumbnail images display in a standard layout

Desired Changes:

  1. Reposition navigation arrows (specific placement shown in attached screenshot)
  2. Convert thumbnail images into a carousel format

The user attempted to resolve these issues independently without success.

Solution Provided:
A support representative shared a CSS customization approach:

  • Navigate to Shopify Admin → Online Store → Themes → Actions → Edit code
  • Locate base.bundle.css file
  • Add custom CSS code at the end of the file

The provided CSS targets mobile viewports (max-width: 749px) and includes styling for:

  • Arrow positioning (absolute positioning at 34% from top)
  • Button styling (border-radius, background color, box-shadow)
  • Spacing adjustments for previous/next arrows
  • Flexbox alignment for controls

Status: Solution provided but not yet confirmed as implemented or tested by the original poster.

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

Hello everyone,

I am using the shapes theme and I dont see any option to change the following:

  1. Right now my navigation arrows below my product image which is taking up a lot of real estate. I want to change to the way as seen on the 2nd image.

  2. I want my thumbnail images to become a carousel as seen in the attached screenshot.

Been trying to figure it out on my own but without success. Help is much appreciated.

Store: neatercanines.ph

Thanks,

Peter

Screenshot 2024-11-04 at 11.36.12 pm.png
Screenshot 2024-11-04 at 11.36.12 pm.png790×1342 203 KB

Screenshot 2024-11-04 at 11.37.58 pm.png
Screenshot 2024-11-04 at 11.37.58 pm.png798×1106 243 KB

2

Hello @Peter_ecom

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the theme you want to edit and then click Actions > Edit code.

  • Search base.bundle.css

  • Insert the provided CSS code at the end of the file and save the changes.

@media only screen and (max-width: 749px){
    .product-media > .splide__arrows {
        display: flex !important;
    }
    
    .section-content .product-media .splide__arrows.mt-4.flex.items-center.justify-end.gap-2.px-section.splide__arrows--ltr {
        display: flex !important;
        position: absolute;
        top: 34%;
        left: 0;
        right: 0;
    }
    
    .section-content .product-media .controls.relative {
        width: 100%;
    }
    
    .section-content .product-media .controls.relative .flex.gap-2 {
        align-items: center;
        justify-content: space-between;
    }
    
    .section-content .product-media button.splide__arrow.splide__arrow--prev.push-btn {
        left: 5px;
    }
    
    .section-content .product-media button.splide__arrow.splide__arrow--next.push-btn {
        right: 5px;
    }
    
    .section-content .product-media button.splide__arrow span.push-btn__surface {
        border-radius: 50%;
        background: #dddddd78;
        border: none;
        box-shadow: none;
    }
}

Output : https://prnt.sc/B4LNic8HSzZd

Please hit Like and Mark it as a Solution if you find our reply helpful.