moving description under image with advanced description

Technical Q&A
1

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

2

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

3

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%;
  }
}
4

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!