moving description under image with advanced description

Hi.

I’m trying to move my product description and customer reviews underneath my image. I want customers to be able to read the product description below the image. i am using dawn theme

Does anyone know the CSS code I need to edit to do this? I’ve tried everything and can’t seem to find it. Is this possible?

Below is the link to the page I’m trying to edit.

unifiedbike-myshopify.com

Hey @unifiedbikeco

It’s definitely possible, but I’m afraid it’s not a copy/paste type of solution. With CSS only you can’t move the description to below the images. Developing a Javascript script to dynamically rearrange the items would be possible as well but not viable.

Ideally you’d need to change the positioning of the elements from within the html/liquid’s product template.

If you’re not comfortable with coding it’d be necessary to hire a dev to assist you with this. Customizations like this require some thorough testing across multiple devices/browsers as well to ensure it looks good on all screens.

Kind regards,
Diego

Good morning,

It’s possible, and it can be done quickly, but make sure you store the original styling code. I think that this is a solution for something close to what you asked. But once again, if you do plan to do this yourself, just make sure you know what you are changing.

Microsoft​ Edge - green-root-store ~ Customize Dawn ~ Shopify and 1 more page - Personal - Microsoft​ Edge - Watch Video

Microsoft​ Edge - green-root-store ~ Customize Dawn ~ Shopify and 1 more page - Personal - Microsoft​ Edge - Watch Video

elishaolade_1-1633587534834.gif

  1. Go to the code editor for your Dawn theme
  2. Go to section-main-product.css
  3. Highlight 41-52 and replace with the following
@media screen and (min-width: 990px) {
  .product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
    max-width: 100%;
    width: 100%;
  }

  .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    padding-left: 4rem;
    max-width: 100%;
    width: 100%;
  }
}

Can you provide a solution to move just the description and not the buttons? I would like our buttons to remain to the right of the image please!