Product description split into two columns and a row

Solved
Highlighted
Excursionist
30 2 5

Hi all,

The issue I am having is quite complex in my mind, and I am not sure if it is actually possible without really extensive coding. I am using the Brooklyn theme. The picture below is the current layout of the website:

Current product page.png

I was wondering whether it is possible to split the product description into three sections, with two taking up two-thirds of the page underneath each other. And one section being on the right taking up 1/3rd of the page. See picture below:Future product page.png

Would love to hear your comments on whether or not this is possible, and if so how to do it. Thank you a lot in advance for thinking with me! 

0 Likes
Highlighted
Shopify Partner
2294 117 353

This is an accepted solution.

You can do this either using the rich text editor(RTE) using tables.

Or use the <!--split--> technique by editing the product description html directly (<> button in the RTE).

 

https://community.shopify.com/c/forums/searchpage/tab/message?advanced=false&allow_punctuation=false...

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
1 Like
Highlighted
Excursionist
30 2 5

Hi @PaulNewton,

 

I was able to split the seconds into two seperate parts, with the following code:

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

However, this obviously works only for two parts. I tried several methods to have three sections, however none seemed to work. I am left clueless. I also found this: https://gist.github.com/bjornbennett/6ef1616287a5156b570f8a1fc2b71a4f. However unsure of how to exactly implement that in my code. 

0 Likes
Highlighted
Excursionist
30 2 5

I also tried the following, but it left having no text being shown. 

  <div class="product-single__description rte" itemprop="description">
            {% assign descr = product-single__description | split: "<!-- split -->" %}
            {{ descr[0]}}
            {{ descr[1]}}
            {{ descr[2]}}
    </div>
1 Like
Highlighted
Excursionist
30 2 5

The above is actually the solution, now I can put the pieces in different sections. Thanks!

0 Likes
Highlighted
Shopify Partner
2294 117 353

No problem good work on the desc[N] array,

 

Notes for others:

Larger versions may benefit from using a forloop and the loops index to output all array items.

If the split up information is the same for lots of products you may be better off putting it into a snippet in the theme files and including it after the regular description. More advanced would be placing the info into store metafields.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
1 Like
Highlighted
Tourist
12 0 2

Hi did you copy this code into the code of the theme? I need to split my description in two columns and since I have like 10000 products I don't want to do it manually

0 Likes
Highlighted
Shopify Partner
2294 117 353

@kenyamuro If you mean '<!-- split -->' then how else would computers know where to split the description?

You can use what ever keyword you want, but there still needs to be some method to the logic to know where to break up the content.

If you mean the liquid code it should go into the template for the PDP(product description page) either product.liquid , sections/product.liquid, or similar.

Actual filename varies by theme.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes