Solved

Full width photo off product under product description

beautyjay
Excursionist
33 0 2

Hai everyone,

 

So i cant vigure it out. I have the Brooklyn theme and I put some pictures in the product description (2000X1000PX pictures). So i wanted that those pictures are full width under the product photos. So far it works on mobile phone. But when you check it on desktop, you have on the left site white blanc page and right the text with the pictures. So eather i need to make the text description fulll width. Or a app where you can put some pictures under the description so show. The idea is that when you scrolle trough the product page you get some pictures in full width. And not the standard text like all the other pages.

 

Can someone please help me?

Accepted Solution (1)
Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

In your code where you assign your "descriptionPieces" variable, you have it as:

{% assign descriptionPieces = products.description | split: '~' %}

It should be "product.description" not "products.description"
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 33 (33)

Lixon_Louis
Shopify Partner
1193 35 267

can you share the URL to a product page?

beautyjay
Excursionist
33 0 2

My bad i exedently accept that its done but it isnt. I cant provide you the link because its not publisht

 

Ninthony
Shopify Partner
2329 350 1023

You can still share a link even though it is not published. Preview your theme and there will be a bar that appears at the bottom of your screen with a button that says "Share Preview". 

 

https://help.shopify.com/en/manual/using-themes/adding-themes#share-a-theme-preview-with-others

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2

Oke but even than i dont want to shae my link here. So is there a solution how i can imagine my problem?

Ninthony
Shopify Partner
2329 350 1023

If you want help, share your link. Everyone's theme is different, no one has any idea what you've already done to your code. There's no reason not to share it, no one can buy anything from your store, and no one cares what your store looks like. It's too hard to diagnose a problem through screenshots and trying to talk it through. 

 

Do you know anything about HTML and CSS? How did you get these pictures onto your product page in the first place? Is it in the code or is it through some app that you've purchased?

 

If you want a guess answer, I can tell you that your product page is probably split into a half and half container. Half product images, and then half description and add to cart etc. Since you're seeing your photos on the right side, you're probably still in the second half of the container. The reason they appear alright on mobile is that those two halves stack on top of each other at a certain screen width, and then both take up 100% of the viewport. You need to put the photos outside of that container.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2

I know something about editing, not everything.

 

I think you dont understand me. All the shopify themes are not full width. I put the pictures in the description text. So you have the photo of youre product, under it you have a add to cart button, and than you have a product description. In this product description you can put photos so many as you want. I put a 2000x4000px photo in it. On the mobile phone its full width because the product description is always under the add to cart putton. But with the desktop version its not. you have on the desktop on the left side your product picture, and on the right your description. So my question is not rocket science. There are many other topic about this same question, every one is helpen, but it didnt helped me. I still have a brooklyn stock version. Didnt edit nothing 

Ninthony
Shopify Partner
2329 350 1023

Okay well your problem is that it's in the product description. Your theme is set up so that it displays half and half on desktop like I said. Your product description is on the second half. If you want to change that, you need to go into your product.liquid and put the product description outside of the container, but then the entire description will be outside it and not just the photos you want to be outside. I understand your problem, and I know it's not rocket science, but it's a little more complicated than you seem to think. One option I can think of is to put a unique character between your product description and the images that you want to show up underneath. This way, in product.liquid you can check to see if your product.description contains that character, split it by that character, and echo the first part of your description out inside the container, and then echo the image part out underneath the container. So kind of like this:

 

Here's your product description. Some other stuff. This is a mocked up description of a product and I don't really know what else to type here

~

<img src="path-to-your-image1.jpg">
<img src="path-to-your-image2.jpg">

Then in liquid on your product.liquid, split it by the "~"

 

 {% assign descriptionPieces =  product.description | split: "~"  %}

<div class="product_wrapper">
<div class="product_image">
<img src="{{ product.image.src }}">
</div>
<div class="product_description">
{{ descriptionPieces[0] }}
</div>
</div>
{{ descriptionPieces[1] }}

Don't worry, it's not rocket science. Im sure you'll figure it out.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2
Thanks for the quick response! I appreciate that! I also thought to make the description wider. It's not a problem I think. If I choose the first option I can always make a banner with text in it. But the second option you mention is very attractive. For me it's difficult to understand everything because my English is bad. And this is just my second store. Editing I did before but this is a step further. But if I understand you. When I choose second option I can split the description in 2? But is that even possible. I mean if I do the coding do you see also this in the product page in shopify where you can change text ect?
Ninthony
Shopify Partner
2329 350 1023

It's definitely possible, we do something similar on our store.  You can actually use code inside of the editor where you change text, you just have to click this little button in the top right:

 

img1.png

 

By clicking that button you can actually add HTML, CSS, and Javascript into your product description. This way you can actually see what is generated after you use the regular editor, this is important because that is what you get when you use {{ product.description }}.  Sometimes there may be HTML you didn't know about that was added when you typed stuff into the regular editor.

 

Lets say you added the " ~ ", and you were trying to split by that in liquid. It could be problematic because if you added that in the normal editor, it may have done something you didn't mean to, like add "<p>" tags around it. So when you do {{ assign descriptionPieces = product.description | split: "~" }} It would leave the first half of the <p> tag in descriptionPieces[0] and the closing </p> tag in descriptionPieces[1], which could actually break your layout. The best way to be sure is to click that little button in the picture above, and be sure there's no HTML around whatever you use for your marker, and split by that. The " ~ " will not be visible in your finished code because it gets "cut out" when you do the split.  

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2

So my head is confused right now. I understand what you are saying like theoretically. But now i have to magne that in my shopify. You are now talking about to split the screen. Oke i understand. But when everthing is already spli on my real online store like you said before (left side is blanc and the right one is text). Souldnt i need to make the description first full width? So by edeting code, do you still understand what im meaning? And also can you please tell me how to put it in the product description like you show with youre print screen. I know that you can change that to html. But i putted the link like you mantioned before but it aint working. BTW i appreciate your help realy!

Ninthony
Shopify Partner
2329 350 1023

I am at work right now, but when I get home I will try to make a step by step with visuals on what exactly I mean, cause there's obviously a little bit of a language barrier going on here.

 

The approach I'm suggesting is what you should do if you don't want to make the description full width, but at the same time have your images full width. 

 

This will give you two pieces of your description (this must be done in your product.liquid, not in the editor for the product):

 

{% assign descriptionPieces = product.description | split: '~' %}

// This gives you: {{ descriptionPieces[0] }} and {{ descriptionPieces[1] }}
//descriptionPieces[0] will be your actual description
//descriptionPieces[1] will be your images

This way, you can put {{ descriptionPieces[0] }} still inside the right side of your container, and you can put {{ descriptionPieces[1] }} outside. 

 

I will try my best to explain with images when I get home tonight.

 

 

 

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2

O man thanks a lot for helping really, and yeah language barrier is a problem lol. but take your time i will go to bed now and see it in the morning. I really appreciate that you want to help. So can you show me then also where i have to put it in? I think over here?

kri.png

 

Ninthony
Shopify Partner
2329 350 1023

Haha well I can't exactly tell you without being able to see your page 🙂 , cause I don't know if that's the end of your container. I don't think it is. I will use the default Brooklyn Theme in my example I make up for you.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2

LOL no its not the end. I always think theoretically. So when you say all down, thats means you will also go under the share links for example insta or facebook. So thats why i thought it need to be there. But like i said thank you for your help, i will wait when you post the tutorial!

Ninthony
Shopify Partner
2329 350 1023

Alrighty here we go!

 

So here's my default Brooklyn theme product:

 

img_1.jpg

 

This is how it appears after I just added the stuff in the editor. That image is 3000x2000, but since it's on the right side of the container, it can't get any bigger.  So here's what it looks like in the editor:

 

img_2.jpg

 

Notice the " ~ "  in there. I did that inside of the editor and NOT inside the HTML mode, but when I check the HTML mode I see this:

 

img_3.jpg

 

The " ~ " is surrounded with <p> tags, we should eliminate those so all that we need to split by is the " ~ ". So remove the <p> tags around it.

 

img_4.jpg

 

Now, lets go into the product.template file in your sections folder:

 

img_5.jpg

 

So on products that you don't have these images in, you're not going to want to do this operation. So you'll make an "if" statement to check for your " ~ " inside of your product description. Then we'll say "If the product description has the '~', then split the product description by '~' and put the first piece where the old product description should have gone, and if it does not have the "~", then just do the product.description normally. THEN, underneath the third div tag underneath the social media section, we will check again with another if statement to see if the description had that " ~ ", and if it does we will place the second desctriptionPieces there, with no other condition. Like this:

 

img_6.jpg

 

Now this is what I get when I look at my red shirt page:

 

img_7.jpg

 

Product description above the container, and image below the container. And just to show it doesnt happen on another product, here's the black shirt page with the same image underneath without the "~" in the description:

 

img_8.jpg

So here you can see there's no " ~ " there, so it does not perform the operation we just made. 

 

I hope this clears things up more for you. Just let me know if you have any questions about anything. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2

So first of all thank you for your tutorial. You are a really genius! It worked very fine for you. I did everything like you said, but when i take a look at my online store the description is gone and also the pictures under the text. I could not youse copy paste so i have typed everything like you mentioned. So did i make a mistake somewhere?

12.png13.png

Ninthony
Shopify Partner
2329 350 1023
Where you assign your variable you have "products.description" , should only be product.description
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2

What do you mean by that? I have products from oberlo, do you meaning this?

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

In your code where you assign your "descriptionPieces" variable, you have it as:

{% assign descriptionPieces = products.description | split: '~' %}

It should be "product.description" not "products.description"
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2

ahaha LOL you are a f*cking ginius man! I am so greatfull you dont even know how great full i am. Thank you so much man! I dont know how i can thank you!

Ninthony
Shopify Partner
2329 350 1023
It's not a problem, I'm just glad it helped. Just keep learning and if someone has a problem you know how to solve, help them out.
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2

I will! Few years ago i could only dream to have a website, this is my second one so yeah im learning everyday!

Ninthony
Shopify Partner
2329 350 1023
That's good, keep it up. You can send me a personal message on here if you have a question about something else.
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
beautyjay
Excursionist
33 0 2

BTW how can i sent you a dm. I have another small question, but cant figure it out how to send a pm?

Ninthony
Shopify Partner
2329 350 1023
You can click my account and you should be able to see a send message option. You may need to enable it on your account first.
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Not applicable

for the {%if product.description contains"~"%},

I tried the "~" but it didn't work cuz THE GREAT SHOPIFY stated:

(.        "liquid syntax error, expected end_of_string but found id in"product.description contains"~"".       )

and I am using debut theme so maybe there's error?

 

Guillaume_B
New Member
4 0 0

@NinthonyI tried your solution for my website
I add also ~ with no balise <p>  but it does not work, is it because I use Tabs ?( see photo) thanks !

I have Brooklyn theme.

 

the html end of my product page

test3.JPG

 

 

in the product section ( it is a custom template only for this product)

test1.JPG

 

still in the product section

test2.JPG

 

thank you for the help !

tereestrial
Visitor
1 0 0
Hi, how did you put an image under the product description after "~"

I tried to drag photo on product description but doesnt work
Ninthony
Shopify Partner
2329 350 1023

The product description is one object in your product template. So everything in the description is contained within this:

 

{{ product.description }}

You can use liquids split filter to break that up with a unique character.

 

{{ assign descriptionPieces = product.description | split: "~" }}

This would break the description into two pieces, assuming you only have one instance of the tilde (~) in the description, which you can reference by an index. Indexes start at 0 : {{ descriptionPieces[0] }} <---- First portion -- {{ descriptionPieces[1] }} <---- second portion. Did you read the whole tutorial I wrote up? I believe I cover how to do this pretty thoroughly.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
alhajami
Visitor
1 0 0

I'm looking to have the following product page layout using the debutify template.  Below is my product template code.  I did try the changes you suggested and only got part of the way.  Your help would be greatly appreciated.

Capture.PNG

 

<!-- /snippets/product-template.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 %}

{% 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 %}
          </div>

          <!-- product details -->
          <div 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" itemscope 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>
                  {% endif %}
                  {% if settings.position_currency_converter == "product" %}{% include "currency-selector" %}{% endif %}
                </div>
                
                    <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 %}

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

              {% 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>
          </div>
      </div><!-- /.grid -->
      {% unless product.description == blank or section.settings.show_description == false %}
          <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>
        {% endunless %}
    </div><!-- /.wrapper -->
  </div><!-- /.box -->
</div><!-- /.product-single -->


<script>
  $(document).ready(function(){
    
  });
</script>

Note:  The code above attempts to move the product description down to allow it the full page width.  However the images in the description don't take full size and remain right aligned. 

Shroud
Shopify Partner
10 0 1

Hello. Please how do I do this for Sense theme?

NewbieLearning
Visitor
1 0 0

Hi Ninthony, 

 

THANK YOU so much for sharing this. I finally figured out how to separate my product description and image below after reading your thread.

Now a new challenge... hoping you can help answer.

 

How can I enlarge photos/change the photo size that is below the product description and/or create images where 3 photos are side by side with text below it? Please see attached image for reference. For some reason, when I upload a photo that is 970x300px, it shows up quite small. 

 

formating.png

Ninthony
Shopify Partner
2329 350 1023

@NewbieLearning, my first question would be, where are you uploading your images. When you upload them in a product description or a blog post or something through the WYSIWYG editor, if you're not paying attention there's a "size" option you can select when uploading it. By default I believe that it is set to large. You'll want to double click the image, find the size option in the window that pops up, and change it to "original".

 

The ideal way to do this though is through code. If you want those images on every product page, mark up the html underneath {{ product.description }} and use flex box to lay it out, here's an example I made for a previous post for a user who had a similar question:

https://codepen.io/ninthony/pen/ZEbzEMB

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄