{"title":"Product Tabs \u0026 Accordion","description":"\u003cp\u003eProduct Tabs \u0026amp; Accordion work for Shopify and Shopify Plus stores, handled as a flat-rate task by an in-house team that has worked on this since 2016.\u003c\/p\u003e\u003cp\u003eWe have completed 74 product tabs \u0026amp; accordion requests for merchants, including work on Impulse, Dawn, Brooklyn and Pacific. Typical turnaround is 2 to 4 business days. Below are 4 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"tabbed-description-and-shipping-and-reviews-impulse","title":"Tabbed Description and Shipping and Reviews","description":"\u003cp class=\"task-lead\"\u003eA sunglasses brand setting up a dropshipping store wanted product pages organized into tabs for description, shipping, and returns.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want tabs on the product page: description, shipping info, returns. Each product has its own description but shipping and returns are the same across the store. I shouldn't have to paste them into every product.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eLong product pages with repeated shipping and returns text in every description.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a tabbed layout to product pages with description pulled from each product and shipping and returns pulled from shared content the brand edits once. Tabs become an accordion on mobile.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eTabbed product page layout\u003c\/li\u003e\n\u003cli\u003eShared shipping and returns content edited once\u003c\/li\u003e\n\u003cli\u003eAccordion behavior on mobile\u003c\/li\u003e\n\u003cli\u003eAdditional tabs can be added per product\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155677343818,"sku":"TASK-0125","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"accordion-and-collapsible-sections-on-product-page-dawn","title":"Accordion and Collapsible Sections on Product Page","description":"\u003cp class=\"task-lead\"\u003eA brand wanted an accordion in the product description area and was willing to drop their tabs app if it conflicted.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eAdd an accordion feature to the product description area. We have a tabs app installed which can be removed if it conflicts.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eAn app that could be replaced by a native feature.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built a native accordion for the product description with sections for description, details, and shipping, removed the tabs app, and cleaned up its leftover code.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eNative accordion on product pages\u003c\/li\u003e\n\u003cli\u003eTabs app removed\u003c\/li\u003e\n\u003cli\u003eLeftover app code cleaned\u003c\/li\u003e\n\u003cli\u003eSections editable per product\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155696480330,"sku":"TASK-0323","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"tabs-app-integration-brooklyn","title":"Tabs App Integration","description":"\u003cp class=\"task-lead\"\u003eA brand had a mockup for a reworked product page with tabs and wanted it built.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe want to rework our product page. Mockup attached. Tabs for description, specs, and shipping, with a cleaner layout above them.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA design ready for build.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe rebuilt the product page to the mockup with a tabbed content area for description, specs, and shipping, and the cleaner layout above.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eProduct page rebuilt to the mockup\u003c\/li\u003e\n\u003cli\u003eTabbed content area\u003c\/li\u003e\n\u003cli\u003eTabs become an accordion on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155704213578,"sku":"TASK-0399","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"add-custom-tabs-pacific","title":"Add Custom Tabs","description":"\u003cp class=\"task-lead\"\u003eA retailer wanted the ability to add more custom tabs to product pages beyond the theme's fixed set.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eOn the product page we have custom tab content but the number of tabs is fixed. We want to add more tabs per product: geometry, specs, warranty.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA tab limit the retailer had outgrown.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe removed the tab limit so the retailer can add any number of custom tabs per product, each filled from the product admin.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eUnlimited custom tabs per product\u003c\/li\u003e\n\u003cli\u003eFilled from the product admin\u003c\/li\u003e\n\u003cli\u003eAccordion on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155723382858,"sku":"TASK-0472","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/product-tabs-accordion.oembed","provider":"TaskHusky","version":"1.0","type":"link"}