Increase width of product description

Tourist
8 0 4

I am using the Supply theme and want to change the description block on the poduct page to run the fulll width of the page instead of leaving such a large blank area on the left.  I played around with product.liquid a little and almost got it by changing this line:

  <div class="grid-item large--three-fifths">

to

  <div class="grid-item large--one-whole">

But that messes up the layout of the top of the page (image, title, buy box).  I will very much appreciate any help with this.

Bill

0 Likes
Shopify Expert
9807 92 1560

The product page is split into two columns. The images on the left and the other stuff on the right. If you make the right column full width that will kind of do what you want, but as you've seen it effects everything within it.

Since you're only talking about the description you're going to need to move the that section outside of the right column <div> - perhaps (I've not tested the result) into it's own <div> using the grid-item large--one-whole class.

So like:

<div class="grid-item large--two-fifths"> pics... </div>
<div class="grid-item large--three-fifths"> form... </div>
<!-- new div below, that contains the description and reviews content -->
<div class="grid-item large--one-whole"> description... </div>

You'd probably want to move the reviews as well since that section will become quite long once you have reviews.

Before you starting tinkering too much with the html I'd suggest you make a theme copy, and work in the copy. This way you've still got a working version should you break something.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Tourist
8 0 4

Thanks Jason, got it sorted out now.  I like this look better and it also gives me the opportunitiy to show larger product images inline.  I also tweaked the top section to make the image slightly larger.  Here's an exampe of where I want to go with this, combined with Product Tabs, http://www.dad-n-lad.com/collections/acdelco/products/acdelco-d1802a-15665282.

For those who might come along looking for the same tweak, here's the simple instructions for making full width descriptions with Supply Theme:

Find this line in product.liquid:

     <div class="product-description rte" itemprop="description">

Immediately above that line insert these 2 lines:

     </div>
     <div class="grid-item large--one-whole">

Bill

4 Likes
New Member
1 0 0

Thanks for that super simple explanation Bill, I just implemented that in my store in about 10 seconds! That white space on the left has been bugging the crap out of me for ages.  

Thanks guys!

0 Likes
New Member
1 0 0

THANK YOU BILL!!!  I've been racking my brains over finding a theme with full width product descriptions, which are pretty much non-existent.

0 Likes
New Member
1 0 0

Hi,

Is there a 2019 update to this?

That code doesn't seem to exist in the product.liquid file anymore.

Trying to get the product description to go full width below the product images.

Thanks if you can help!

Sarah

0 Likes
Tourist
7 0 1

Did you find a resolution for the 2019 version?

 

0 Likes
New Member
1 0 0

Hi.

 

Its tha same solution, the file is in Sections> product-template.liquid Click Ctrl+f (Windows) or Cmd+f (mac) and put the word description.

 

:)

 

Hope it helps. 

0 Likes
New Member
17 0 0

For me this is not working :(

Code:

        {% endform %}
 
        <hr>
</div>
     <div class="grid-item large--one-whole">
        <div class="rte product-single__description" itemprop="description">
          {{ product.description }}
        </div>
 
        {% if section.settings.social_sharing_products %}
          <hr>
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
      </div>
    </div>
  </div>
</div>
0 Likes