> 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 builds every product page in your store — the media gallery, the buy area and the sections underneath it.
Every product in your catalogue is sold by the same page layout, and this is where that layout is decided. The Default product template controls how the media gallery behaves, what sits beside it in the buy area, and which sections follow underneath. Set it up once and it applies to every product assigned to the template, so moving a block or changing the gallery style changes your whole catalogue at the same time.
{% hint style="info" %}
A single product can be moved onto its own template later in **Shopify admin → Products → the product → Theme template**. Everything below describes the Default one.
{% endhint %}
***
### How to open
{% stepper %}
{% step %}
#### Open the theme editor
In Shopify admin go to **Online Store → Themes** and press **Customize** on your Avante theme.
{% endstep %}
{% step %}
#### Switch to the product template
Use the page selector at the top of the editor and choose **Products → Default product**.
{% endstep %}
{% step %}
#### Choose the product you preview
Still in the page selector, pick which product the preview shows. Your changes apply to every product on this template, not only to the one in front of you — so preview a product with several variants and plenty of images, not your simplest one.
{% endstep %}
{% endstepper %}
The main section is called **Product overview**. It holds the media gallery on one side and the blocks of the buy area on the other.
***
### The media gallery
**Desktop gallery style** decides how the media is laid out: *Slider with arrows*, *Slider with thumbnails below*, *Slider with side thumbnails*, *One column grid* or *Two columns grid*. Sliders keep the buy button in view on long catalogues; the grid styles suit products that are sold by detail — fabric, finish, stitching — because the customer scrolls through the images instead of clicking through them.
**Show arrows** appears only for the two thumbnail styles. With *Slider with arrows* the arrows are the navigation and the setting is not needed, and the grid styles have nothing to page through.
**Desktop gallery size** controls how much width the gallery takes: *Small*, *50%*, *Large* or *Full-width*. The default is **50%**.
{% hint style="warning" %}
**Full-width** is a different layout, not just a wider one. It does not support the grid gallery styles — with Full-width they fall back to a slider with arrows — and **Swap gallery position** stops working, because the gallery always spans the screen and there are no sides left to swap. Use one of the slider styles with Full-width.
{% endhint %}
**Mobile navigation** sets how the gallery is browsed on phones: *Arrows*, *Scrollbar* or *Thumbnails*. Arrows is the default. Scrollbar reads as a swipeable strip and is the quietest of the three; Thumbnails is worth the extra height only when the product really has images worth jumping between.
Secondary gallery settings
**Thumbnail ratio** and **Media ratio** — the proportions of the thumbnails and of the main images. A single ratio across the catalogue is what makes a collection page look deliberate.
**Focal point** — which part of the image stays visible when it is cropped to the ratio.
**Corner radius** — rounding of the media, taken from the theme radius by default.
**Follow the product media image order** — show the media strictly in the order set in the Shopify product, instead of the theme's own ordering.
**Swap gallery position** — put the gallery on the right and the buy area on the left.
**Enable video looping**, **Enable autoplay**, **Disable video controls** — behaviour of video and 3D media inside the gallery.
***
### Variant media
Three settings decide which images a customer sees after choosing a variant, and they are easy to mix up.
| Setting | What it does |
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Show only media of selected variant** | Hides every image that is not attached to the selected variant |
| **Show also general product media** | Used together with the setting above — additionally shows the images attached to no variant at all |
| **Show the first image instead of the variant's** | Always opens the gallery on the first product image. It is inactive while **Show only media of selected variant** is on |
{% hint style="warning" %}
**Show only media of selected variant** needs the media to be attached to variants in the Shopify product first, otherwise the gallery looks empty. [Display only media related to chosen variant](/docs/avante-themes/features-and-advanced-setup/display-only-media-related-to-chosen-variant.md) walks through the setup.
{% endhint %}
***
### Image zoom
Zoom is on in the default template and gives the customer a closer look without leaving the page. **Style** offers three behaviours: *Default*, *Slideshow* and *Zoom in*. Slideshow opens the media in a full-screen viewer, which is the better choice for apparel and anything photographed in a set; *Zoom in* magnifies in place and suits products judged by texture.
Zoom settings
**Desktop image width** and **Mobile image width** — how large the zoomed image is allowed to become.
**Show arrows in mobile slideshow** — arrows inside the zoomed view on phones.
**Enable slideshow zoom on click** — a further magnification step inside the slideshow.
***
### Sticky 'Add to Cart'
A compact bar that follows the customer down the page so the product is still buyable after the gallery has scrolled away. It is **off by default**, and it is independent from the sticky buy area — **Enable sticky content** is what keeps the buy column pinned while the gallery scrolls, with **Offset** matching the height of a fixed header.
The bar sits at the **bottom** of the screen, up to 600 px wide. **Show** limits it to *Both*, *Desktop* or *Mobile*, and **Desktop position** places it *Left*, *Center* (the default) or *Right*. On phones it becomes a full-width strip along the bottom edge and lifts itself above the mobile dock when one is enabled.
Sticky bar settings
**Show image** with its own **image ratio**, **focal point** and **corner radius** — a product thumbnail inside the bar.
**Show price** — the price next to the button.
**Corner radius** — rounding of the bar itself on desktop.
***
### Blocks in the buy area
Everything next to the gallery is a block. Add, remove and reorder them in the editor; the order on screen is the order of the list. Out of the box the template carries a vendor **Subtitle**, **Title**, **Product rating**, a second **Subtitle**, a **Line** separator, **Price**, **Variant selector**, **Stock level indicator**, **Quantity selector**, **Buy buttons**, **Ask a question**, a third **Subtitle**, **Pop-up**, **Collapsible tab**, **Complementary products**, **Share** and **Text**.
A few of them carry behaviour that is not obvious from the name:
* **Product rating** draws the stars itself from Shopify's standard rating metafield. A review app writes the metafield; the written reviews come from the app, the stars come from the theme. A product with no reviews shows nothing. See [Product rating](/docs/avante-themes/features-and-advanced-setup/product-rating.md).
* **Variant selector** has almost no settings of its own — dropdowns, buttons and swatches are configured once in [Theme settings → Variant selector](/docs/avante-themes/theme-settings/variant-selector.md).
* **Linked products** switches between separate products as if they were variants, which is how one colour can have its own product page and still appear as a swatch on the others. It needs metafields; see [Linked products](/docs/avante-themes/features-and-advanced-setup/linked-products.md).
* **Complementary products** is filled by Shopify's [Search & Discovery](https://apps.shopify.com/search-and-discovery) app. Without the app installed and configured the block stays empty.
* **Ask a question** opens a contact form in a pop-up, so a pre-sale question becomes an email instead of an abandoned page.
{% hint style="warning" %}
After a major theme update, check that **Buy buttons** is still in the list. Shopify's theme updater occasionally drops it during migration, and the symptom is a product page with no Add to cart button at all. Re-add it with **Add block**.
{% endhint %}
***
### Related collections
This block turns the buy area into a way back into the catalogue — useful on stores where customers arrive from search and land on a single product with no sense of what else you sell. It adds up to three links, each with a small image, and all three are on by default.
* **Collection by brand** opens the main collection filtered by this product's vendor.
* **Shop by brand** opens the vendor's own page with everything from that brand.
* **Shop the collection** opens the main collection as it is.
The main collection is resolved in three steps: the **Main collection** setting on the block wins; if it is empty the theme reads the product metafield `custom.main_collection`; if that is empty too it falls back to the first collection the product belongs to. *Collection by brand* and *Shop the collection* need a main collection to exist, so on a product that belongs to no collection they simply do not appear. *Shop by brand* works regardless.
{% hint style="info" %}
Each link takes a **Custom image**. Without one, *Collection by brand* and *Shop the collection* use the collection image, and *Shop by brand* looks in **Content → Files** for a file named after the vendor with a `.png` extension — which is the tidy way to show brand logos across a whole catalogue without touching every product.
{% endhint %}
***
### Back in stock alert
An email capture field that appears in place of a sold-out product's silence. It renders **only when the selected variant is unavailable** — in the theme editor it is always visible so you can style it.
It is a plain Shopify contact form. The submission arrives at your store's contact email with the product title, the selected variant and a link to the product, plus the text of the **Email message** setting.
{% hint style="warning" %}
There is no automatic restock notification. The store owner receives the email and has to write back to the customer. If you need an automated flow, that is an app's job.
{% endhint %}
Back in stock settings
**Text** — the invitation above the field.
**Button label** — *Notify me* by default.
**Success message** — shown after the form is submitted.
**Email message** — the line included in the email that reaches you.
***
### Volume pricing
Shows the quantity price breaks of the selected variant to B2B customers: the base rule first, then each break. The block renders nothing when the current variant has no price breaks, so it is safe to leave in place on a mixed catalogue — it appears only where it has something to say.
***
### Custom options
Ten blocks collect information that a variant cannot express — engraving text, a gift message, measurements, an uploaded file — and save it with the order: *Pills*, *Measurement*, *Checkbox*, *Dropdown*, *Single line text*, *Multi line text*, *File upload*, *Date*, *Color pills* and *Color picker*.
**Show for option value** displays a block only for a variant with a matching option value, which keeps a long form from following the customer through every colour. Custom options never affect price or inventory. [Custom options](/docs/avante-themes/features-and-advanced-setup/custom-options.md) covers both in detail.
***
### Other blocks you can add
* **SKU** and **Barcode (ISBN, UPC, etc.)** print the identifiers of the selected variant — worth having on parts, spares and anything a customer cross-checks against a manufacturer's listing.
* **Payment icons** show the payment methods already enabled in your store, taken straight from Shopify. Nothing to configure, and the block disappears if no payment method is active.
* The rest fill in the layout and the detail: **Breadcrumbs**, **Title**, **Subtitle**, **Text**, **Description**, **Price**, **Quantity selector**, **Stock level indicator**, **Buy buttons**, **Pickup availability**, **Icons with text**, **Collapsible tab**, **Pop-up**, **Image**, **Share**, **Countdown timer**, **Video reels slideshow**, **Line**, **Empty space**, **Custom Liquid**, and any block provided by an installed app.
***
### Sections below the buy area
Below Product overview the template is an ordinary page: add, remove and reorder sections as you would anywhere else. The default template ships with **Icons with text**, [Product details](/docs/avante-themes/sections/products/product-details.md), **Media with text**, **Video banner**, **Product recommendations** (headed *You may also like*), [Featured collection with product grid](/docs/avante-themes/sections/collections/featured-collection-with-product-grid.md) and **Recently viewed products**.
Two of them do work that is easy to miss. **Product details** is where the long description lives, split into a description block, a table and collapsible tabs — keeping it out of the buy area is what stops the Add to cart button being pushed below the fold. **Product recommendations** is filled by Shopify's recommendation engine, so it works without setup. To choose the related products yourself, set them in the [Search & Discovery](https://apps.shopify.com/search-and-discovery) app.
***
### Best practices
* Preview the template on a difficult product — many variants, many images, a long description. A layout that survives that one will survive the rest of the catalogue.
* Keep the buy area short above the Add to cart button. Everything that is reference material rather than a decision belongs in a collapsible tab or in Product details.
* Pick one gallery style and one media ratio for the whole store. Mixed ratios are the most common reason a catalogue looks improvised.
* If you enable the sticky Add to cart bar on mobile, check it against the mobile dock and the cookie banner — three bars competing for the bottom of the screen is a real risk.
* Re-check the block list after every major theme update, starting with Buy buttons.
***
### Related
* [Product rating](/docs/avante-themes/features-and-advanced-setup/product-rating.md)
* [Custom options](/docs/avante-themes/features-and-advanced-setup/custom-options.md)
* [Display only media related to chosen variant](/docs/avante-themes/features-and-advanced-setup/display-only-media-related-to-chosen-variant.md)
* [Linked products](/docs/avante-themes/features-and-advanced-setup/linked-products.md)
* [Variant selector](/docs/avante-themes/theme-settings/variant-selector.md)
* [Product details](/docs/avante-themes/sections/products/product-details.md)
---
# 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.