Product Page Layout - Put product description under product image

[WoofStore]

Hi there,

I was wondering if there is any way to put the product description underneath the product image while still keeping all my collapsible content on the right? I am using Sense theme. 

        

First picture is the curent layout, second layout is what I'm trying to do. (I zoomed-out this is why the layout looks a little weird). I would like to do that change for desktop only, as the mobile layout is perfect!

Anyone has done that before and can help? That would be much appreciated! 

Thanks in advance!!

[made4Uo]

Hi @WoofStore 

I assume you have the updated version of Sense theme. 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Section folder and open the main-product.liquid file
3. Find the  {% render 'product-media-gallery', variant_images: variant_images %}. Refer to image below for placement

4. Place the code below at the next line. Make sure to SAVE

        <div class="product__description rte quick-add-hidden product-description--desktop" {{ block.shopify_attributes }}>
          {{ product.description }}
        </div>
      <style>
        .product__description.rte:not(.product-description--desktop) {
          display: none
        }
        @media only screen and (max-width: 750px) {
          .product__description.rte {
            display: block
          }

          .product__description.rte.product-description--desktop {
            display: none
          }
        }
      </style>

NOTE: This will not work together with sticky content enabled

[WoofStore]

Hi!

Thank you for the tip, it worked on desktop, however it completely deleted the description for the mobile version, do you know how I could fix it?

Thanks a lot!

[made4Uo]

Hi @WoofStore 

Make sure you keep the description block in your theme editor

[WoofStore]

Hi,
Yes I kept the description block in the theme editor, but it's empty... I tried moving it as well for mobile, however, it just display 2 lines (one top and one bottom, to show a section is there, but there is no text...

I have disabled sticky content as well, but still the same issue for mobile..

Any advices?

[made4Uo]

Hi @WoofStore 

You probably have place some custom codes. Please share your website instead. 

[WoofStore]

Hi @made4Uo ,

Sure, here's the website : https://thewoofery.co/products/the-harness-gray

We're still building it 🙂 Thanks for the help!!

[made4Uo · Accepted solution]

Hi @WoofStore 

Sorry. Just review my code. Please replace the code I provided with the code below

        <div class="product__description rte quick-add-hidden product-description--desktop" {{ block.shopify_attributes }}>
          {{ product.description }}
        </div>
      <style>
        .product__description.rte:not(.product-description--desktop) {
          display: none
        }
        @media only screen and (max-width: 750px) {
          .product__description.rte:not(.product-description--desktop) {
            display: block
          }

          .product__description.rte.product-description--desktop {
            display: none
          }
        }
      </style>

[WoofStore]

Hey @made4Uo ,

Amazing! It's working now.

Thanks a lot!!!

[EagleHunted]

what theme is it ? and where i can edit this code ? Does it work for Dawn Theme?

[mcclark]

This worked great to put the content under the product picture!  Only thing is have you found out how to keep the sticky menu working though?  

[mcclark]

Thanks!  Works nicely 🙂

[mcclark]

Only problem the tabs within my custom liquid stopped working only in mobile view.  Had to change it back.  

[Leilani_LPC]

@made4Uo 

Thank you so much for this! It has solved the problem I have watched about 15 youtube videos to try and figure out! 

1 quick question. How do I add some spacing between the pictures and the description?

 

[Kraftistaan]

Hey, How do enable sticky content as you mentioned?