Copy-paste a Liquid snippet for product page - Tabs for description, shipping and returns on the product page - keeps long content tidy and scannable.
Soft, breathable linen with a relaxed everyday cut. Prewashed so it keeps its shape.
1{%- comment -%}2 Accessible tab pattern: buttons drive panels, arrow keys move between tabs.3 Wire the shipping/returns panels to metafields or hard-code your policies.4{%- endcomment -%}5<div class="gpl-tabs" data-gpl-tabs>6 <div class="gpl-tabs__bar" role="tablist" aria-label="Product information">7 <button type="button" role="tab" id="gpl-tab-1" aria-controls="gpl-panel-1" aria-selected="true" class="gpl-tabs__btn is-active">{{ tab1 | default: 'Description' | escape }}</button>8 <button type="button" role="tab" id="gpl-tab-2" aria-controls="gpl-panel-2" aria-selected="false" tabindex="-1" class="gpl-tabs__btn">{{ tab2 | default: 'Shipping' | escape }}</button>9 <button type="button" role="tab" id="gpl-tab-3" aria-controls="gpl-panel-3" aria-selected="false" tabindex="-1" class="gpl-tabs__btn">{{ tab3 | default: 'Returns' | escape }}</button>10 </div>11 <div id="gpl-panel-1" role="tabpanel" aria-labelledby="gpl-tab-1" class="gpl-tabs__panel">12 {{ product.description }}13 </div>14 <div id="gpl-panel-2" role="tabpanel" aria-labelledby="gpl-tab-2" class="gpl-tabs__panel" hidden>
Full source is for members
One payment - every snippet, guide and bundle
