Move product description bellow product images

[INKLY]

Hi, 

Does anyone know how I can move my product description bellow my product images on desktop? 

 

Store URL: https://servicedetable.com/collections/dinnerware/products/brown-ceramic-dinnerware-set?variant=4920...

Inspiration: https://www.westwing.de/cord-ecksofa-melva-4-sitzer-in-beige-133299.html?simple=DEQ21WES98173-167945...

[JasmeetVT14313 · Accepted solution]

Hi @INKLY 

I will need access to the code so that I can guide you as per your theme.

Feel free to contact me or share code here

[INKLY]

Thank you Jasmeet for your help! 

[rajweb]

Hey @INKLY ,

Follow these steps:

1. Go to Online Store > Themes > Edit Code 

2. Open the following file:

-main-product.liquid or product.liquid  (depending on the theme).

-Locate where the product images section is, likely using this block

liquid:

{{ product.media }}

Now, paste your accordion code below the product images section like this:

liquid:

<div class="product-media">
   {{ product.media }}
</div>

<div class="accordion">
   <div class="accordion-item">
      <div class="accordion-header">
         <h2>About This Product &amp; Why You'll Love It</h2>
         <span class="accordion-toggle">-</span>
      </div>
      <div class="accordion-content open">
         <p>Elevate your dining experience with this <strong>Brown Dinnerware Set</strong>, a perfect blend of sophistication...</p>
      </div>
   </div>
   <div class="accordion-item">
      <div class="accordion-header">
         <h2>Available in Various Sizes</h2>
         <span class="accordion-toggle">+</span>
      </div>
      <div class="accordion-content">
         <p>This set is perfect for different group sizes, whether you’re looking for Dinnerware sets for 4...</p>
      </div>
   </div>
   <div class="accordion-item">
      <div class="accordion-header">
         <h2>What’s Included</h2>
         <span class="accordion-toggle">+</span>
      </div>
      <div class="accordion-content">
         <p>Dinnerware sets for 4 (12 pieces): 4 dinner plates, 4 salad plates, 4 soup bowls...</p>
      </div>
   </div>
   <div class="accordion-item">
      <div class="accordion-header">
         <h2>Product Details &amp; Key Features</h2>
         <span class="accordion-toggle">+</span>
      </div>
      <div class="accordion-content">
         <p><strong>Material:</strong> Made from premium ceramic, known for its durability and smooth glazed finish...</p>
      </div>
   </div>
   <div class="accordion-item">
      <div class="accordion-header">
         <h2>Shipping &amp; Returns</h2>
         <span class="accordion-toggle">+</span>
      </div>
      <div class="accordion-content">
         <p>{{ shop.policy.shipping_policy }}</p>
      </div>
   </div>
   <div class="accordion-item">
      <div class="accordion-header">
         <h2>About Our Brand</h2>
         <span class="accordion-toggle">+</span>
      </div>
      <div class="accordion-content">
         <p>{{ shop.brand_info }}</p>
      </div>
   </div>
</div>

This setup will display your product description accordion below the images.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 Best Regard,

Rajat Sharma