This tutorial outlines how to make your product description full width. Following this tutorial will take your description from looking like this:
To this:
Note:
If you’re using a free theme from Shopify, then our Support team might be able to help you with this tutorial. Although Shopify can help you with many customizations, some kinds of customizations aren’t supported.
If you’re using a paid theme, then your theme was made by a third-party developer and Shopify’s Support team can’t help you with it. If you need help customizing a paid theme, then consider hiring a Shopify Expert. Similar to free themes, some kinds of customizations aren’t supported because of limitations associated with the theme or Shopify admin.
Disclaimer:
Due to the unique layout on the Express and Narrative themes, this customization would not be compatible.
Simple already has an admin option to enable this feature, instructions are located at the bottom of this tutorial.
Important:
The following tutorials are tested on themes published on Sept 2020
Debut
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 then paste it in the new location as shown below:
The final result should look like this:
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:
4. In the same file, find {% if section.settings.social_sharing_products %} and delete the ‘
’ tag directly below it and click Save.
The final result should look like this:
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:
The final result should look like this:
- 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:
The final result should look like this:
3. Click Save.
Boundless
1. Under Sections open the ‘product-template.liquid’ file.
2. Find the following code in that file:
Replace it with the following:
3. Find the following code:
Replace it with the following:
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:
The final result will look like below:
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:
3. You should then see the option to alternate between showing the description below the image and to the right:
4. Click Save.
