moving description under image with advanced description

unifiedbikeco
New Member
6 0 0

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

Replies 3 (3)

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

elishaolade
Shopify Partner
12 0 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%;
  }
}

 

 

Tsetsi
Tourist
7 0 1

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!