Tutorial: Making Your Product Description Full Width

Shopify Staff
Shopify Staff
1525 152 437

This tutorial outlines how to make your product description full width. Following this tutorial will take your description from looking like this: 

02-58-ihcrs-fylr3

 

To this:

02-02-mbdt5-o6nv2

 

 

 

 

Debut

1. Under Sections open the ‘product-template.liquid’ file.

2Find {{ product.description }}. Copy and remove everything between the opening and closing <div brackets and then paste it in the new location as shown below: 02-42-k4f2y-z2eie                                                                                                                                                               

The final result should look like this:       

02-45-2qk2s-ta1d3        

3. Click Save. 

                                 

Venture 

1. Under Sections open the ‘product-template.liquid’ file.
2. Find {{ product.description }}. Copy and remove everything between the opening and closing <div brackets and paste it in the new location as shown below: 

02-35-2xm1t-8msj1

4. In the same file, find {% if section.settings.social_sharing_products %} and delete the ‘<hr>’ tag directly below it and click Save.

The final result should look like this:

02-42-scpnf-nes2p

5. Click Save. 

6. Open ‘theme.scss.liquid’ and at the bottom of the file paste the following CSS:

 

 


.rte.product-single__description {
 padding-bottom: 50px;
}

@media only screen and (max-width: 749px) {  
  .rte.product-single__description {
    padding-left: 15px;
  }
}

 

 

7. Click Save. 

 

Minimal

1. Under Sections open the ‘product-template.liquid’ file.

2. Find {{ product.description }}Copy and remove the highlighted code surrounding it, as seen below including the social sharing section. Paste this code to the location shown in the image:

02-36-nn33o-cap8d

The final result should look like this:

02-45-p4f3b-ptzi6

3. Click Save.

 

Brooklyn

1. Under Sections open the ‘product-template.liquid’ file.

2. Find {{ product.description }} Copy and remove the code surrounding it, as seen below including the social sharing section and paste it to the location shown in the image:

05-51-7pn66-pj3m2

The final result should look like this:

05-54-vb8ib-g58jq

3. Click Save. 

 

Boundless

1. Under Sections open the ‘product-template.liquid’ file.

2. Find the following code in that file: 

 

 

<div class="grid__item {% if section.settings.product_form_width == 'large' %}medium-up--four-twelfths medium-up--push-three-tenths{% else %}large-up--one-half large-up--push-three-twelfths medium-up--six-twelfths medium-up--push-two-twelfths{% endif %}">

 

 

Replace it with the following: 

 

 

<div class="grid__item medium-up--one-whole custom-description-width">

 

 

3. Find the following code: 

 

 

<div class="grid__item {% if section.settings.product_form_width == 'large' %}medium-up--three-twelfths medium-up--push-one-fifth{% else %}large-up--two-twelfths large-up--push-two-twelfths medium-up--three-twelfths medium-up--push-one-twelfth{% endif %}">

 

 

Replace it with the following: 

 

 

<div class="grid__item medium-up--six-twelfths  medium-up--push-three-twelfths">

 

 

4. Click Save.  

5. Open ‘theme.scss.liquid’ and at the bottom of the file add the following CSS: 

 

 

@media only screen and (min-width: 750px) {
  .product__form--add-to-cart {
    max-width: 100%;
    text-align: center !important;
  }
  
  .product__policies.rte {
    text-align: center; 
  }
  
  .product-single__description.rte {
    width: 97%;
  }
  
  .custom-description-width {
    padding-left: 30px !important;
  }
}

@media only screen and (max-width: 749px) {
  .custom-description-width {
    padding-left: 0;
  }
}

 

 

6. Click Save. 

 

Supply

1. Under Sections open the ‘product-template.liquid’ file.

2. Find {{ product.description }} Copy and remove everything between the opening and closing <div brackets as well as the social sharing section and paste it directly above the following code {% if section.settings.related_products_enable %} as shown below: 

02-39-yx10t-skv66

The final result will look like below:

02-43-yzzrv-srewy

3. Click Save. 

 

Simple 

The Simple theme already has this functionality built-in.

1. Go to Online store > Themes and then select "Customize" next to your current theme.

2. Click on Product pages from the dropdown on the top left-hand side of the customizer. Select Product pages on the left under sections as shown below:

02-27-7pmv0-cy5u1

3. You should then see the option to alternate between showing the description below the image and to the right:

02-23-lz37y-2avq4

4. Click Save. 

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

Excursionist
22 0 9

with Narrative there is no chance to do this edit?

Shopify Staff
Shopify Staff
1525 152 437

Hey there, @DonnieDarko 

 

Due to the unique layout of the Express and Narrative themes, this customization would not be compatible. I would recommend hiring a Shopify Expert. 

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Tourist
30 0 3

Hi Bo,

Thanks for sharing. But I could only find the 'needed' edit code in Snippets/product-template.liquid.

Screenshot (15).png

And where I should move the code set?

Also I want to have 3 reviews in full width ( there is only 1 review under the product description with the same width). Please advise how to do it.

 

0 Likes
Tourist
8 0 7

Fasar,

Your requests would be best made as its own post on Shopify Design's forum. I'm sure you will be able to find someone who has done it themselves or a professional who can offer help. Shopify will not give advice for your requests since they've explicitly said this is not what they support.

Also, remember you have 30 minutes of complimentary expert design assistance with every store on Shopify.

Cheers!

0 Likes
Tourist
30 0 3

Thanks for the heads up.

The 30 minutes of complimentary expert design assistance is from Shopify or the other professionals?

 

0 Likes
Shopify Staff
Shopify Staff
1525 152 437

Hey there, @Fasar 

 

Thank you for reaching out regarding this. I would recommend creating a new thread for your question on our design board as recommended above for your additional queries. Please also read Help Us Help You so you know all the relevant information to provide when looking for design support in the Shopify Community. 

 

As per your initial question about only being able to find the relevant code in the Snippets folder, could you please confirm which theme it is that you are using, please? If it is not a Shopify Supported theme I will be unable to help - from your screenshot it looks like it could be the Debutify theme which is supported by their own team here

 

As for the 30 minutes design time - this is actually 60 minutes of design time on Shopify Supported themes for all stores on the Basic Plan or higher. Third-party themes cannot avail of this time. Although Shopify Support is able to support a wide range of basic customizations, keep in mind that Shopify can't help with the following tasks:

  • Implementing unsupported tutorials
  • Customizing or troubleshooting themes that contain significant code changes
  • Installing, removing, or modifying third-party apps (apps not developed by Shopify)
  • Customizing or troubleshooting third-party code (code not developed by Shopify, including code from Experts and Forums)
  • Customizing or troubleshooting content added via the rich text editor.
  • Adding new fonts
  • Editing slideshows (including sizing, cropping and functionality)
  • Adding pop-ups
  • Adding additional add to cart buttons on product pages or collection pages
  • Changing drop-down menus into buttons
  • Providing advanced collection sorting and filtering
  • Making a theme wider or narrower
  • Making an unresponsive theme responsive
  • Adding infinite scroll (showing more products or content as the page scrolls)
  • Editing images (including cropping, adjusting color profiles, removing backgrounds, etc.)
  • Adding hover effects to product images
  • Adding labels or badges on collection pages
  • Adding color swatches
  • Implementing changes that provide misleading or deceptive information to customers
  • Moving features from one theme to another
  • Changing the color of payment icons
  • Editing the code for the checkout (except for Shopify Plus)
  • Custom translation services (including Order Printer and E-mail Notification Templates)
  • Providing coding instructions or feedback

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

Tourist
30 0 3

Thanks for the info. 

I'm using Debutify 2.0.2 theme with 'Best Currency Converter' App.

0 Likes
Shopify Staff
Shopify Staff
1525 152 437

Thank you for your response, @Fasar. As Debutify is not a Shopify Supported theme I will be unable to help. The Debutify theme is a third-party theme which is supported by their own team here

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes