Solved

Product page full width for Debutify

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)
PageFly-Richard
Shopify Partner
4164 935 1586

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 23 (23)

oscprofessional
Shopify Partner
15830 2369 3072

Hello @tgspack,

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

2020-03-06_16-05.jpg

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
tgspack
Tourist
8 0 3

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


oscprofessional
Shopify Partner
15830 2369 3072

@tgspack,

Can you please share your product-template.liquid file

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | 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 %}
PageFly-Richard
Shopify Partner
4164 935 1586

It would be great if you can share your store URL

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

tgspack
Tourist
8 0 3

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

 

This is my store URL

PageFly-Richard
Shopify Partner
4164 935 1586

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

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 !


@PageFly-Richard 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.


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

matiasduart3
New Member
5 0 0

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

Power2Fitness
New Member
8 0 0

@PageFly-Richard 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 %}
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
Visitor
1 0 0

Hi RichardNguyen,

 

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

thanks!

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
Visitor
1 0 0

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

tobiass
Visitor
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
Visitor
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.

NebrazECom
Excursionist
14 0 0

Man i never leave replies but you are a life saver. I have been stuck on this for so long, tried a million different answers. none worked. yours did. Legend.

TPM
Visitor
2 0 0

Hey Richard ,

 

Could you please help me as well? Same issue the "details" section of the product page is right aligned and I would like it to span the full width of the product page. 

 

Here is the code in my product-template.liquid 

 

Thanks a lot for your help

 


<!-- /snippets/product-template.liquid -->

<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">

<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

{% if template.name == "index" %}

<meta itemprop="sku" content="{{ product.variants.first.sku }}">

  <meta itemprop="gtin12" content="{{ product.variants.first.barcode }}">

  <div itemprop="review" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Review">

      <div itemprop="reviewRating" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Rating">

        <meta itemprop="ratingValue" content="4.9">

        <meta itemprop="bestRating" content="5">

    </div>

    <div itemprop="author" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Person">

        <meta itemprop="name" content="The Peoples Mask">

    </div>

  </div>

   <div itemprop="aggregateRating" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/AggregateRating">

     <meta itemprop="ratingValue" content="4.9">

        <meta itemprop="reviewCount" content="89">

     </div>

{% endif %}

 

{% assign current_variant = product.selected_or_first_available_variant %}

{% assign featured_image = current_variant.featured_image | default: product.featured_image %}

 

{% assign on_sale = false %}

 

{% if current_variant.compare_at_price > current_variant.price %}

  {% assign on_sale = true %}

{% endif %}

 

{% assign sold_out = true %}

 

{% if current_variant.available %}

  {% assign sold_out = false %}

{% endif %}

 

{% capture variantStatus %}

  {% if sold_out == true %}

    variant-soldout

  {% else %}

variant-available

  {% endif %}

{% endcapture %}

 

{%- assign enable_zoom = section.settings.enable_zoom -%}

{%- assign product_image_zoom_size = '1024x1024' -%}

{%- assign product_image_scale = '2' -%}

 

{% capture product_header_layout %}

  {% if section.settings.product_vendor %}

    <p class="product-single__vendor vendor" itemprop="brand">{{ product.vendor }}</p>

  {% endif %}

 

  {% if settings.review_badge == 'review_badge_above' %}

    {% include 'review-badge', badge_template: 'product' %}

  {% endif %}

 

  <h1 class="product-single__title {% if section.settings.product_title_size %}product-title-big {% endif %}" itemprop="name">

    {% if template != "product" %}

       <a {% unless section_onboarding %} href="{{ product.url }}?variant={{ current_variant.id }}"{% endunless %}>

    {% endif %}

 

    {% unless section_onboarding %}

      {{ product.title }}

    {% else %}

      {{ title }}

    {% endunless %}

 

    {% if template != "product" %}

      </a>

    {% endif %}

  </h1>

 

  {% if settings.review_badge == 'review_badge_under' %}

    {% include 'review-badge', badge_template: 'product' %}

  {% endif %}

{% endcapture %}

 

<div class="product-single{% if section.settings.product_photo_alignement == 'right' %} product-photos-right{% endif %}">

  <div class="box">

    <div class="wrapper">

      <div class="grid product-wrapper">

 

          <!-- images -->

          <div class="product-photos grid__item medium--six-twelfths large--seven-twelfths

            {% if section.settings.image_layout == "stacked" %}layout-stacked

            {% elsif section.settings.image_layout == "thumbnail" %}layout-thumbnail {% endif %}

            mobile-image-{{ section.settings.mobile_image }}">

 

            <div class="medium--hide large--hide text-center">

              {{ product_header_layout }}

            </div>

 

            <div class="product-single__photos slick-format slick-format-sm

              {% if section.settings.image_layout == "stacked" %}product-stacked__photos

              {% elsif section.settings.image_layout == "thumbnail" %}product-thumbnail__photos{% endif %}">

 

              {% if section_onboarding %}

                {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}

              {% else %}

                {% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}

                {% capture zoom_img_id %}FeaturedImageZoom-{{ featured_image.id }}-{{ image.id }}{% endcapture %}

                {% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}

 

                {% comment %}

                  Display current variant image

                {% endcomment %}

                <div class="product-single__photo--flex-wrapper">

                  <div class="product-single__photo--flex">

                    <div id="{{ wrapper_id }}" class="product-single__photo--container {% if section.settings.image_layout == "thumbnail" %}product-single__photo--container-thumb{% endif %}">

  <div id="{{ zoom_img_id }}"

                           class="product-single__photo-wrapper image-wrapper {% if enable_zoom %} js-zoom-enabled{% endif %}"

                           {% if enable_zoom %} data-zoom="{{ featured_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}

                           style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;"

                           data-image-id="{{ featured_image.id }}">

                        {% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

                        <img class="product-single__photo image lazyload {{ img_id_class }}"

                          src="{{ featured_image | img_url: '300x300' }}"

                          data-src="{{ img_url }}"

                          data-widths="[180, 360, 590, 720, 900, 1080, 1296, 1512, 1728, 2048]"

                          data-aspectratio="{{ featured_image.aspect_ratio }}"

                          data-sizes="auto"

                          data-image-id="{{ featured_image.id }}"

                          alt="{{ featured_image.alt | escape }}">

 

                        <noscript>

                          <img class="product-single__photo"

                            src="{{ featured_image | img_url: 'master' }}"

                            alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">

                        </noscript>

                      </div>

                      

                    </div>

                  </div>

                </div>

              {% endif %}

 

              {% comment %}

                Display variant image

              {% endcomment %}

 

              {% for image in product.images %}

                {% unless image contains featured_image %}

                  {% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}

                  {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}

                  {% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}

 

                  <div class="product-single__photo--flex-wrapper not-featured-image">

                    <div class="product-single__photo--flex">

                      <div id="{{ wrapper_id }}" class="product-single__photo--container{% if section.settings.image_layout == "thumbnail" %} product-single__photo--container-thumb{% endif %}">

                        <div id="{{ zoom_img_id }}"

                             class="product-single__photo-wrapper image-wrapper {% if enable_zoom %} js-zoom-enabled{% endif %}"

                             {% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}

                             style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"

                             data-image-id="{{ image.id }}">

                          {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

                          <img class="product-single__photo image lazyload {{ img_id_class }}"

                            src="{{ image | img_url: '300x' }}"

                            data-src="{{ img_url }}"

                            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"

                            data-aspectratio="{{ image.aspect_ratio }}"

                            data-sizes="auto"

                            data-image-id="{{ image.id }}"

                            alt="{{ image.alt | escape }}">

 

                          <noscript>

                            <img class="product-single__photo" src="{{ image.src | img_url: 'master' }}"

                              alt="{{ image.alt | escape }}"

                              data-image-id="{{ image.id }}">

                          </noscript>

                        </div>

                      </div>

                    </div>

                  </div>

                {% endunless %}

              {% endfor %}

            </div>

 

            {% if product.images.size > 1 %}

              <div class="product-single__thumbnails slick-format slick-format-sm grid grid--small {% if product.images.size < 6  %}slick-disabled{% endif %}" id="ProductThumbs">

                <div class="grid__item one-fifth">

                  <a class="product-single__thumbnail">

                    <img class="product-single__thumb" src="{{ featured_image.src | img_url: '150x150', crop: 'center' }}" alt="{{ featured_image.alt | escape }}">

                  </a>

                </div>

                {% for image in product.images %}

                  {% unless image contains featured_image %}

                    <div class="grid__item one-fifth">

                      <a class="product-single__thumbnail">

                        <img class="product-single__thumb" src="{{ image.src | img_url: '150x150', crop: 'center' }}" alt="{{ image.alt | escape }}">

                      </a>

                    </div>

                  {% endunless %}

                {% endfor %}

              </div>

            {% endif %}

          {% include "dbtfy-product-video" %}</div>

 

          <!-- product details -->

          <div data-upsell-target-id="{{ product.id }}" class="product-details grid__item medium--six-twelfths large--five-twelfths {{variantStatus}}">

            <div class="product-single__meta">

 

              <div class="small--hide {{ section.settings.product_header_alignement }}">

                {{ product_header_layout }}

              </div>

 

              <div itemprop="offers" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Offer">

                

                <div class="price-wrapper {{ section.settings.product_header_alignement }}" data-price-container>

                  {% if section_onboarding %}

                    <span id="ProductPrice"

                      class="product-single__price"

                      itemprop="price"

                      content="{{ price | divided_by: 100.00 }}">

                      {{ price | money }}

                    </span>

                  {% else %}

                    {% if on_sale %}

                      <span id="PriceA11y" class="visually-hidden" {% if sold_out %}aria-hidden="true"{% endif %}>{{ 'products.general.regular_price' | t }}</span>

                      <span class="product-single__price--wrapper" aria-hidden="false">

                        <span id="ComparePrice" class="price-compare product-single__price--compare-at">

                          {{ current_variant.compare_at_price | money }}

                        </span>

                      </span>

                      <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>

                    {% else %}

                      <span id="PriceA11y" class="visually-hidden" {% if sold_out %}aria-hidden="true"{% endif %}>{{ 'products.general.regular_price' | t }}</span>

                      <span class="product-single__price--wrapper hide" aria-hidden="true">

                        <span id="ComparePrice" class="price-compare product-single__price--compare-at"></span>

                      </span>

                      <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>

                    {% endif %}

 

                    <span id="ProductPrice"

                      class="product-single__price{% if on_sale %} on-sale{% endif %}"

                      itemprop="price"

                      content="{{ current_variant.price | divided_by: 100.00 }}"

                      {% unless current_variant.available %}aria-hidden="true"{% endunless %}>

                      {{ current_variant.price | money }}

                    </span>{% include "dbtfy-discount-saved" %}

                  {% endif %}

                  {% if settings.position_currency_converter == "product" %}{% include "currency-selector" %}{% endif %}

                </div>

                

                    {% include "dbtfy-inventory-quantity" %}{% include "dbtfy-live-view" %}{% include "dbtfy-delivery-time" %}<meta itemprop="priceCurrency" content="{{ shop.currency }}">

           <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

 

                {% if section_onboarding %}

                  <div class="product-single__add-to-cart default-product product-single__add-to-cart--full-width">

                    <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--buy btn--add-to-cart" disabled="disabled">

                      <span class="btn__text">

                        <span class="fas fa-clock"></span>

                        {{ 'products.product.sold_out' | t }}

                      </span>

                    </button>

                  </div>

                {% else %}

                  {% capture "form_classes" %}

                    product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}

                  {%- endcapture %}

 

                  {% capture "form_id" %}AddToCartForm--{{ section.id }}{%- endcapture %}

 

                  {% include "dbtfy-color-swatches" %}{% form 'product', product, class:form_classes, id:form_id %}

                    {% unless product.has_only_default_variant %}

                      <div class="grid grid-uniform grid--small variant-wrapper">

                        {% for option in product.options_with_values %}

                          <div class="grid__item radio-wrapper js product-form__item {% if section.settings.product_selector == 'radio' %}product-form__item-radio {% endif %}">

                            <label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"

                              for="ProductSelect--{{ section.id }}-option-{{ forloop.index0 }}">

                              {{ option.name | escape }}

                            </label>

                            

                            {% if section.settings.product_selector == 'radio' %}

                              <fieldset class="single-option-radio"

                                name="{{ option.name | handleize }}"

                                id="ProductSelect--{{ section.id }}-option-{{ forloop.index0 }}">

                                {% assign option_index = forloop.index %}

                                {% for value in option.values %}

                                

                                  {% assign variant_label_state = true %}

                                  {% if product.options.size == 1 %}

                                    {% unless product.variants[forloop.index0].available  %}

                                      {% assign variant_label_state = false %}

                                    {% endunless %}

                                  {% endif %}

                                

                                  <input type="radio"

                                    {% if option.selected_value == value %} checked="checked"{% endif %}

                                    {% unless variant_label_state %} disabled="disabled"{% endunless %}

                                    value="{{ value | escape }}"

                                    data-index="option{{ option_index }}"

                                    name="{{ option.name | handleize }}"

                                    class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"

                                    id="ProductSelect--{{ section.id }}-option-{{ option.name | handleize }}-{{ value | escape }}">

                                  <label for="ProductSelect--{{ section.id }}-option-{{ option.name | handleize }}-{{ value | escape }}"class="btn btn--small {% unless variant_label_state %} disabled{% endunless %}">{{ value | escape }}</label>

                                {% endfor %}

                              </fieldset>

                            {% else %}

                              <select class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">

                                {% for value in option.values %}

                                  <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>

                                {% endfor %}

                              </select>

                            {% endif %}

                            

                          </div>

                        {% endfor %}

                      </div>

                    {% endunless %}

                

                     <select name="id" id="ProductSelect" class="product-single__variants no-js product-form__item">

                      {% for variant in product.variants %}

                        {% if variant.available %}

                          <option {% if variant == product.selected_or_first_available_variant %}

                            selected="selected" {% endif %}

                            data-sku="{{ variant.sku }}"

                            value="{{ variant.id }}">

                            {{ variant.title }} - {{ variant.price | money_with_currency }}

                          </option>

                        {% else %}

                          <option disabled="disabled">

                            {{ variant.title }} - {{ 'products.product.sold_out' | t }}

                          </option>

                        {% endif %}

                      {% endfor %}

                    </select>

 

                {% if section.settings.quantity_enabled %}

                 <div class="product-single__quantity product-form__item">

                        <label for="Quantity" class="product-single__quantity-label">{{ 'products.product.quantity' | t }}</label>

                        {% include 'quantity-selector', type:'product' %}

                      </div>

                {% endif %}

 

                    <div class="product-single__add-to-cart product-single__add-to-cart--full-width">

                      <button type="submit" name="add" id="AddToCart--{{ section.id }}"

                               class="btn btn--buy btn--add-to-cart"

                               {% unless current_variant.available %} disabled="disabled"{% endunless %}>

                        <span class="btn__text">

                          {% if section.settings.button_cart_icon %}

                            <span class="fas fa-shopping-{{ settings.cart_icon }} button-cart-icon"></span>

                            <span class="fas fa-clock button-soldout-icon"></span>

                          {% endif %}

                          <span class="btn__add-to-cart-text">

                            {% if current_variant.available %}

                              {{ 'products.product.add_to_cart' | t }}

                            {% else %}

                              {{ 'products.product.sold_out' | t }}

                            {% endif %}

                          </span>

                        </span>

                      </button>

                      {% if section.settings.enable_payment_button %}

                        {{ form | payment_button }}

                      {% endif %}

                    </div>

                  {% endform %}  

                {% endif %}

              </div>

 

                {% include "dbtfy-sales-countdown" %}{% include "dbtfy-trust-badge", position: "product" %}{% unless product.description == blank or section.settings.show_description == false %}

                <div class="product-single__description rte" itemprop="description">

                  {{ product.description }}

                </div>

              {% endunless %}

 

              {% include "dbtfy-product-tabs" %} {% if section.settings.social_sharing_products %}

                {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}

              {% endif %}

              

              {% if section.settings.show_product_tags %}

                {% for tag in product.tags %}

                  {% if forloop.first %}

                    <div class="product-tags">

                      <span>{{ 'blogs.article.tags' | t }}: </span>

                  {% endif %}

                  <a class="text-link" href="/collections/all/{{ tag | handleize }}">{{ tag }}</a>

                  {% if forloop.last %}

                    </div>

                  {% endif %}

                {% endfor %}

              {% endif %}

 

              {% if template != "product" %}

                <hr>

                <a {% unless section_onboarding %} href="{{ product.url }}?variant={{ current_variant.id }}"{% endunless %} class="text-link continue-link">

                  {{ 'products.product.full_details' | t }} <span class="fas fa-arrow-right" aria-hidden="true"></span>

                </a>

              {% endif %}

            </div>

          {% include "dbtfy-sticky-addtocart" %} </div>

 

      </div><!-- /.grid -->

    </div><!-- /.wrapper -->

  </div><!-- /.box -->

</div><!-- /.product-single -->{% include "dbtfy-linked-options" %}

 

 

<script>

  $(document).ready(function(){

    

  });

</script>

 

TPM
Visitor
2 0 0

Hey ! Im having the same issue can anyone please help?

 

https://pastebin.com/Erru0hpt 

that is my code in the snippet section

product-template.liquid 

 

Thanks a lot

Tess

tonyparkins
Visitor
1 0 0

Hello Richard, thank you for your code which I have replaced in the snippets product liquid, which has helped but has left images to the left and misconfigured some text and displays 2 lines of reviews under product. I would appreciate it if you could take a look dinerbuyer.com and advise on how I can rectify, again many thanks -Tony.

 

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