Full width product description for Debut

Solved
Lovelyn12
Excursionist
39 1 3

Hello, 

 

I need help, I want to adjust the width of my product description. Please?

Thank you in advance.

 

Pls see attached photo.Screenshot 2019-09-11 10.07.01.png

0 Likes

Hello 
Please share your site url.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Lovelyn12
Excursionist
39 1 3
0 Likes

Hello 

As i can see in below screenshot your product description is already full width.
a1.jpg
Can you tell me this issue happens for which product.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Lovelyn12
Excursionist
39 1 3

This one.Screenshot 2019-09-11 13.48.15.png

0 Likes

Hello 

In product.template.liquid file

Search this line of code :

 <div class="grid__item {{ product_description_width }}">

Replace this code with:

 <div class="grid__item medium-up--one-full">

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Lovelyn12
Excursionist
39 1 3

Hello Pallavi,

 

This is the result after I paste the code.Screenshot 2019-09-11 15.35.31.png

0 Likes

Hello 
Okay, then remove this code.
Can you share your product.template.liquid code.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Lovelyn12
Excursionist
39 1 3

This is an accepted solution.

<div class="product-template__container page-width"
     id="ProductSection-{{ section.id }}"
     data-section-id="{{ section.id }}"
     data-section-type="product"
     data-enable-history-state="true"
     >
  {% comment %}
  Get first variant, or deep linked one
  {% endcomment %}
  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- assign product_image_zoom_size = '1024x1024' -%}
  {%- assign product_image_scale = '2' -%}
  {%- assign enable_zoom = section.settings.enable_zoom -%}
  {%- assign compare_at_price = current_variant.compare_at_price -%}
  {%- assign price = current_variant.price -%}

  {% case section.settings.image_size %}
  {% when 'small' %}
  {%- assign product_image_width = 'medium-up--one-third' -%}
  {%- assign product_description_width = 'medium-up--two-thirds' -%}
  {%- assign product_thumbnail_width = 'medium-up--one-third' -%}
  {%- assign height = 345 -%}
  {% when 'medium' %}
  {%- assign product_image_width = 'medium-up--one-half' -%}
  {%- assign product_description_width = 'medium-up--one-half' -%}
  {%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
  {%- assign height = 530 -%}
  {% when 'large' %}
  {%- assign product_image_width = 'medium-up--two-thirds' -%}
  {%- assign product_description_width = 'medium-up--one-third' -%}
  {%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
  {%- assign height = 720 -%}
  {% when 'full' %}
  {%- assign product_image_width = '' -%}
  {%- assign product_description_width = '' -%}
  {%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
  {%- assign height = 1090 -%}
  {%- assign enable_zoom = false -%}
  {% endcase %}

  <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.image_size }}-image{% endif %}">
    <div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
      {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
      <div id="product_image_slider" class="owl-carousel">

        {% for image in product.images %}
        {% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
        {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
        {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
        {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

        <div id="{{ img_wrapper_id }}" class="item">
          <img id="{{ img_id }}"
               class="product_feature__image {{ img_class }}"
               src="{{ image | img_url: '300x300' }}"
               data-src="{{ img_url }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ image.aspect_ratio }}"
               data-sizes="auto"
               tabindex="-1"
               alt="{{ image.alt | escape }}">
        </div>
        {% endfor %}

      </div>

      <noscript>
        {% capture product_image_size %}{{ height }}x{% endcapture %}
        <img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;">
      </noscript>

      {% if product.images.size > 1 %}
      {% if product.images.size > 3 %}
      {%- assign enable_thumbnail_slides = true -%}
      {% endif %}

      <div id="product_thumbs_slider" class="owl-carousel">
        {% for image in product.images %}
        <div class="item">         
            <img data-index="{{forloop.index0}}" class="product_thumb_img__" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>

    <div class="grid__item {{ product_description_width }}">
      <div class="product-single__meta">

        <h1 class="product-single__title">{{ product.title }}</h1>
        
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

        <div class="product__price">
          {% include 'product-price', variant: current_variant %}
        </div> 
        {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
        <div class="product__policies rte">
          {%- 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 -%}

        {% if section.settings.show_quantity_selector %}
        <div id="error-quantity-{{ section.id }}" class="form-message form-message--error product__quantity-error hide" tabindex="-1">
          {% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}
        </div>
        {% endif %}

        {% 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 %}
        {%- endcapture %}

        {% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
        {% unless product.has_only_default_variant %}
        {% for option in product.options_with_values %}
        <div class="selector-wrapper js product-form__item">
          <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          <select class="single-option-selector 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 }}</option>
            {% endfor %}
          </select>
        </div>
        {% endfor %}
        {% endunless %}

        <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
          {% for variant in product.variants %}
          {% if variant.available %}
          <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
            {{ variant.title }}
          </option>
          {% else %}
          <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
          {% endif %}
          {% endfor %}
        </select>

      {% if section.settings.show_quantity_selector %}
        <div class="product-form__item product-form__item--quantity">
          <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
          <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
        </div> <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input type="submit" value="Add to cart" class="btn" />
</form> 

        {% endif %}
        {% comment %}
        <div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
          <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
            <i class="fab fa-opencart"></i>
            <span id="AddToCartText-{{ section.id }}">
              {% unless current_variant.available %}
              {{ 'products.product.sold_out' | t }}
              {% else %}
              {{ 'products.product.add_to_cart' | t }}
              {% endunless %}
            </span>
          </button>
          {% if section.settings.enable_payment_button %}
          {{ form | payment_button }}
          {% endif %}
        </div>
        {% endcomment %}
        {% endform %}
      </div>

      
      
      <div class="tabs_Box">
        <div>
          <ul class="tabs">
            <li><a href="#tab-1">Description</a></li>
            <li><a href="#tab-2">Shipping</a></li>
            <li><a href="#tab-3">Returns</a></li>
          </ul>
          <div id="tab-1">
            {{ product.description }}
          </div>
          <div id="tab-2">
            {{ pages.shipping.content }}
          </div>
          <div id="tab-3">
            {{ pages.return.content }}
          </div>
        </div>
      </div>



      {%- comment -%}
      Live region for announcing updated price and availability to screen readers
      {%- endcomment -%}
      <p class="visually-hidden" data-product-status
         aria-live="polite"
         role="status"
         ></p>
      {%- comment -%}
      <div class="product-single__description rte">
        {{ product.description }}
      </div>
      {%- endcomment -%}
      {% if section.settings.show_share_buttons %}
      {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
      {% endif %}
    </div>
  </div>
</div>

{% if collection %}
<div class="text-center return-link-wrapper page-width">
  <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
    {% include 'icon-arrow-left' %}
    {{ 'products.product.back_to_collection' | t: title: collection.title }}
  </a>
</div>
{% endif %}

<div class="page-width">

  <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  
</div>


{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
</script>
{% endunless %}



{% schema %}
{
"name": {
"de": "Produktseiten",
"en": "Product pages",
"es": "Páginas de productos",
"fr": "Pages de produits",
"it": "Pagine di prodotto",
"ja": "商品ページ",
"pt-BR": "Páginas de produtos"
},
"settings": [
{
"type": "select",
"id": "image_size",
"label": {
"de": "Foto-Größe",
"en": "Image size",
"es": "Tamaño de la imagen",
"fr": "Taille des images",
"it": "Dimensione immagine",
"ja": "画像のサイズ",
"pt-BR": "Tamanho da imagem"
},
"options": [
{
"value": "small",
"label": {
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fr": "Petite",
"it": "Piccolo",
"ja": "小",
"pt-BR": "Pequeno"
}
},
{
"value": "medium",
"label": {
"de": "Mittel",
"en": "Medium",
"es": "Mediana",
"fr": "Moyenne",
"it": "Medio",
"ja": "中",
"pt-BR": "Médio"
}
},
{
"value": "large",
"label": {
"de": "Groß",
"en": "Large",
"es": "Grande",
"fr": "Grande",
"it": "Grande",
"ja": "大",
"pt-BR": "Grande"
}
},
{
"value": "full",
"label": {
"de": "Volle Breite",
"en": "Full-width",
"es": "Ancho completo",
"fr": "Pleine largeur",
"it": "Intera larghezza",
"ja": "全幅",
"pt-BR": "Largura completa"
}
}
],
"default": "medium"
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": {
"de": "Quantitäts-Auswahl anzeigen",
"en": "Show quantity selector",
"es": "Mostrar selector de cantidad",
"fr": "Afficher le sélecteur de quantité",
"it": "Mostra selettore quantità",
"ja": "数量セレクターを表示する",
"pt-BR": "Exibir seletor de quantidade"
},
"default": false
},
{
"type": "checkbox",
"id": "show_variant_labels",
"label": {
"de": "Varianten-Etiketten anzeigen",
"en": "Show variant labels",
"es": "Mostrar etiquetas de variantes",
"fr": "Afficher le nom des variantes",
"it": "Mostra etichette varianti",
"ja": "バリエーションのラベルを表示する",
"pt-BR": "Exibir etiquetas de variantes"
},
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"de": "Lieferanten anzeigen",
"en": "Show vendor",
"es": "Mostrar proveedor",
"fr": "Afficher les vendeurs",
"it": "Mostra fornitore",
"ja": "販売元を表示する",
"pt-BR": "Exibir fornecedor"
},
"default": false
},
{
"type": "checkbox",
"id": "enable_zoom",
"label": {
"de": "Foto-Zoom zulassen",
"en": "Enable image zoom",
"es": "Habilitar zoom de imagen",
"fr": "Activer le zoom d'image",
"it": "Abilita lo zoom dell'immagine",
"ja": "画像ズームを有効にする",
"pt-BR": "Ativar o zoom da imagem"
},
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": {
"de": "Dynamischen Checkout Button anzeigen",
"en": "Show dynamic checkout button",
"es": "Mostrar botón de pago dinámico",
"fr": "Afficher le bouton de passage à la caisse dynamique",
"it": "Mostra pulsante di check-out dinamico",
"ja": "ダイナミックチェックアウトボタンを表示する",
"pt-BR": "Exibir botão dinâmico de finalização da compra"
},
"info": {
"de": "Lässt Kunden direkt bezahlen mit bekannten Bezahlmethoden. [Mehr erfahren](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"en": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"es": "Permite a los clientes pagar directamente usando un método de pago familiar. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fr": "Permettez à vos clients de passer à la caisse avec un moyen de paiement qui leur est familier. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"it": "Fai in modo che i clienti effettuino il check-out direttamente utilizzando un metodo di pagamento a loro conosciuto. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ja": "使い慣れた決済方法を使用して、お客様に直接チェックアウトしてもらいましょう。[もっと詳しく](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-BR": "Permite que os clientes finalizem os pedidos na hora usando uma forma de pagamento salva. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
"default": false
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": {
"de": "Buttons für Social Media anzeigen",
"en": "Show social sharing buttons",
"es": "Mostrar botones para compartir en redes sociales",
"fr": "Affichez les boutons de partage sur les médias sociaux",
"it": "Mostra i pulsanti per la condivisione sui social",
"ja": "ソーシャル共有ボタンを表示する",
"pt-BR": "Exibir botões de compartilhamento em redes sociais"
},
"default": true
}
]
}
{% endschema %}
0 Likes
weekee1980
Tourist
10 0 0

Hi , 

 

I am using theme Debut and My Homepage "Slideshow "  is always follow full width of the screen  for the desktop veiw. 

I would like to do it width to be same as the " FEATURED COLLECTION" width.

Could you help me ?

 

My website is: www.smib.com.sg

Password: 93874518

 

Below is the screenshot of my website . 

Hope you may gudie me along.

Thank you very much .

 

 

In the small screen :

 

Screenshot 2019-09-13 14.36.20.png

 

In the wide screen :

 

Screenshot 2019-09-13 14.37.03.png

 

In my setting : 

 

Screenshot 2019-09-13 14.58.21.png

 

 

I hope to be like this website https://themedicube.com.sg/ 

Which in both small and wide screen , the width  is the same as the " FEATURED COLLECTION" width .

 

In the small screen :

 

Screenshot 2019-09-13 14.37.46.png

 

In the wide screen :

 

Screenshot 2019-09-13 14.37.58.png

 

 

 

0 Likes