Product Template

File: sections/product-template.liquid

Templates: product.json

Description

Product Template

Renders a comprehensive product display page with responsive images, variant selection, add-to-cart functionality, product descriptions (with optional audio preview), and social media sharing.

Features:

• Responsive product images with dynamic thumbnail selector
• Variant selection dropdown with dynamic price and image updates
• Add to Cart form with quantity input
• Out-of-stock variant handling (disabled + “Sold Out” label)
• Optional audio preview via product metafields
• Social media sharing icons
• Fallback behavior for missing variant images

Settings: None

Blocks: None

Snippets Used:

• responsive-image — Renders responsive product images
• social-media-icons — Displays social sharing buttons

Dependencies:

• Shopify.formatMoney for price formatting
• Tailwind CSS (application.css) for layout and styling
• Heroicons for UI icons (dropdown caret)
• Inline <script> for variant selection and thumbnail interaction

Tailwind Status: Full All layout and styling use Tailwind utility classes.

Usage

This section is referenced in JSON templates and cannot be added via the theme editor.

{% section 'product-template' %}