Solved

How to implement accordion or tabs for product description in a Pagefly template?

SarvMarketing
Shopify Partner
55 5 11

Hey Community, 

I was looking for a solution where I can divide long product descriptions into Tabs by using a heading tag and found this solution

Store Password: 1234

It works fine on the default theme product page template for one product: https://gamestreaming.myshopify.com/collections/frontpage/products/3m-command-ad 

But on the product page, I created a product template using @PageFly-Victor it's not showing tabs: https://gamestreaming.myshopify.com/collections/frontpage/products/product-2 

The tabbed descriptions don't work on the product page template created with Pagefly. 

I tried finding the {{ product.description }} line in the product.pagefly.170ea8ee.liquid found under the templates folder, but it's not there.

Can someone help me in implementing the tabbed descriptions in the Pagefly product template?

Regards,

Sarv 



If helpful then please Like and Accept the Solution.

Best,
Sarv
Accepted Solution (1)

SarvMarketing
Shopify Partner
55 5 11

This is an accepted solution.

I figured it out.

You can create a custom product page template using Pagefly and call tabbed product descriptions by the following method:-

1. Create a new snippet called tabbed-description and use this code (it should include the code from the tutorial above, use the gist link below for complete code):

Get code here: https://gist.github.com/tairli/aecb41ffd3ffc0c08ba502636461fb97 

2. Replace the Product Descriptions element with HTML/Liquid Pagefly element.

Paste the following code in the HTML / Liquid Code Editor

{% include 'tabbed-description' %}

PageFly+-+Advanced+Page+Builder+-+Google+Chrome+20.png

 

 

3. Click Save and Close and then hit Publish!

Result: 

Product 3 – gamestreaming - Google Chrome 2021-02-.png

For more information regarding the Tabbed Descriptions read this thread by @tim .

Thanks to Donny from @PageFly-Victor.

 

Sarv

 



If helpful then please Like and Accept the Solution.

Best,
Sarv

View solution in original post

Replies 2 (2)

SarvMarketing
Shopify Partner
55 5 11

This is an accepted solution.

I figured it out.

You can create a custom product page template using Pagefly and call tabbed product descriptions by the following method:-

1. Create a new snippet called tabbed-description and use this code (it should include the code from the tutorial above, use the gist link below for complete code):

Get code here: https://gist.github.com/tairli/aecb41ffd3ffc0c08ba502636461fb97 

2. Replace the Product Descriptions element with HTML/Liquid Pagefly element.

Paste the following code in the HTML / Liquid Code Editor

{% include 'tabbed-description' %}

PageFly+-+Advanced+Page+Builder+-+Google+Chrome+20.png

 

 

3. Click Save and Close and then hit Publish!

Result: 

Product 3 – gamestreaming - Google Chrome 2021-02-.png

For more information regarding the Tabbed Descriptions read this thread by @tim .

Thanks to Donny from @PageFly-Victor.

 

Sarv

 



If helpful then please Like and Accept the Solution.

Best,
Sarv
gianrivera27
Visitor
1 0 0

Thank you so much for this guide! How did you make the line under the tabs not go all the way to the right?