Home 🛍️ Product Page & Templates

🛍️ Product Page & Templates

Optimize your product presentation. Detailed instructions on media layouts, product swatches, stock status, and essential product blocks.
4 articles

Product Page Layout

The Freedom theme offers extensive control over the structure of your product page. You can adjust the balance between imagery and text, define scrolling behaviors, and choose specifically how your product gallery appears on different devices. These settings are found within the Product information section in the Theme Editor. Layout & Sizing Page Width You can control the overall container width of the product details: - Page: Follows the global content container width. - Full: Spans the entire browser width. - Custom: Allows you to define a specific maximum width in pixels (e.g., 1400px). Media vs. Content Ratio Use the Desktop media width slider to adjust the proportion of the screen occupied by your images versus your product details. - Range: 30% to 80%. - Tip: A larger media width (e.g., 65-75%) is ideal for visual-heavy brands, while a balanced 50-60% is standard for most stores. Media Position You can choose to display the product images on the Left (standard) or Right side of the screen on desktop devices. Product Media Gallery Layouts You can configure independent layouts for desktop and mobile to ensure the best user experience on every screen. To access these options, click on the Product media gallery block inside the Product Information section. Desktop Layouts - Stacked: Images appear one after another in a vertical column. - Featured with grid below: The main image is large, with a grid of smaller images underneath. - Stacked with thumbnails on the left: A vertical scrolling list of images with a sticky thumbnail strip on the side. - Slider with thumbnails on the left: A main slideshow with a vertical strip of thumbnails. - Slider with thumbnails below: A main slideshow with a horizontal strip of thumbnails. - Slider with dots: A clean slideshow using simple dot navigation. Mobile Layouts - Slider with thumbnails: Shows a horizontal strip of small thumbnails below the main image. - Slider with dots navigation: Shows minimal pagination dots below the image. Sticky Content When the Enable sticky content on desktop setting is active, the product information (title, price, add to cart button) will "stick" to the screen as the user scrolls down a long list of product images. This ensures that the "Add to Cart" button remains visible and accessible, even if you have a large number of photos in your gallery.

Last updated on Jan 14, 2026

Product Blocks Explained

The Product Information section is built using modular blocks. While standard blocks like Title and Price are straightforward, some blocks contain specific logic and advanced configuration options. Inventory Status This block displays stock availability to create urgency or reassure customers. Prerequisites: For this block to function, you must track inventory for the product in your Shopify Admin (select "Track quantity"). Configuration: - Low inventory threshold: Set a number (e.g., 10). If stock falls below this number, the "Low stock" message and color will be triggered. If stock is above this number, the "In stock" message is shown. - Visual Style: You can choose between an Icon, a Pulsating dot, or None for the status indicator. - Colors: You can define distinct colors for "In stock", "Low stock", and "Out of stock" states. Collapsible Row This block is excellent for organizing secondary information like "Shipping & Returns," "Size Guide," or "Materials" without cluttering the page. Content is hidden inside an accordion that expands when clicked. - Icon: Choose from a library of built-in icons (e.g., ruler, truck, shirt) to represent the content. - Heading: The title of the row (e.g., "Care Instructions"). - Content: You can use any block (most commonly the Rich Text block) to add your information. - Open by default: Check this if you want the row to be expanded when the page loads. Pickup Availability This block allows customers to check if a product is available for local pickup at your physical retail locations. How it works: The block automatically checks the visitor's location against your store locations. It also allows the visitor to check availability at other stores in a drawer. Requirements: 1. You must have Local Pickup enabled for your locations in Shopify Admin > Settings > Locations. 2. The product must be stocked at that location. Complementary Products This block displays a "Pairs well with" list directly inside the product details area, encouraging cross-selling. Setup: The products shown here are recommended via the free Shopify Search & Discovery app. You must install the app and manually assign complementary products or allow Shopify's algorithm to recommend them. - Heading: Customize the title (default: "Pairs well with"). - Maximum products: Limit how many recommendations are displayed (e.g., 3).

Last updated on Jan 10, 2026

Product Media & 3D Models

The Freedom theme includes a robust media gallery that supports high-resolution images, videos, and 3D models. These features are designed to provide an immersive shopping experience. Zoom & Lightbox To allow customers to examine product details closely, ensure Open lightbox on image click is enabled in the Product media gallery block settings. - Desktop: Clicking an image opens a full-screen overlay (lightbox). Users can use their mouse wheel to zoom in further. - Mobile: Tapping an image opens the lightbox, supporting pinch-to-zoom gestures. Video Playback You can upload videos or embed links from YouTube/Vimeo directly to your product media. - Autoplay: When Enable media autoplay is checked, videos will start playing automatically when they slide into view. Note: Autoplaying videos are muted by default to comply with browser privacy policies. - Looping: Enable Enable video looping to have the video repeat indefinitely. - Controls: You can check Hide video controls for a cleaner look. If controls are hidden, we recommend enabling Autoplay so the user can see the content. 3D Models (AR) The theme natively supports Shopify's 3D model files (.glb or .usdz). When a 3D model is present, a "View in your space" button (XR button) automatically appears on supported mobile devices. This allows customers to use Augmented Reality (AR) to place your product in their room using their phone camera. Variant Image Grouping The Reorder or slide to selected variant image setting improves the user experience for products with many variants (e.g., different colors). How it works: When a customer selects a variant option (e.g., clicks the "Red" swatch), the gallery automatically slides or scrolls to the specific image associated with that red variant. - Setup: Ensure you have assigned images to your variants in the Shopify Admin > Products area.

Last updated on Jan 14, 2026