Help to change product images from left to right

Hi Team,

I am struggling to figure out how to change product listings from left to right menu. I am using Ascension theme and cannot see css files like main.css or theme.css to change to code. Nor I know what code would be the right one.

Thank you in advance!

Hi there! :waving_hand:

The Ascension theme uses Shopify’s newer Online Store 2.0 structure, which means most styling is managed through modular CSS files and JSON templates rather than one large theme.css or main.css file. That’s why you’re not seeing those older-style files.

If you want to move the product listings layout (for example, shifting from a left sidebar to a right sidebar or vice versa), here are a few things to try:

  1. Check the Theme Editor (no coding needed)

    • Go to Online Store → Themes → Customize.

    • Open a Collection page (the one that shows product listings).

    • In the left panel, look for “Collection pages” or “Sidebar” section settings — some themes include an option to choose “Sidebar position: Left/Right.”

  2. Locate the CSS if no option exists

    • In your theme editor → Edit code, look under:
      assets/ → files like base.css, global.css, or component-collection.css.

    • These replace theme.css or main.css in newer themes.

    • You can usually add a small rule there such as:

      .collection__main {
        flex-direction: row-reverse;
      }
      
      

      (This simply flips the sidebar and product grid position.)

  3. If layout is JSON-driven

    • Some sections are defined in Templates → collection.json and Sections → main-collection.liquid.

    • Inside that file, you may see code like {% section 'sidebar' %} — moving this below or above the product grid section can change the order.

If you share a screenshot or mention where your sidebar currently sits, I can help pinpoint the exact file to adjust.

Do you want your thumbnails be to the right of the main image?
Then paste this code into “Product info” section “Custom CSS” setting:

@media only screen and (min-width: 768px) {
  .product-image-container.product-image-container--thumbnails {
    padding-left: 0px;
    padding-right: 90px;
  }
  .product-image-container.product-image-container--thumbnails scroll-shadow {
    left: auto;
    right: 0;
  }
}

You are amazing! Thank you very much! It worked :slight_smile: