FROM CACHE - en_header

Brooklyn theme: Moving product descriptions under images?

Alan10
Tourist
6 0 1

Hey,

How can I move product descriptions directly under product images?

Thank You! 

Replies 23 (23)
VsisodiyaDesign
Shopify Expert
27 0 1

For this you need to know some basic coding ability.

You have to put  this div <div class="product-single__description rte" itemprop="description"> after 
<div class="product-single__photos slick-initialized slick-slider">

You need to edit code .

Hope it will be helpful for you.

 

 

Vijendra Sisodiya

Founder of VsisodiyaDesign
Alan10
Tourist
6 0 1

Hi, which section is that code in? I can't find it. 

Specifically this line of code: <div class="product-single__photos slick-initialized slick-slider">

VsisodiyaDesign
Shopify Expert
27 0 1

find the product-template on sections folder.

where you get this code. 

Vijendra Sisodiya

Founder of VsisodiyaDesign
Alan10
Tourist
6 0 1

Hi,

I went to product-template.liquid.

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

But, this line of code doesn't exist: <div class="product-single__photos slick-initialized slick-slider">

 

VsisodiyaDesign
Shopify Expert
27 0 1
<!-- /templates/product.liquid -->
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}"> <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}"> {% assign current_variant = product.selected_or_first_available_variant %} {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% if section.settings.image_layout == "stacked" %} {% comment %} Default or stacked layout {% endcomment %} {% comment %} We need to figure out the max width we want the image to be on the page based on the aspect ratio of the image and based on the size of the image. {% endcomment %}
{% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %} {% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %} {% comment %} Display current variant image {% endcomment %}
{% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
{% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} <noscript> </noscript>
{% comment %} Display rest of product images, not repeating the featured one {% endcomment %} {% for image in product.images %} {% unless image contains featured_image %} {% comment %} We need to figure out the max width we want the image to be on the page based on the aspect ratio of the image and based on the size of the image. {% endcomment %} {% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %} {% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} <noscript> </noscript>
{% endunless %} {% endfor %}
{% else %} {% comment %} Thumbnails layout {% endcomment %}
{% comment %} We need to figure out the max width we want the image to be on the page based on the aspect ratio of the image and based on the size of the image. {% endcomment %} {% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %} {% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %} {% comment %} Display current variant image {% endcomment %}
{% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
{% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} <noscript> </noscript>
{% comment %} Populate rest of product images with display = none, not repeating the featured one {% endcomment %} {% for image in product.images %} {% unless image contains featured_image %} {% comment %} We need to figure out the max width we want the image to be on the page based on the aspect ratio of the image and based on the size of the image. {% endcomment %} {% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %} {% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} <noscript> </noscript>
{% endunless %} {% endfor %} {% comment %} Display thumbnails {% endcomment %}
    {% for image in product.images %} {% if product.images.size > 1 %}
  • {{ image.alt | escape }}
  • {% endif %} {% endfor %}
{% endif %}
{{ product.description }}
{% if section.settings.product_vendor_enable %}

{{ product.vendor }}

{% endif %}

{{ product.title }}

{% comment %} Optionally show the 'compare at' or original price of the product. {% endcomment %} {% if product.compare_at_price_max > product.price %} {{ 'products.general.regular_price' | t }} {% if current_variant.compare_at_price > current_variant.price %} {{ current_variant.compare_at_price | money }} {% endif %} {{ 'products.general.sale_price' | t }} {% else %} {{ 'products.general.regular_price' | t }} {% endif %} {{ current_variant.price | money }} <hr class="hr--small"> <meta itemprop="priceCurrency" content="{{ shop.currency }}"> <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}"> <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm--{{ section.id }}" class="product-single__form"> {% unless product.has_only_default_variant %} {% for option in product.options_with_values %}
<label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}" for="ProductSelect-option-{{ forloop.index0 }}"> {{ option.name | escape }} </label> {% if section.settings.product_selector == 'radio' %} <fieldset class="single-option-radio" name="{{ option.name | handleize }}" id="ProductSelect-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"> <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">{{ 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 }}">{{ value | escape }}</option> {% endfor %} </select> {% endif %}
{% endfor %} {% endunless %} <select name="id" id="ProductSelect" class="product-single__variants no-js"> {% for variant in product.variants %} {% if variant.available %} <option> {{ 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 %}
<label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label> <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
{% endif %}
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} add-to-cart--full-width{% endif %}"> {% if current_variant.available %} {{ 'products.product.add_to_cart' | t }} {% else %} {{ 'products.product.sold_out' | t }} {% endif %} </button>
</form>
{% if section.settings.social_sharing_products %} {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %} {% endif %}
{% if collection %} <hr class="hr--clear"> {% endif %}
{% unless product.empty == empty %} <script type="application/json" id="ProductJson-{{ section.id }}"> {{ product | json }} </script> {% endunless %} {% schema %} { "name": "Product pages", "settings": [ { "type": "checkbox", "id": "zoom_enable", "label": "Enable image zoom" }, { "type": "checkbox", "id": "social_sharing_products", "label": "Enable product sharing", "default": true }, { "type": "checkbox", "id": "product_vendor_enable", "label": "Show product vendor" }, { "type": "select", "id": "image_layout", "label": "Image display", "default": "stacked", "options": [ { "value": "stacked", "label": "Stacked" }, { "value": "thumbnails", "label": "Thumbnails" } ] }, { "type": "header", "content": "Product options form" }, { "type": "checkbox", "id": "quantity_enabled", "label": "Show quantity picker" }, { "type": "select", "id": "product_selector", "label": "Picker type", "options": [ { "value": "radio", "label": "Button" }, { "value": "select", "label": "Dropdown" } ] }, { "type": "header", "content": "Add to cart button" }, { "type": "select", "id": "add_to_cart_button_size", "label": "Button size", "default": "small", "options": [ { "value": "small", "label": "Small" }, { "value": "large", "label": "Large" } ] } ] } {% endschema %}
Vijendra Sisodiya

Founder of VsisodiyaDesign
VsisodiyaDesign
Shopify Expert
27 0 1

paste this code to your product template .

Vijendra Sisodiya

Founder of VsisodiyaDesign
VsisodiyaDesign
Shopify Expert
27 0 1
<!-- /templates/product.liquid -->
<div itemscope itemtype="http://schema.org/Product" id="ProductSection--{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.zoom_enable }}" data-enable-history-state="true" data-scroll-to-image="{% if section.settings.image_layout == "stacked" %}true{% else %}false{% endif %}">

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

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

    <div class="grid product-single">
      <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">

        {% if section.settings.image_layout == "stacked" %}
          {% comment %}
            Default or stacked layout
          {% endcomment %}

          {% comment %}
            We need to figure out the max width we want the image to be on the page
            based on the aspect ratio of the image and based on the size of the
            image.
          {% endcomment %}
          <div class="product-single__photos">
            {% capture img_id_class %}product-single__photo-{{ featured_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">
                {% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
                <div id="{{ wrapper_id }}" class="product-single__photo--container">
                  <div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;">
                    {% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="product-single__photo 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"
                      {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
                      data-image-id="{{ featured_image.id }}"
                      alt="{{ featured_image.alt | escape }}">

                    <noscript>
                      <img class="product-single__photo"
                        src="{{ featured_image | img_url: 'master' }}"
                        {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
                        alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
                    </noscript>
                  </div>
                </div>
              </div>
            </div>

            {% comment %}
              Display rest of product images, not repeating the featured one
            {% endcomment %}
            {% for image in product.images %}
              {% unless image contains featured_image %}

                {% comment %}
                  We need to figure out the max width we want the image to be on the page
                  based on the aspect ratio of the image and based on the size of the
                  image.
                {% endcomment %}
                {% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
                {% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}

                <div class="product-single__photo--flex-wrapper">
                  <div class="product-single__photo--flex">
                    {% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
                    <div id="{{ wrapper_id }}" class="product-single__photo--container">
                      <div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                        {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                        <img class="product-single__photo 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"
                          {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %}
                          data-image-id="{{ image.id }}"
                          alt="{{ image.alt | escape }}">

                        <noscript>
                          <img class="product-single__photo" src="{{ image.src | img_url: 'master' }}"
                            {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %}
                            alt="{{ image.alt | escape }}"
                            data-image-id="{{ image.id }}">
                        </noscript>
                      </div>
                    </div>
                  </div>
                </div>
              {% endunless %}
            {% endfor %}

          </div>

        {% else %}
          {% comment %}
            Thumbnails layout
          {% endcomment %}

          <div class="product-thumbnail__photos product-single__photos">

            {% comment %}
              We need to figure out the max width we want the image to be on the page
              based on the aspect ratio of the image and based on the size of the
              image.
            {% endcomment %}
            {% capture img_id_class %}product-single__photo-{{ featured_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">
                {% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
                <div id="{{ wrapper_id }}" class="product-single__photo--container product-single__photo--container-thumb">
                  <div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;">
                    {% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="product-single__photo 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"
                      {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
                      data-image-id="{{ featured_image.id }}"
                      alt="{{ featured_image.alt | escape }}">

                    <noscript>
                      <img class="product-single__photo"
                        src="{{ featured_image | img_url: 'master' }}"
                        {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
                        alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
                    </noscript>
                  </div>
                </div>
              </div>
            </div>

            {% comment %}
              Populate rest of product images with display = none, not repeating the featured one
            {% endcomment %}
            {% for image in product.images %}
              {% unless image contains featured_image %}

                {% comment %}
                  We need to figure out the max width we want the image to be on the page
                  based on the aspect ratio of the image and based on the size of the
                  image.
                {% endcomment %}
                {% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
                {% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}

                <div class="product-single__photo--flex-wrapper">
                  <div class="product-single__photo--flex">
                    {% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
                    <div id="{{ wrapper_id }}" class="product-single__photo--container product-single__photo--container-thumb hide">
                      <div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                        {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                        <img class="product-single__photo 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"
                          {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %}
                          data-image-id="{{ image.id }}"
                          alt="{{ image.alt | escape }}">

                        <noscript>
                          <img class="product-single__photo" src="{{ image.src | img_url: 'master' }}"
                            {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %}
                            alt="{{ image.alt | escape }}"
                            data-image-id="{{ image.id }}">
                        </noscript>
                      </div>
                    </div>
                  </div>
                </div>
              {% endunless %}
            {% endfor %}

            {% comment %}
              Display thumbnails
            {% endcomment %}
            <ul class="product-single__thumbnails small--hide grid-uniform" id="ProductThumbs">
              {% for image in product.images %}
                {% if product.images.size > 1 %}
                  <li class="grid__item medium--one-third large--one-quarter product-single__photo-wrapper">
                    <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail {% if image contains featured_image %} active-thumb{% endif %}">
                      <img class="product-single__thumb" src="{{ image.src | img_url: '150x' }}" alt="{{ image.alt | escape }}">
                    </a>
                  </li>
                {% endif %}
              {% endfor %}
            </ul>

          </div>
        {% endif %}
        
        <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>
        
      </div>

      <div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
        <div class="product-single__meta">
          {% if section.settings.product_vendor_enable %}
            <h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
          {% endif %}

          <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

          <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            {% comment %}
              Optionally show the 'compare at' or original price of the product.
            {% endcomment %}

            {% if product.compare_at_price_max > product.price %}
              <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
              <span class="product-single__price--wrapper">
                <span id="ComparePrice" class="product-single__price--compare-at">
                  {% if current_variant.compare_at_price > current_variant.price %}
                    {{ current_variant.compare_at_price | money }}
                  {% endif %}
                </span>
              </span>
              <span id="ComparePriceA11y" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
            {% else %}
              <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            {% endif %}

            <span id="ProductPrice"
              class="product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}"
              itemprop="price"
              content="{{ current_variant.price | divided_by: 100.00 }}">
              {{ current_variant.price | money }}
            </span>

            <hr class="hr--small">

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

            <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm--{{ section.id }}" class="product-single__form">
              {% unless product.has_only_default_variant %}
                {% for option in product.options_with_values %}
                  <div class="radio-wrapper js product-form__item">
                    <label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"
                      for="ProductSelect-option-{{ forloop.index0 }}">
                      {{ option.name | escape }}
                    </label>
                    {% if section.settings.product_selector == 'radio' %}
                      <fieldset class="single-option-radio"
                        name="{{ option.name | handleize }}"
                        id="ProductSelect-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-option-{{ option.name | handleize }}-{{ value | escape }}">
                          <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="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 %}
              {% endunless %}

              <select name="id" id="ProductSelect" class="product-single__variants no-js">
                {% 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">
                <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
                <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
              </div>
              {% endif %}

              <div class="product-single__add-to-cart">
                <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} add-to-cart--full-width{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
                  <span class="add-to-cart-text">
                    {% if current_variant.available %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% else %}
                      {{ 'products.product.sold_out' | t }}
                    {% endif %}
                  </span>
                </button>
              </div>
            </form>

          </div>

          

          {% if section.settings.social_sharing_products %}
            {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
          {% endif %}
        </div>
      </div>
    </div>

    {% if collection %}
      <hr class="hr--clear">
      <div class="text-center">
        <a href="{{ collection.url }}" class="return-link">&larr; {{ 'products.general.collection_return' | t: collection: collection.title }}</a>
      </div>
    {% endif %}

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

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "checkbox",
        "id": "zoom_enable",
        "label": "Enable image zoom"
      },
      {
        "type": "checkbox",
        "id": "social_sharing_products",
        "label": "Enable product sharing",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "product_vendor_enable",
        "label": "Show product vendor"
      },
      {
        "type": "select",
        "id": "image_layout",
        "label": "Image display",
        "default": "stacked",
        "options": [
          {
            "value": "stacked",
            "label": "Stacked"
          },
          {
            "value": "thumbnails",
            "label": "Thumbnails"
          }
        ]
      },
      {
        "type": "header",
        "content": "Product options form"
      },
      {
        "type": "checkbox",
        "id": "quantity_enabled",
        "label": "Show quantity picker"
      },
      {
        "type": "select",
        "id": "product_selector",
        "label": "Picker type",
        "options": [
          {
            "value": "radio",
            "label": "Button"
          },
          {
            "value": "select",
            "label": "Dropdown"
          }
        ]
      },
      {
        "type": "header",
        "content": "Add to cart button"
      },
      {
        "type": "select",
        "id": "add_to_cart_button_size",
        "label": "Button size",
        "default": "small",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ]
      }
    ]
  }
{% endschema %}

 

Vijendra Sisodiya

Founder of VsisodiyaDesign
Alan10
Tourist
6 0 1

 <div class="product-single__photos slick-initialized slick-slider"></div>
            
<div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>

I wrote this code. Doesnt work.

tim
Shopify Expert
3041 170 1106

Hey Alan, 

there is no such code in the liquid file. These classes (slick-initialized slick-slider) are added by the slideshow library when the images are converted to carousel on moile.

I assume you're using Brooklyn in Thumbnail mode, otherwise it does nopt make sence to move description to be below images? So you want to keep the title and Add to cart button on the right, but have description below images, full-width i guesss?

You need to modify this code in product-template.liquid Section:

          <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>

          {% if section.settings.social_sharing_products %}
            {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
          {% endif %}
        </div>
      </div>

Move the first <div> ...</div>  to the very bottom of this snippet, so that it is no longer inside the <div class="grid product-single">...</div> element.

My post solved your problem? Like it!
Alan10
Tourist
6 0 1

Awesome, it worked!

I have a few apps under the add to cart button. Anyway I can move them under as well?  

Thanks!!

tim
Shopify Expert
3041 170 1106

Glad to hear it helped.

As to the apps, it depends on the way they add their code to your page.

Having a look at your site will(may) clarify it.

My post solved your problem? Like it!
Jonathan_De_Leo
New Member
4 0 0

Hi Tim,

I'm so glad I found this thread as I want to do the same thing to my site but I absolutely do not understand the answer you have provided.. as coder I am not.

If you would be so kind and can provide a little more detailed instructions on how to do this for someone like myself, it would be greatly appreciated.

Thank You!

tim
Shopify Expert
3041 170 1106

Jonathan, 

the idea is to find that piece of code and change it to be like this:

          {% if section.settings.social_sharing_products %}
            {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
          {% endif %}
        </div>
      </div>
          <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>

I'd recomend to make a copy of your current theme (by selecting Actions->Duplicate), try this edit in this new copy, look at the result (via Actions->Preview) and put it in production (by clicking Actions->Publish) if you like it.

My post solved your problem? Like it!
anthony_grandov
New Member
1 0 1

Thank you Tim, this is exactly what I was looking for. However, I am having an issue as now when I scroll down, the product select and add to cart are overlapping the description. Also the text still begins to the right of the photos, I would like the description to start below. Are there any easy fixes for this? I am a newbie with coding, thanks!

 

Daniel_Kamhaji
New Member
2 0 0

I'm having the same issue after trying out Tims solve too.

Have you found any solutions to both, the overlapping and the left margin?

 

Thanks,

Kelsie
Tourist
4 0 1

We are having the same issue, so frustrating! Please resolve this Shopify. 

We have successfully moved the social sharing above the description without causing the problem which is great. I want the customers to easily be able to share our links.

Then, we go to move the <div class..description} out and below the </div>'s and our fixed navbar as well as our cart section continue to move down and look terrible. What do we do?!

I think it might have something to do with the div class. Maybe we have to delete that so it is not part of everything else and create some new code, but I am unsure. 

 

Once again, HELP SHOPIFY!

Kelsie
Tourist
4 0 1

Update, 

I have sort of figured out this issue. Probably it will fix your issue, but it does not fully fix mine.

First, you cut and remove the div-class...description as he told you.

Second, you have to also cut the {%if collection...endif%} section because the back button does not move if you do not do so and it will look weird.

Then, you move it to the very bottom of the page after the end schema. I don't know if this creates other issues, but it will partially resolve the issue and the cart section will stop moving. 

 

However, I have a fixed navigation bar. When I scroll down, the navigation bar seems to become transparent and not a fixed white when it hits the add to cart buttons. The overlay is all messed up. How do I further resolve this?

freq
New Member
1 0 0

That solved the problem. Thanks..


@Kelsie wrote:

Update, 

I have sort of figured out this issue. Probably it will fix your issue, but it does not fully fix mine.

First, you cut and remove the div-class...description as he told you.

Second, you have to also cut the {%if collection...endif%} section because the back button does not move if you do not do so and it will look weird.

Then, you move it to the very bottom of the page after the end schema. I don't know if this creates other issues, but it will partially resolve the issue and the cart section will stop moving. 

 

However, I have a fixed navigation bar. When I scroll down, the navigation bar seems to become transparent and not a fixed white when it hits the add to cart buttons. The overlay is all messed up. How do I further resolve this?


 

Hamza33
New Member
1 0 1

Hello, many thanks it work perfectly.

 

Is it possible to keep the text within a certain limit in terms of width?

 

I don't want full width - im slowly picking up my coding skills once again.

 

Thank you.

 

i have found a fix.

 

Take this section and place with at around line 207

<div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>

Place within this div class (line 12), towards the very end of the div class

<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">

Bit of context - this is the end of the div class which I have bolded and underlined. Place within here above the "grid_item product-single__meta--wrapper class.

          </div>
        {% endif %}
         <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>
      </div>

      <div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
        <div class="product-single__meta">
          {% if section.settings.product_vendor_enable %}
            <h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
          {% endif %}

I hope this helps!