Re: Product Page Layout - Put product description under product image

Solved

Product Page Layout - Put product description under product image

WoofStore
Tourist
8 0 3

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. 

V1.png        V2.png

 

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!!

Accepted Solution (1)
made4Uo
Shopify Partner
3839 716 1177

This is an 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>

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 14 (14)

made4Uo
Shopify Partner
3839 716 1177

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

made4Uo_2-1685469793563.png

 

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
WoofStore
Tourist
8 0 3

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
Shopify Partner
3839 716 1177

Hi @WoofStore 

 

Make sure you keep the description block in your theme editor

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
WoofStore
Tourist
8 0 3

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
Shopify Partner
3839 716 1177

Hi @WoofStore 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
WoofStore
Tourist
8 0 3

Hi @made4Uo ,

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

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

made4Uo
Shopify Partner
3839 716 1177

This is an 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>

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
WoofStore
Tourist
8 0 3

Hey @made4Uo ,

Amazing! It's working now.

Thanks a lot!!!

EagleHunted
Excursionist
42 0 3

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

mcclark
Shopify Partner
12 0 3

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
Shopify Partner
12 0 3

Thanks!  Works nicely 🙂

mcclark
Shopify Partner
12 0 3

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

Leilani_LPC
Tourist
10 0 1

@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?

 Screen Shot 2023-12-08 at 5.04.50 PM.png

Kraftistaan
Visitor
1 0 0

Hey, How do enable sticky content as you mentioned?