How to move description to the left, under the product images

Topic summary

A user seeks to reposition the product description to the left side of the page, beneath product images on their Shopify store.

Solutions Proposed:

  • JavaScript approach: One responder suggested adding custom JavaScript code to the theme.liquid file (before the closing </body> tag) to move the description element. This solution did not work for the original poster.

  • CSS approach: Another responder recommended modifying the theme’s CSS file (base.css, theme.css, or styles.css) by adding:

.product-description {
  text-align: left;
}

Key Steps:

  1. Access Shopify Admin → Online Store → Themes
  2. Edit Dawn theme code
  3. Locate and modify the appropriate CSS file
  4. Use browser developer tools to inspect elements and verify correct class names
  5. Preview changes to ensure proper alignment

The discussion remains open, as the effectiveness of the CSS solution has not been confirmed. Users may need tailored support for theme customization or app integration.

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

I need to move the description to the left

Hi @Isakeve08

You can try to add this JS code in theme.liquid > Scroll to the bottom of the file and add the following JavaScript code just before the closing tag:

document.addEventListener('DOMContentLoaded', () => {
    const detailsAccordion = document.querySelector('.product-info__accordion');
    const galleryWrapper = document.querySelector('.product-gallery__ar-wrapper');
    
    if (detailsAccordion && galleryWrapper) {
        galleryWrapper.appendChild(detailsAccordion);
    }
});

It gonna looks like this:

Hope it helps!

Didnt work.

Hi @Isakeve08

To align the description to the left, you will need to modify the CSS of your theme. Here’s how you can do it:

  1. Go to your Shopify Admin.
  2. Navigate to Online Store > Themes.
  3. Find the Dawn theme and click Actions > Edit code.
  4. Locate the CSS File: In the left sidebar, under the Assets folder, look for the base.css file (or it might be named differently, like theme.css or styles.css).
  5. Add Custom CSS: Add the following CSS to the file to align the description to the left:

.product-description {
text-align: left;
}

Ensure you are targeting the correct class. If the class name is different, you may need to inspect the element using the browser’s developer tools to get the exact class name. Preview your store to ensure the description is aligned to the left as desired.

If you need further assistance with theme customization or app integration, consider reaching out to us for tailored support.

Regards,

Ina