How to Split Product Description Into Multiple Sections

Highlighted
New Member
5 0 0

Hi,

 

I want to have more flexibility about my product page such as being able to split the description part into multiple sections. I'm using Simple theme and at its current form, I'm unable to place images independently wherever I want. It puts all the images I paste still as the continuation under the description text. I don't have any knowledge about codding so any detailed and clear support will be too much appreciated.

 

You may refer to the photos I send to understand what I exactly mean.

 

Thanks

 

 

Screenshot_1.JPGScreenshot_2.JPGThanks

0 Likes
Highlighted
New Member
5 0 0

It's definitely unbelievable that not a single response has come in the whole forum covering particularly numerous amount of experts and partners. I hadn't asked anything about atom fragmentation. What's the purpose of this forum?

0 Likes
Highlighted
Shopify Expert
10006 116 1820

@Soykan wrote:

It's definitely unbelievable that not a single response has come in the whole forum covering particularly numerous amount of experts and partners. I hadn't asked anything about atom fragmentation. What's the purpose of this forum?


These forums are community driven. Some posts don't make sense so might not get a response. Some posts are asking complex things so not all might be able to answer. Other times it just might be lost among all the other posts. This one looks lost.

 

Liquid has a split string filter. That will turn a string into an array. For example let's say this is your product HTML:

foo <!-- split --> bar

You'd have code in place that does something like this:

{{ product.description }}

If you wanted to break that into two parts do this instead:

{% assign productDescription = product.description | split:"<!-- split -->"%}

First part: {{ productDescription | first }}
Last part: {{ productDescription | last}}

or

First part: {{ productDescription[0] }}
Last part: {{ productDescription[1] }}

^ assumes that you will always have two parts so does needs to be extended to do some sanity checks to make sure you don't output things twice when that splitting string doesn't exist.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Highlighted
Excursionist
12 2 3
Try using the Debut theme. That's all I use and I'm able to put images in the descriptions where I want them. The formatting does get a little strange sometimes but removing formats and doing then again when the images are in seems to fix it
0 Likes
Highlighted

I can't get this to work.

I've added <!-- split --> to my description and replaced {{ product.description }} with your code but I can't get it to work.

 

Edit: My problem was that I wasn't putting the second description out of the first div.

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes
Highlighted
New Member
1 0 0

Thought for some it might be helpful to follow along to a video, so created this. Works the same for collections as it does for descriptions.

 

0 Likes
Highlighted
New Member
1 0 0

Hi i facing same problem.

 

<!-- split --> is not working

and your video can't play

0 Likes
Highlighted
New Member
6 0 0

Please provide a small example of doing this in the product HTML section using Debut.  I would like to layout like this:

 

Image(s)  |  Description text

Full width additional information

 

<!-- Product HTML example for above -->

<p>Description text</p>

<!-- split -->

<p>Full width additional text</p>

 

<!-- split --> does not work in Debut for me.  It works perfectly well with Parallax though.

0 Likes
Highlighted
Tourist
5 0 0

Hi Jason, thanks for your valuable advise in this forum. I am using the debut theme and would like to split the product description section into 4 sections. I would appreciate if you could help send me a code for this. I tried the one your posted but it didn't work, though I wanted 4 sections.

I look forward to hearing from you.

David

0 Likes
Highlighted
Tourist
8 0 0

meet on here if any question https://www.linkedin.com/in/sudhir-kumar-wp/ 

Add Content Shopify dashboard 

Nylon Heavy Duty Dog Pet Harness Collar Adjustable Padded Extra Big Large Medium Small Dog Harnesses vest Husky Dogs Supplies

my new contents

now working on  collection-template.liquid first is code

{%if collection.description contains '' %}

{{ collection.description | split: '' | first }}

{% else %}

{{ collection.description }}

{%endif%}

and last    

 {%if collection.description contains '' %}        
    {{ collection.description | split: '' | last}}       
{%endif%}    
 
0 Likes