How can I make product page descriptions full width in Debutify?

I’m using Debutify as my theme, but I find the product page description are all lining on the right side which is shown as below.

I tried to add this code at the bottom of Theme → edit code → asset → theme.scss.liquid

.product-single__description.rte {	clear: both;
}

but it doesn’t work for my site.

I just wanna have a full width description underneath the images, can anyone help.

Hello @tgspack ,

  1. Go to Online Store->Theme->Edit code
  2. Sections->product-template.liquid

product-template.liquid doesn’t have content as you have shown :frowning:

1 Like

@tgspack ,

Can you please share your product-template.liquid file

{% comment %}
The contents of the product.liquid template can be found in /snippets/product-template.liquid
{% endcomment %}

{% include 'product-template' %}

{% unless product.empty == empty %}

{% endunless %}

{% schema %}
{
“name”: “Product pages”,
“class”: “product-section”,
“settings”: [
{
“type”: “header”,
“content”: “Product photos”
},
{
“type”: “select”,
“id”: “image_layout”,
“label”: “Image display”,
“default”: “stacked”,
“options”: [
{
“value”: “stacked”,
“label”: “Stacked”
},
{
“value”: “thumbnail”,
“label”: “Thumbnail”
}
]
},
{
“type”: “select”,
“id”: “product_photo_alignement”,
“label”: “Image alignement”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “right”,
“label”: “Right”
}
]
},
{
“type”: “checkbox”,
“id”: “enable_zoom”,
“label”: “Enable image zoom”,
“default”: true
},
{
“type”: “header”,
“content”: “Product details”
},
{
“type”: “checkbox”,
“id”: “product_vendor”,
“label”: “Show vendor”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “product_title_size”,
“label”: “Big product tite”,
“default”: false
},
{
“type”: “select”,
“id”: “product_header_alignement”,
“label”: “Alignement”,
“default”: “”,
“options”: [
{
“value”: “”,
“label”: “Left”
},
{
“value”: “text-center”,
“label”: “Center”
}
]
},
{
“type”: “select”,
“id”: “product_selector”,
“label”: “Variant picker type”,
“options”: [
{
“value”: “radio”,
“label”: “Button”
},
{
“value”: “select”,
“label”: “Dropdown”
}
]
},
{
“type”: “checkbox”,
“id”: “quantity_enabled”,
“label”: “Show quantity picker”
},
{
“type”: “checkbox”,
“id”: “button_cart_icon”,
“label”: “Show button icon”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Lets customers check out directly using a familiar payment method. Learn more”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_description”,
“label”: “Show description”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “social_sharing_products”,
“label”: “Enable product sharing”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_product_tags”,
“label”: “Show product tags”,
“default”: true
}
]
}
{% endschema %}

It would be great if you can share your store URL

https://www.tgs-pack.com/

This is my store URL

Change the content of your snippets/product-template.liquid file with this https://pastebin.com/raw/WGcg3er2

4 Likes

Oh My Goodness, this helps sooooo much.

I’ve been looking for an answer for hoursssss.

Very appreciate for your help !

1 Like

Hello! It, seems you have a decent amount of code knowledge Richard Nguyen, I am also using the Debutify theme and was trying to add Custom Form Fields to a new Product Template but just like the friend here the Product. template.liquid located in the Sections ara seems to have different coding. Where should I add the UI Elements I generated for the Custom Text Fields? I tried contacting Support but they had no idea how to do it. My store URL is www.auricjewellers.com

Here are the UI elements I wish to add ( one for "Name, one for “Date of Birth”):

Name

Date of Birth

I wanted to add them just above the Add to Cart Button in that same order but have failed to find where to add it or if there is some extra step i am missing.

This is the guide I was following:
https://community.shopify.com/topic/616503

It would be incredible if you could help me with this, I would really appreciate it. So far no one seems to be able or want to help with this.

Hey guys I´m using the debutify theme and want to center the “guarantee block”, so that the individual elements are evenly distributed, but also centered. I tried everything, but nothing works. It would be cool if it were centered on the mobile view too. My website url is: https://good-gifts24.de/ . Thank you for your answers!

Hi Richard,

I am facing the same issue. I would really appreciate if you can help me too. Thanks in advance.

My website is www.power2fitness.com

and here is the product-template.liquid file:

{% for field in product.metafields.areviews %} {{ field | last }} {% endfor %}

{% comment %}
The contents of the product.liquid template can be found in /snippets/product-template.liquid
{% endcomment %}

{% include 'product-template' %}

{% unless product.empty == empty %}

{% endunless %}

{% schema %}
{
“name”: “Product pages”,
“class”: “product-section”,
“settings”: [
{
“type”: “header”,
“content”: “Product photos”
},
{
“type”: “select”,
“id”: “image_layout”,
“label”: “Image display”,
“default”: “stacked”,
“options”: [
{
“value”: “stacked”,
“label”: “Stacked”
},
{
“value”: “thumbnail”,
“label”: “Thumbnail”
}
]
},
{
“type”: “select”,
“id”: “product_photo_alignement”,
“label”: “Image alignement”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “right”,
“label”: “Right”
}
]
},
{
“type”: “checkbox”,
“id”: “enable_zoom”,
“label”: “Enable image zoom”,
“default”: true
},
{
“type”: “header”,
“content”: “Product details”
},
{
“type”: “checkbox”,
“id”: “product_vendor”,
“label”: “Show vendor”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “product_title_size”,
“label”: “Big product tite”,
“default”: false
},
{
“type”: “select”,
“id”: “product_header_alignement”,
“label”: “Alignement”,
“default”: “”,
“options”: [
{
“value”: “”,
“label”: “Left”
},
{
“value”: “text-center”,
“label”: “Center”
}
]
},
{
“type”: “select”,
“id”: “product_selector”,
“label”: “Variant picker type”,
“options”: [
{
“value”: “radio”,
“label”: “Button”
},
{
“value”: “select”,
“label”: “Dropdown”
}
]
},
{
“type”: “checkbox”,
“id”: “quantity_enabled”,
“label”: “Show quantity picker”
},
{
“type”: “checkbox”,
“id”: “button_cart_icon”,
“label”: “Show button icon”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Lets customers check out directly using a familiar payment method. Learn more”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_description”,
“label”: “Show description”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “social_sharing_products”,
“label”: “Enable product sharing”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_product_tags”,
“label”: “Show product tags”,
“default”: true
}
,
{
“type”: “header”,
“content”: “Product tabs”
},
{
“type”: “checkbox”,
“id”: “dbtfy_product_tabs_first”,
“label”: “Open first tab”,
“default”: true
}
],
“blocks” : [
{
“type”: “description”,
“name”: “Description”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “dbtfy_product_tabs_icon”,
“label”: “Icon”,
“default”: “list”,
“info”: “Enter the name of any free solid icons on FontAwesome
},
{
“type”: “text”,
“id”: “dbtfy_product_tabs_title”,
“label”: “Title”,
“default”: “Details”,
“info”: “To hide the default description, uncheck the "Show description" box above.”
}
]
},
{
“type”: “reviews”,
“name”: “Reviews”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “dbtfy_product_tabs_review”,
“label”: “Show star ratings”,
“default”: true
},
{
“type”: “text”,
“id”: “dbtfy_product_tabs_icon”,
“label”: “Icon”,
“default”: “thumbs-up”,
“info”: “Enter the name of any free solid icons on FontAwesome
},
{
“type”: “text”,
“id”: “dbtfy_product_tabs_title”,
“label”: “Title”,
“default”: “Reviews”,
“info”: “To show your review widget in product tabs, go in "Review app" > "Review widget" and select the "In product tabs" position”
}
]
},
{
“type”: “text”,
“name”: “Text/Image/HTML”,
“settings”: [
{
“type”: “select”,
“id”: “text_alignment”,
“label”: “Text alignment”,
“default”: “text-center”,
“options”: [
{
“value”: “”,
“label”: “Left”
},
{
“value”: “text-center”,
“label”: “Center”
},
{
“value”: “text-right”,
“label”: “Right”
}
]
},
{
“type”: “text”,
“id”: “dbtfy_product_tabs_icon”,
“label”: “Icon”,
“info”: “Enter the name of any free solid icons on FontAwesome
},
{
“type”: “text”,
“id”: “dbtfy_product_tabs_title”,
“label”: “Title”,
“default”: “Rich text”
},
{
“type”: “richtext”,
“id”: “dbtfy_product_tabs_text”,
“label”: “Text”
},
{
“type”: “image_picker”,
“id”: “dbtfy_product_tabs_image”,
“label”: “Image”
},
{
“type”: “html”,
“id”: “dbtfy_product_tabs_html”,
“label”: “HTML”
},
{
“type”: “header”,
“content”: “Visibility settings”
},
{
“type”: “text”,
“id”: “dbtfy_product_tabs_type”,
“label”: “Product type”,
“info”: “Comma-separated”
},
{
“type”: “text”,
“id”: “dbtfy_product_tabs_tag”,
“label”: “Product tag”,
“info”: “Comma-separated”
},
{
“type”: “product”,
“id”: “dbtfy_product_tabs_product”,
“label”: “Product”
},
{
“type”: “collection”,
“id”: “dbtfy_product_tabs_collection”,
“label”: “Collection”
}
]
}
] } {% endschema %}

Hi, I noticed you were able to get custom fields in your product pages. Do you mind sharing how you did this? I’ve also been stuck for a while. Thanks so much!!

It just brinbs the image to right from left, but doesn’t use the full width of the image.

How can I do that? I want the image to fill the page entirely, your help would be much appreciated.

Thanks : )

Hi RichardNguyen,

i have same problem here. Here is my website: www.top-medix.com

thanks!

Hi buddy, could you share the code of the newsletter with me?
thanks u

Hey I use Debutify Theme &This Code Worked fine

But,

I have Lost various Theme Inbuilt Theme Features Like Sticky Add to Cart Button, Live view, Delivery time && Many Other Features…

Is there any Way to Keep the Same format and Bring Back all the Debutify inbuilt Features Back???

Was facing the same issue, thanks for your help!!

I tried it and this worked, but now all the images are suddenly stacked on eachother. How do I fix this?

Thanks

Hi Richard, I have tried the code. But the pictures I have are not stacked. Is there a solution and I want the description text to be aligned right. Thank you.