How To Make Shopify Product Description Full Width

Shopify - how to make full width product descriptions

Written by Ros

April 5, 2020

Before explaining how to make shopify product description full width, let’s dive into a quick summary about shopify and product descriptions.

What is Shopify?

Shopify is a popular E-commerce platform that gives you everything you need to create your own online store using Shopify Platform.

Shopify has become famous on e-commerce word because of the great success that its users have met.

What is a product description?

The pages that present the products on an eshop, called product pages.

The texts that describe the products in product pages called product descriptions.

What is the most common Layout of Product Descriptions on Shopify?

The product page layout, as the rest of the standard ecommerce pages, depend on the theme that have been installed.

Let’s see what is the most common product page layout in most of the free shopify themes.

This is how product descriptions look like in most free themes on Shopify

As you can see the product description is now full width by default, but it’s just a right column.

Why you may want to change the single column product description

  • In case you have a lot of media content like images and videos that you want to include in product descriptions, it would not seem nice if they are pushed in a small column
  • If you have long product descriptions, the single-column description will make your page much longer. It is not so much user-friendly to make the user scrolling down.


1. Go to Online Store>Themes and select the Theme you want to customize the product description. Click on edit code.

Click on Edit Code

2. Find the product.template.liquid file

Search for the product.template.liquid file

3. Click on the product.template.liquid file

open it

4. Search for the code

 <div class="product-single__description rte" itemprop="description">
            {{ product.description }} abc

You can find it faster by use the web page search option.
Type ctrl+F and paste the code in the search box.
You will be lead directly to the code.

5. Copy and Cut the code

Here is the code. Cut it.

5. Paste it after the last </div> and before the {% unless,

it would look like this:

Here how it seems when you have paste it to the right place

6. Click Save at the upper right corner

And here you are. You are set!

Did it work for you?

Let us know, if you experienced any issue.
Write your questions at the comments and we will answer to you ASAP.

You May Also Like…

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.


  1. phabe

    Hello, I can’t find this code in the tutorial, what should I do?thank u

    • Ros

      Hey phabe,

      Ctrl+F and paste some piece of the code in the search bar that will appear.
      If the code does not exist, make sure that you are using the same theme and you are in the correct file.

      I hope it helps.


Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This