> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/templates/default-product.md). # Default product The Default product template is the foundation of your store's buying experience. Everything a customer sees on a product page — the gallery, the buy area, the information blocks — comes from this template. Configure it once and it applies to all products assigned to it. {% hint style="info" %} **Theme Editor → page selector → Products → Default product** {% endhint %}
*** ### Product overview Product overview is the main section of every product page. It contains two parts: the **media gallery** on one side and the **content blocks** on the other.
**Sticky content offset** — when using a fixed/sticky header, set Offset to match your header height so the sticky product panel doesn't slide behind it.
**Variant media display** — three settings work together and are easy to confuse: | Setting | What it does | | ------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | **Show only media of selected variant** | Hides all images not tagged to the currently selected variant | | **Show also general product media** | Used together with the above — additionally shows images not attached to any variant | | **Show the first image instead of the variant's** | Always shows the first product image when a variant is selected, ignoring variant-tagged images | {% hint style="warning" icon="triangle-exclamation" %} **Show only media of selected variant** requires additional setup. [Learn more.](/docs/avante-themes/features-and-advanced-setup/display-only-media-related-to-chosen-variant.md) {% endhint %}
**Full-width gallery** doesn't support column gallery styles (Two columns grid, Slider with side thumbnails). Switch to a single-column style first before enabling full-width. **Sticky 'Add to Cart'** — a floating bar that appears at the top of the page as the customer scrolls down. Independent from the sticky content panel. Enable **Show image** and **Show price** to include the product thumbnail and price in the bar.
*** ### Product overview blocks Blocks build the content area next to the gallery. Add, remove, and reorder them in the Theme Editor. The core blocks — Title, Price, Variant selector, Buy buttons, Product rating, Stock level indicator, Quantity selector, Complementary products, Share — are part of the section by default. Everything else is added via **Add block**.
| Block | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Breadcrumbs** | Navigation path showing the collection the customer came from | | **Subtitle** | Secondary line above or below the title. Shows `{{ product.vendor }}` by default — replace with any text or Liquid variable | | **Title** | Product name | | **Product rating** | Star rating display. Requires a product review app (e.g., Judge.me, Shopify Product Reviews) — disabled by default until a compatible app is installed | | **Price** | Price display with sale badge support and optional shipping note | | **Linked products** | Color/style switcher that links related products. Requires [Linked Products](/docs/avante-themes/features-and-advanced-setup/linked-products.md) setup | | **Variant selector** | Variant picker (dropdowns, buttons, swatches — configured in Theme Settings → [Variant selector](/docs/avante-themes/theme-settings/variant-selector.md)) | | **Custom options — Checkbox** | Adds a checkbox option to the buy area (e.g., gift packaging, add-ons). Can be made required | | **Custom options — Text line** | Adds a single-line text input (e.g., personalization, engraving). Can be made required | | **Quantity selector** | Quantity input field. Disabled by default — enable when your store sells products in multiple quantities | | **Stock level indicator** | Shows a stock level bar. Set **Base quantity** (what counts as "full") and **Low threshold** — bar turns orange below threshold. Enable **Show inventory transfer notice** to display a restock notice when the item is on transfer. Customize colors per availability state: In stock / Low inventory / Sold out | | **Buy buttons** | Add to cart + dynamic checkout. Key settings: **Stretch buttons** (full width), **Display in row** (ATC and dynamic checkout side by side), **Show dynamic checkout buttons** (surfaces the customer's saved payment method — Shop Pay, Apple Pay, etc.), **Show recipient information form** (adds recipient email and message field for gift card products) | | **Description** | Product description from Shopify Admin. Disabled by default — enable to show it inline in the buy area instead of in a collapsible tab | | **Related collections** | Adds collection links inside the buy area. Three toggles control what appears: **Collection by brand** (products in same brand collection), **Shop by brand** (all products from this vendor), **Shop the collection** (product's primary collection). Enable any combination | | **Icons with text** | Row of icon + text items in the buy area (e.g., certified quality, insured shipping, atelier packaging) | | **Collapsible tab** | Expandable accordion section (e.g., Care instructions, Size guide, Ingredients). Add as many tabs as needed | | **Popup** | A text link that opens a modal popup with rich content (e.g., Payment & Shipping info, returns policy) | | **Ask a question** | Built-in contact form that opens in a popup — customers submit a question about the product directly from the page | | **Video reels slideshow** | Horizontal scrolling video + product carousel. Useful for styling videos or related looks | | **Complementary products** | Shows products from Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery) — requires the app to be installed and complementary products configured there. Customize the product card: image ratio, show second image on hover, price position, vendor, max product name length, ratings, and color pills | | **Share** | Social sharing icons or a collapsible share link | **Custom options** add 9 types of custom input fields to the buy area: Pills, Measurement, Checkbox, Dropdown, Single line text, Multi line text, File upload, Date, Color pills, Color picker. Each can be made required. Note: some types (e.g., Date picker) are only available in Product overview, Featured product, and Quick view sections. {% hint style="success" icon="sparkles" %} **Pro tip:** Use multiple **Collapsible tab** blocks to organize product information into scannable sections — Care, Sizing, Materials, FAQ. Customers expand only what they need. {% endhint %} {% hint style="warning" icon="triangle-exclamation" %} After upgrading to a major theme version, check that the **Buy buttons** block is still present in Product overview. Shopify's Theme Updater sometimes drops it during migration — if the Add to Cart button has disappeared, re-add it via **Add block**. {% endhint %}
*** ### Other sections Any section from the Sections library can be added below the Product overview — the same sections available on other page types. Common additions to product pages: * **Product recommendations** — "You may also like" grid powered by Shopify's recommendation engine * **Recently viewed** — shows products the customer browsed earlier in the session * **Related collections** — links to collections the product belongs to * **Collapsible tabs** — full-width accordion section for detailed product information * **Icons with text** — full-width trust badges or feature highlights below the buy area * **Main product details** — extended product description section with tabs and collapsible content blocks
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://staylime.com/docs/avante-themes/templates/default-product.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.