Debut theme product description split

STIFCforum
Excursionist
19 0 10

Hello Shopify community,

 

I am using the Debut theme and I would like to split the product description into 2 sections, one section highlighting a few key points about the product and the other sections would have tabs with the full information about the product.

I was able to split the descriptions into 2 sections by replacing the following code in product-template.liquid

        <div class="product-single__description rte">
          <div data-station-tabs-app data-station-tabs-product="{{ product.handle }}">{{ product.description }}</div>
        </div>

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
        {% endif %}

to this code:

<div class="product-single__description rte" id="first_product_description">
      {{ product.description | split: '<!-- split -->' | first }}
          </div>
      </div>
    </div>
    {% if product.description contains "<!-- split -->" %}
        <div class="product-single__description rte" id="last_product_description">
      {{ product.description | split: '<!-- split -->' | last }}
       
      </div>
  {% endif %}

 

I can then split the code in the product description using <!-- split -->

so my product page looks like this:

Capture.JPG

 

 

What I would like doing is having "product description highlights" under the products price, replacing "shipping calculated at checkout". 

I don't need help with adding tabs to the "full description with tabs" as I've seen many discussions and tutorials explaining how to do it on the forums so it shouldn't be a problem for me to integrate tabs into the full description later on so I just need help with moving the "product description highlights"

I am new to Shopify and know pretty much nothing about coding so any help would be highly appreciated!

0 Likes
STIFCforum
Excursionist
19 0 10

*Update*

I was able to split the product description into 2 parts and make it looks like this:

Capture.JPG

by splitting the code into 2 parts so I pasted this part of the code instead of the code for "shipping and taxes calculated at checkout"

<div class="product-single__description rte" id="first_product_description">
      {{ product.description | split: '<!-- split -->' | first }}
          </div>

 

and the second part of the code where the product description goes:

    </div>
    {% if product.description contains "<!-- split -->" %}
        <div class="product-single__description rte" id="last_product_description">
      {{ product.description | split: '<!-- split -->' | last }}
       
      </div>
  {% endif %}

 

The only problem now is that that part of the full product description appears to the right of the pictures and I would like the full description to be under the product.

I would also need help integrating tabs into this as I've had to make quite a few modifications to product-template.liquid

Any replies and suggestions would be appreciated!

 

0 Likes