Liquid, JavaScript, themes, sales channels
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
Solved! Go to the solution
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' %}
3. Click Save and Close and then hit Publish!
Result:
For more information regarding the Tabbed Descriptions read this thread by @tim .
Thanks to Donny from @PageFly-Victor.
Sarv
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' %}
3. Click Save and Close and then hit Publish!
Result:
For more information regarding the Tabbed Descriptions read this thread by @tim .
Thanks to Donny from @PageFly-Victor.
Sarv
Thank you so much for this guide! How did you make the line under the tabs not go all the way to the right?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024