FROM CACHE - en_header

Product page full width for Debutify

Solved
tgspack
Tourist
8 0 3

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.

Screen Shot 2020-03-06 at 6.20.06 PM.png

 

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.

Accepted Solution (1)

Accepted Solutions
RichardNguyen
Shopify Partner
1385 194 874

This is an accepted solution.

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

PageFly- Advanced Shopify Page Builder - Empowering 100.000+ active merchants.


Check our Evergreen List of Best Platforms To Sell Online.


Or our new series to Build The Perfect Mobile-Friendly Store.

View solution in original post

Replies 22 (22)
oscprofessional
Shopify Partner
12120 1883 2416

Hello @tgspack,

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

2020-03-06_16-05.jpg

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
tgspack
Tourist
8 0 3

product-template.liquid doesn't have content as you have shown 😞


oscprofessional
Shopify Partner
12120 1883 2416

@tgspack,

Can you please share your product-template.liquid file

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
tgspack
Tourist
8 0 3
{% comment %}
  The contents of the product.liquid template can be found in /snippets/product-template.liquid
{% endcomment %}
<div id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product-template" data-enable-history-state="true" data-scroll-to-image="{% if section.settings.image_layout == "stacked" %}true{% else %}false{% endif %}">
  {% include 'product-template' %}
</div>
 
{% unless product.empty == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% 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](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "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 %}
RichardNguyen
Shopify Partner
1385 194 874

It would be great if you can share your store URL

PageFly- Advanced Shopify Page Builder - Empowering 100.000+ active merchants.


Check our Evergreen List of Best Platforms To Sell Online.


Or our new series to Build The Perfect Mobile-Friendly Store.

tgspack
Tourist
8 0 3

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

 

This is my store URL

RichardNguyen
Shopify Partner
1385 194 874

This is an accepted solution.

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

PageFly- Advanced Shopify Page Builder - Empowering 100.000+ active merchants.


Check our Evergreen List of Best Platforms To Sell Online.


Or our new series to Build The Perfect Mobile-Friendly Store.

tgspack
Tourist
8 0 3

Oh My Goodness, this helps sooooo much.

I've been looking for an answer for hoursssss.

Very appreciate for your help !


@RichardNguyen wrote:

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


 

DrTrujillo
Tourist
6 0 1

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"):

<p class="line-item-property__field">
<label for="name">Name</label>
<input required class="required" id="name" type="text" name="properties[Name]">
</p>

<p class="line-item-property__field">
<label for="date-of-birth">Date of Birth</label>
<input required class="required" id="date-of-birth" type="text" name="properties[Date of Birth]">
</p>

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/c/Shopify-Design/Product-pages-Get-customization-information-for-produ...

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.


arvidmueller
Tourist
42 0 1

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!

 

Screenshot 2020-04-10 17.52.57.png

Power2Fitness
New Member
8 0 0

@RichardNguyen wrote:

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


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:

 

 <div class="grid" itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="https:\{{ product.featured_image.src | img_url: 'grande' }}">
<meta itemprop="name" content="{{ product.title }}">
<meta  itemprop="description" content="{{ product.description | strip_html | truncatewords: 15}}">
 {% for field in product.metafields.areviews %}  {{ field | last }}  {% endfor %} 
<meta itemprop="brand" content="{{ product.vendor }}"><div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ variant.price | divided_by: 100.00 }}">
</div></div>
 
{% comment %}
  The contents of the product.liquid template can be found in /snippets/product-template.liquid
{% endcomment %}
<div id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product-template" data-enable-history-state="true" data-scroll-to-image="{% if section.settings.image_layout == "stacked" %}true{% else %}false{% endif %}">
  {% include 'product-template' %}
</div>
 
{% unless product.empty == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% 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](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "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](https:\/\/fontawesome.com\/icons?d=gallery&s=solid&m=free)"
          },
          {
            "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](https:\/\/fontawesome.com\/icons?d=gallery&s=solid&m=free)"
          },
          {
            "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](https:\/\/fontawesome.com\/icons?d=gallery&s=solid&m=free)"
          },
          {
            "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 %}
mraculus
Tourist
5 0 1

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!!

arjun0274
New Member
4 0 0

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 : )

futura
New Member
1 0 0

Hi RichardNguyen,

 

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

thanks!

matiasduart3
New Member
5 0 0

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

ShyamPhad
Tourist
7 0 1

Hey I use Debutify Theme &This Code Worked fine

But,

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???

pr2
New Member
1 0 0

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

tobiass
New Member
1 0 0

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

Thanks

Reya
New Member
1 0 0

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.