Skip to main content

Product

The product page is the most important page of your webshop; this is the place where visitors make the decision to buy something. In Inspire, you can build this page entirely modularly using different 'blocks' and 'sections'.

Product Page Templates​

Inspire comes with two distinct product page templates, allowing you to choose the layout that best fits your brand and the amount of information you want to display:

  1. Standard Layout (product): In this traditional layout, the core product information (title, price, variants, add-to-cart) sits next to the images. Comprehensive information like the full description, technical specifications, and extra text blocks are added as separate Sections that span across the page below the main product area.
  2. Sidebar Layout (product.sidebar): In this compact layout, almost all product information is kept alongside the product images in a scrollable right-hand column (the sidebar). Detailed information like the description, specifications, and extra text are added as collapsible Blocks (Accordions) directly beneath the add-to-cart button, rather than as separate sections below the product.

General Settings​

When you click on the main section of the product page, you can manage the general layout and the display of the product images (media):

  • Color scheme: Choose the background and text colors for the entire product section.
  • Space between blocks (Space between sections): Determine the default distance in pixels between the various information blocks (such as the title, price, and order button).
  • Spacing (Layout): Adjust the margin (bottom) and padding (top/bottom) of the section for the perfect whitespace on the page.
  • Media (Images) Settings:
    • Navigation: Choose whether you want to show arrows and/or pagination dots (bullets) with multiple product images.
    • Design: Optionally add a border around the images.
    • Ratio & Fit: Determine the format of the images (e.g., 1:1 square or 3:4 portrait) and whether they should be cropped or made to fully fit (pad).
  • Sticky Order Bar (Sticky bar): Show a fixed order bar at the bottom of the screen when the visitor scrolls past the normal order button. You can always turn this on, turn it off, or show it exclusively on mobile devices.

Adding Product Blocks​

The information on the right side of the product images is built up of individual blocks. You can determine the order of these blocks yourself by dragging them.

Tip: For almost every block, you can set the Bottom margin (MB) to 'Default', 'Small', or 'None'. This allows you to perfectly manage the space between specific elements.

Core Blocks (Available in both templates)​

  • Title (Product title): Shows the name of the product. Choose font size, alignment, and optionally show the brand (vendor) or selected variant.
  • Price: Shows the current price (and compare-at price). You can also display tax and shipping policy labels.
  • Short Description: Shows a short introduction to the product. You can truncate the text and add a 'Read more' link, or use a Shopify Metafield for custom text.
  • Variants: Shows the options for the customer (sizes, colors). Choose between clickable 'buttons' or a dropdown menu.
  • Order button (Add-to-cart): Customize the button text/icon and enable dynamic checkout buttons (like Apple Pay or Google Pay).
  • Inventory (Stock): Create urgency. Set a threshold to show a warning like "Only X left in stock!".
  • USP: Add a specific benefit with a colored FontAwesome icon (e.g., 'Ordered before 23:00, delivered tomorrow').
  • Information bar (Info-bar): An eye-catching, colored bar with an icon and text for important announcements (like shipping info).
  • Pickup availability: Shows whether the customer can pick up the selected product locally (requires physical store setup).
  • Text: A simple block to add a line of plain text.
  • App Blocks: Add blocks from external Shopify apps (such as product reviews).

If you are using the Sidebar template, you have access to additional blocks to keep your layout compact:

  • Purchase USPs: A dedicated block to highlight your main selling points right next to the buy button.
  • Accordion Description: Places your full product description in a collapsible accordion within the sidebar. You can set it to be open or closed by default.
  • Accordion Specifications: Places your product specifications (via metafields) in a collapsible sidebar accordion.
  • Accordion Text: Perfect for adding extra collapsible tabs like "About this brand" or "Washing instructions" directly in the right column.

Additional Product Sections​

In addition to the main section with the images and the order button, you can expand the product page with specific sections.

Note: If you use the Standard (product) template, you will use these sections to display your descriptions and specs below the product. If you use the Sidebar (product.sidebar) template, you will likely use the accordion blocks mentioned above instead.

Product Description​

This is the place for a comprehensive story about your product spanning below the main images.

  • General layout: Choose a color scheme, adjust margins/padding, and choose text alignment.
  • Accordion: Check 'Open by default' if this section should be immediately readable, or turn it off to make it a clickable dropdown.
  • Adding blocks: Build the description using Title blocks, Icon & Text blocks (for highlighting features), and App blocks.

Product Specifications​

A handy section for clearly displaying technical details, dimensions, or materials below the product.

  • Metafield link: Enter the key of the metafield where you stored the specifications (default is specs).
  • Accordion & Image: Choose if the block is open by default, and whether to show an accompanying specification image.

Product Text​

A simple, clean section for extra plain text (e.g., shipping info or brand story) below the main product area.

  • Use the rich text editor to format your text, and optionally hide it inside an accordion to save space.

Product Recommendations​

Show visitors other products to stimulate cross-selling and up-selling. You can add a maximum of 2 of these sections per product page.

  • Recommendation type (Intent): Choose Related (similar products) or Complementary (matching products, configurable via Shopify Search & Discovery).
  • Slider settings: Determine how many products are visible at once (3 to 6 on desktop), enable pagination, and set carousel overflow behavior.

Using General Theme Sections​

You are absolutely not limited to just the product-specific sections mentioned above! Inspire offers the flexibility to use almost all general theme sections on the product page as well.

This means you can make the page as comprehensive as you want. Try adding the following sections to transform your product page into a real landing page:

  • Banners & Hero images: To visually enhance the vibe of the product.
  • Newsletter: Add a quick signup form (often used at the bottom of the sidebar template).
  • Contact forms: For products that require customization or where customers often have questions.
  • Product, Collection, and Media cards: To direct visitors straight to related collections or brands.
  • Custom Liquid or HTML: For advanced elements, videos, or external widgets.