Shopify themes, liquid, logos, and UX
Hi
I am using the Debut theme and I would like to move the product descriptions up the page to sit under the title rather than at the bottom. Is there a menu option to do this rather than using coding?
Thanks
Hello @rubyfriday,
For that You have to customize product-template.liquid
Hey there, @rubyfriday
Bo here from Shopify Support!
That is a great question, and @oscprofessional is correct, you will need to edit the code of the product-template.liquid to make this happen. There is something to consider before doing so. If you were to move the description to right under the product title, you would be moving the Add to Cart functionality lower down the page. Our themes are optimized for the best conversions and we have found that if a customer has to scroll to find the Ass to Cart, they are less likely to checkout. Just something for you to consider.
This tutorial is specific to an unedited version of the Debut theme, (VERSION 16.3.0). We cannot guarantee results for themes that have been modified with custom coding and/or apps. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial.
<h1 class="product-single__title">{{ product.title }}</h1> <div class="product__price"> {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %} </div> {%- if shop.taxes_included or shop.shipping_policy.body != blank -%} <div class="product__policies rte" data-product-policies> {%- if shop.taxes_included -%} {{ 'products.product.include_taxes' | t }} {%- endif -%} {%- if shop.shipping_policy.body != blank -%} {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%} </div> {%- endif -%}
<h1 class="product-single__title">{{ product.title }}</h1> <div class="product__price"> {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %} </div> {%- if shop.taxes_included or shop.shipping_policy.body != blank -%} <div class="product__policies rte" data-product-policies> {%- if shop.taxes_included -%} {{ 'products.product.include_taxes' | t }} {%- endif -%} {%- if shop.shipping_policy.body != blank -%} {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%} </div> {%- endif -%} <div class="product-single__description rte"> {{ product.description }} </div>
<h1 class="product-single__title">{{ product.title }}</h1> <div class="product-single__description rte"> {{ product.description }} </div> <div class="product__price"> {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %} </div>
Once all that is done (either or) you can click save!
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
All the Best,
Bo
To learn more visit the Shopify Help Center or the Community Blog.
Hi everyone!
I have quite the opposite problem
I want the description to be below the Add to cart button.
My code is customized (I bought the shop off of someone else) so I'm having issues finding the above mentioned lines in product-template.liquid
Here is a screenshot of my issue:
Thanking you in advance!
PS: I know the product images are too large 😉
Hello @French,
Can you please share your site url
@oscprofessional wrote:Hello @French,
Can you please share your site url
Hello! Thanks for your reply. It's https://prestej.com
Btw: I'm using Debut Theme
Hey there, @French
I was just taking a look at your store and it does not appear to be using Debut - I was able to use the Chrome inspect tool to double check:
As this is a third party theme I would recommend reaching out to the developers of this minor edit as per this guide.
All the Best,
Bo
To learn more visit the Shopify Help Center or the Community Blog.
Bonjour @Bo ,
Sorry my bad! It's the Prestige Theme 🙈
So my previous post is irrelevant to this whole thread. I apologize for that.
Thanks a lot for your help.
Best,
French
Hi, i would like to move product description to below the item photo, can any one help?
Hello Chenhong,
Did you manage to move the description under the image with Debut theme?
And I interesseted as well on how did you manage to create different tabs like 'products benefits' , 'usage' etc , It seems like the basic it only one tab.
Thank you for advance
Maya
I changed the code as recommended in this forum and it all worked out ok! However, there is a glitch with a few random product that have variants. The description appears to be in a weird description box for a few products. I have attached a screenshot and am seeking advice on how to get it out of this box. This is the weird description box that comes up:
This is what it is supposed to look like:
Let me know! Thank you so much.
Hello, Bo and all!
My similar query but the one that I would move in the product pages would be the custom content. I know that you can just drag to rearrange it in the Homepage but for the product pages, it does not have that option.
I would like to have the custom content sit above the reviews so it would look better on mobile, like this.
Please advise! And thank you in advance.
Hey there, @Puy
I would love to help with this. In order to do so, could you please send me a link to this page in question so that I can take a look at the code natively using Google's inspect tool? I do need a native link to do so.
All the Best,
Bo
To learn more visit the Shopify Help Center or the Community Blog.
Hey @Puy ,
Unfortunately we don't have access to this theme, but we see that if you swap the `shopify-section-custom-content` with `shopify-section-feature-columns`, probably in product.liquid, or a similar file, you'll be able to see them swapped.
Hope this helps!
Hi Bo,
When I try to do that and hit "Save" I get this error message: This file contains the following errors: Line 271 — Liquid syntax error: Unknown tag 'schema'. Do you know what I'm doing wrong?
Hey there, @victorproducts
This tutorial is nearly a year old so the version of the theme you are using may be too different from the version in this tutorial. Could you please confirm the name of your theme and provide me with a link to your store so that I can do some digging into this for you? Thank you!
All the Best,
Bo
To learn more visit the Shopify Help Center or the Community Blog.
Hey there, @victorproducts
I do also need a link to your store, thank you.
All the Best,
Bo
To learn more visit the Shopify Help Center or the Community Blog.
Thank you! You will need to follow these steps:
1. Go to Online Store > Actions > Edit Code.
2. Open the product-template.liquid file in the Sections folder.
3. Find the following code and cut it:
<div class="product-single__description rte">
{{ product.description }}
</div>
4. Paste the code right above the following code on line 141:
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}
{%- unless section.settings.show_variant_labels %} product-form--hide-variant-labels {% endunless %}
{%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
{%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
{%- endcapture %}
5. Click Save.
Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!
All the Best,
Bo
To learn more visit the Shopify Help Center or the Community Blog.
Hey @Bo ,
Hoping you can assist. I need to move the description below Buy It Now button.
My store URL is: https://billiardlightstore.com/products/mardian-tiffany-pool-table-light
Password: skeely
TIA
Hey there, @IRN
It looks as though you have some custom code in your theme to display an estimated time of delivery, are you looking to switch your product description and this shipping information around? I would advise against this as our UX team has found that having the shipping estimation as easily visible as possible i.e. right under the buttons, would be optimal for encouraging checkouts. I am unable to assist you with this as this added code was not added by me and so, I do not know what has been added and where. I would recommend reaching out to whomever made this customization fot you directly or alternatively, hiring a Shopify Expert.
All the Best,
Bo
To learn more visit the Shopify Help Center or the Community Blog.
solved
Hi! This was super helpful, however, once complete, the description appears in a weird format. I would like it to be bullet point-form.... if possible.
Theme is Supply.
Site is : https://shop.oultoncollege.com/products/hoodie
can you help?
Hi Bo,
Thank you for the tutorial. I would also like to do this but only on a specific group/collection of products is this possible? If so please could you advise how?
Very much appreciated. Thank you!
Richie.
Hey there, @gulppp
That is a really great question. In order to do this for only specific products, you will need to create an alternate template for your products. This guide goes through doing just that in great detail. Have a look and try it out, let me know if you need any support regarding this.
All the Best,
Bo
To learn more visit the Shopify Help Center or the Community Blog.
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