Shopify themes, liquid, logos, and UX
This tutorial outlines how to make your product description full width. Following this tutorial will take your description from looking like this:
To this:
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.
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 ‘<hr>’ 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.
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:
3. Click Save.
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.
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.
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.
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.
To learn more visit the Shopify Help Center or the Community Blog.
with Narrative there is no chance to do this edit?
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
To learn more visit the Shopify Help Center or the Community Blog.
Hi Bo,
Thanks for sharing. But I could only find the 'needed' edit code in Snippets/product-template.liquid.
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.
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!
Thanks for the heads up.
The 30 minutes of complimentary expert design assistance is from Shopify or the other professionals?
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:
To learn more visit the Shopify Help Center or the Community Blog.
Thanks for the info.
I'm using Debutify 2.0.2 theme with 'Best Currency Converter' App.
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
To learn more visit the Shopify Help Center or the Community Blog.
Thanks a lot for this!!! If i place an image in the description, how can I also make it full width?
I'm using Debut, but when I follow the instructions it makes the text hug the very very edge of my screen on the left. Is there anyway to fix this with a margin?
Wow great job thanks !!!
I would like to know how to reduce blank space on the margin right and left on the main thème ...
Because it's too big on the margins ..... for the Home page And Article or Blog Page
All good for product page and collection page
It's for Sense Theme, thanks in advance !! 🙂
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024