How to make full width product description

New Member
4 0 0

Hi, I am using theme minimal and want to change my product page. 

The product description is to small, next to the image.

I would like to do it on full width under the images.

Could you help me what to change in code? I looked to many threads on forum but no one was helpfull.

Thanks

0 Likes
Shopify Partner
1838 173 559

Hi Golmee

You will need to edit your theme code by navigating to Online store > Theme > from the Actions drop down pick Edit code. Open Sections / product-template.liquid and look for this fragment of code in it

          {% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
            <div class="tabs">
              <ul class="tab-switch__nav">
                <li>
                  <a href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
                </li>
                <li>
                  <a href="#extra" data-link="extra" class="tab-switch__trigger h3">{{ pages[section.settings.extra_tab_content].title }}</a>
                </li>
              </ul>
              <div id="description" class="tab-switch__content" data-content="description">
                <div class="product-description rte" itemprop="description">
                  {{ product.description }}
                </div>
              </div>
              <div id="extra" class="tab-switch__content" data-content="extra">
                <div class="rte">
                  {{ pages[section.settings.extra_tab_content].content }}
                </div>
              </div>
            </div>
          {% else %}
            <div class="product-description rte" itemprop="description">
              {{ product.description }}
            </div>
          {% endunless %}

          {% if section.settings.social_sharing %}
            <hr class="hr--clear hr--small">
            <h2 class="h4">{{ 'products.general.share_title' | t }}</h2>
            {% include 'social-sharing' %}
          {% endif %}
        </div>

      </div>
    </div>
  </div>

Now you will need to replace that with

          {% if section.settings.social_sharing %}
            <hr class="hr--clear hr--small">
            <h2 class="h4">{{ 'products.general.share_title' | t }}</h2>
            {% include 'social-sharing' %}
          {% endif %}
        </div>

      </div>
      <div class="grid__item post-large--one-whole">
      	{% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
          <div class="tabs">
            <ul class="tab-switch__nav">
              <li>
                <a href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
              </li>
              <li>
                <a href="#extra" data-link="extra" class="tab-switch__trigger h3">{{ pages[section.settings.extra_tab_content].title }}</a>
              </li>
            </ul>
            <div id="description" class="tab-switch__content" data-content="description">
              <div class="product-description rte" itemprop="description">
                {{ product.description }}
              </div>
            </div>
            <div id="extra" class="tab-switch__content" data-content="extra">
              <div class="rte">
                {{ pages[section.settings.extra_tab_content].content }}
              </div>
            </div>
          </div>
        {% else %}
          <div class="product-description rte" itemprop="description">
            {{ product.description }}
          </div>
        {% endunless %}
      </div>
    </div>
  </div>

Hope this helps!

I turn coffee in to code - since 1998
0 Likes
New Member
4 0 0

Thank you very much, this is it :)

0 Likes
Tourist
7 0 1

I'm using Debut and can't find the code to replace.

0 Likes
Excursionist
60 0 6

Hi Karl,

 

Would yo have any idea how I might be able to de a similar thing on my site ?

 

I am trying to set up the template in such a way that the image and description are full with.

 

AS you will see the panoramas need to be.

 

Thanks in advance for any help.

 

Product - https://theworldreflected.com/products/quiraing-round-fold-framed?variant=30275157164104

https://community.shopify.com/c/Technical-Q-A/Product-image-full-Width-on-product-page/td-p/581300

0 Likes
Highlighted
New Member
1 0 0

How to make full width image in product description (Debut theme)

0 Likes