> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/product-page.md).

# Product page

The product page is where a visitor turns into a buyer. It carries the photos, the price, the variant choices, the **Add to Cart** button, and every piece of reassurance a shopper needs before paying. Vélare builds this page from one template, **Default product**, so a change you make here applies to every product that uses that template.

Customers reach this page from a collection listing, from search, from a mega menu, or straight from an ad, so treat it as a landing page rather than a detail page.

<figure><img src="/files/KB1eHh8UBzt3Ah8DpjLb" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template selector at the top of the editor.
3. Select **Products**, then **Default product**.
4. Click a section in the left sidebar to edit it, or click **Add section** to add a new one.
   {% endhint %}

*Result:* the preview loads a sample product and the sections that build the page appear in the left sidebar.

### What is in this section <a href="#what-is-in-this-section" id="what-is-in-this-section"></a>

| Page                                                                                                           | What it covers                                                                                                                              | Read it when                                                      |
| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| [Page template sections](/velare/customize-your-pages/product-page/page-template-sections.md)                  | Which sections are built for the product template, and which global sections you can add on top.                                            | You want the map before you start editing.                        |
| [Product information](/velare/customize-your-pages/product-page/page-template-sections/product-information.md) | The main buying block: gallery layout, title, price, variant picker, buy buttons, accordions, and everything else in the right hand column. | Always. This is the section that sells.                           |
| [Related products](/velare/customize-your-pages/product-page/page-template-sections/related-products.md)       | A row of products shown under the buying block to keep the customer browsing.                                                               | You want to raise the number of products viewed per visit.        |
| [Recently product](/velare/customize-your-pages/product-page/page-template-sections/recently-product.md)       | A row of the products this customer already looked at.                                                                                      | Shoppers in your store compare several items before buying.       |
| [App](/velare/customize-your-pages/product-page/page-template-sections/app.md)                                 | A slot for a Shopify app block, such as a reviews or variant app.                                                                           | You have installed an app that needs a place on the product page. |

### Suggested reading order <a href="#suggested-reading-order" id="suggested-reading-order"></a>

1. Start with [Product information](/velare/customize-your-pages/product-page/page-template-sections/product-information.md). It decides how the product is presented and how quickly a customer can add it to the cart.
2. Add [App](/velare/customize-your-pages/product-page/page-template-sections/app.md) next if you use a review app, since ratings sit close to the price in most stores.
3. Finish with [Related products](/velare/customize-your-pages/product-page/page-template-sections/related-products.md) and [Recently product](/velare/customize-your-pages/product-page/page-template-sections/recently-product.md), the two rows that give a customer somewhere to go when this product is not the right one.

### Before you customise <a href="#before-you-customise" id="before-you-customise"></a>

Several blocks on this page read values from product metafields rather than from the theme editor, so create those first or the blocks will look empty in the preview.

* [Short description](/velare/buy-and-install/create-required-metafields/metafields/short-description.md): the one line summary shown next to the product
* [Custom product badge](/velare/buy-and-install/create-required-metafields/metafields/custom-product-badge.md): your own badge text on a specific product
* [Complementary products](/velare/buy-and-install/create-required-metafields/metafields/complementary-products.md): the products offered inside the **Complementary products** block

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Collection page](/velare/customize-your-pages/collection-page.md): the listing customers usually arrive from
* [Product cards](/velare/customize-your-pages/product-cards.md): how this product looks in listings, quick shop included
* [Quickview](/velare/customize-your-pages/overlay-group/quickview.md): the popup version of the product page opened from a listing
* [Cart drawer](/velare/customize-your-pages/overlay-group/cart-drawer.md): what opens after **Add to Cart** is clicked


---

# 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://uxsmart.gitbook.io/velare/customize-your-pages/product-page.md?ask=<question>&goal=<endgoal>
```

`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.
