Extract specific Hn Title content in product description

New Member
1 0 0

Hi everyone :) ! 


I am not an expert in css liquid and html but I recently add tabs on my product dexcription. It looks pretty good but I want to go further !

Capturecodetabs.PNGThis is my current coding tabs. (it's in the produt-template.liquid folder) As you can see I have 2 tabs with {{ product.description }} 

All my product description are writing in h3 for "description" and h4 for "details" (details are different fro all my products)

So I would like to add a code so I can exclude h4 content in tab-1 and exclude the h3 content in tab-2. In this way, when I will write product description, using only hn will permit me to put the content in the tab I want by using h3 or h4. 


It is clear enough and is it possible ? Sorry if my english is weird, I am from France doing my best to explain my issue :) 


Have an amazing day everyone !



12 4 2

Hi Victor, I am not completely sure what you are trying to do.   I think you want to use the text between "<h3> description here </h3>" as the description? 


In theory, you would be able to use the "Split" command.   

The general format would be something like this: 


    	{{product.description | split: '<h3>' | last | remove: '<h3>' %}}

If your text originally looked like this: 



<h1>Sur le Pont d'Avignon</h1>
<h2>L'on y danse, l'on y danse</h2>
<h3>Sur le Pont d'Avignon</h3>
<h4>L'on y danse tous en rond.</h4>
<p>Les beaux messieurs font comme ça
Et puis encore comme ça.</p>

It would give you:


Sur le Pont d'Avignon</h3>
<h4>L'on y danse tous en rond.</h4>

Then you would need to split it again at the closing H3 tag: 

{{product.description | split: '</h3>' | first %}}

To get this: 

Sur le Pont d'Avignon


You will probably need to experiment with it a bit.   I have used 'split' in liquid to divide text into two parts before as a single command.   I have not tried to combine 2 splits into a single statement or calculation on Shopify liquid.   JavaScript is much easier for this sort of thing. 




12 4 2

I just tested it, and this worked for me ... 

                {{ product.description | split: '<h3>' | last | remove: '<h3>' | split: '</h3>' | first}}
1000 126 231

Hey victor, I'm not sure I completely understand what it is exactly you're trying to do. What I'm gathering is that your product descriptions contain h3 and h4 tags that you want removed? 


Or are you saying you want to be able to write:


<hn>Some Heading Here</hn>

Inside your product description and be able to replace that with h3 and h4 somewhere down the line? If that is the case, you can do this. You can use a replace filter on your product.description:


//This is your html inside your description:
<hn>Some Heading Here</hn>

//this is your html on your product page

<div class="tab-1">
{{ product.description | replace: '<hn>','<h3>' | replace: '</hn>','</h3>' }}
<div class="tab-2">
{{ product.description | replace: '<hn>','<h4>' | replace: '</hn>','</h4>' }}

Not sure if this is what you're looking for but that's what I gathered.

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 :D