> For the complete documentation index, see [llms.txt](https://docs.lufavo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lufavo.com/frameora/page-setup/product-page.md).

# Product page

The Product page displays a single Shopify product with product media, title, price, description, variant options, quantity selector, buy buttons, custom photo upload options, related products, and complementary products.

Use this page to help customers understand the product, customize it if needed, add it to cart, and discover additional products.

### Open Product page settings

{% hint style="success" %}
To edit the Product page:

* From your Shopify admin, go to **Online Store > Themes**.
* Find **Frameora**.
* Click **Customize**.
* Use the page selector at the top of the theme editor.
* Select **Products**.
* Choose **Default product**.
* Select the **Main product** section in the sidebar.
* Edit the settings and blocks.
* Click **Save**.
  {% endhint %}

***

### Main product section

The Main product section controls the main product layout and product form.

The product title, price, images, variants, and description come from the selected Shopify product.

{% hint style="success" %}
To edit product content:

* From your Shopify admin, go to **Products**.
* Open the product.
* Edit the title, description, media, variants, price, and availability.
* Click **Save**.
  {% endhint %}

***

### Main product settings

The Main product section includes settings for:

* Kicker
* Intro text
* Dynamic checkout button
* Custom photo upload
* Order notes
* Quality helper text
* Process card
* Upload requirements

***

### Kicker

Enable **Show kicker** to show a small label above the product title.

Use the **Kicker** field to customize the text.

Example:

**Create your Frameora**

***

### Intro text

Enable **Show intro text** to display short supporting text near the product title.

Use the **Intro text** field to describe the product benefit.

Example:

**Upload your favorite moments and create premium photo decor made to stick, restick, and brighten every room.**

***

### Dynamic checkout button

Enable **Show dynamic checkout button** if you want Shopify to display dynamic checkout buttons when available.

Dynamic checkout buttons are controlled by Shopify. The buttons shown may depend on:

* Store payment settings
* Customer device
* Customer browser
* Customer location
* Product eligibility

Do not create fake dynamic checkout buttons. Frameora uses Shopify’s native dynamic checkout output.

***

### Custom photo upload

Frameora includes custom photo upload settings for products that require customer images.

Custom photo upload settings include:

* Upload module heading
* Upload helper text
* Upload helper card heading
* Upload helper card text
* File upload label
* Require uploads before add to cart

#### Upload module heading

Use this field to customize the upload area heading.

Example:

**Upload your photos**

#### Upload helper text

Use this field to explain what customers should upload.

Example:

**Upload one image for each tile in your selected set. You can also add notes for cropping, layout, or special instructions.**

#### Upload helper card heading

Use this field for the helper card title.

Example:

**Choose your tile set**

#### Upload helper card text

Use this field to explain the upload process.

Example:

**Pick how many photo tiles you want, then upload one image for each tile.**

#### File upload label

Use this field to customize the file upload label.

Example:

**Photo**

#### Require uploads before add to cart

Enable **Require uploads before add to cart** if customers must upload image files before adding the product to cart.

This is useful for custom photo products.

***

### Order notes

Enable **Show order notes** if you want customers to provide customization instructions.

Order note settings include:

* Notes label
* Notes placeholder

#### Notes label

Use this field to customize the notes label.

Example:

**Order notes**

#### Notes placeholder

Use this field to customize the placeholder text inside the notes field.

Example:

**Example: Use these photos in order, crop faces carefully, or make the family photo the main tile.**

***

### Quality helper text

Use the **Quality helper text** field to guide customers on image quality or file preparation.

Example:

**For best results, upload clear, high-resolution images. We’ll contact you if there’s an issue with file quality.**

***

### Process card

Enable **Show process card** to display a short process guide on the product page.

Process card settings include:

* Process card heading
* Step 1 text
* Step 2 text
* Step 3 text
* Process footer text

Example:

**Process card heading:** How your custom order works\
**Step 1 text:** Upload your photos\
**Step 2 text:** We prepare it for print\
**Step 3 text:** Your custom order is made and shipped\
**Process footer text:** We’ll contact you if there’s an issue with image quality or file preparation.

***

### Product blocks

The Main product section can include these blocks:

* Title
* Price
* Variant picker
* Quantity selector
* Buy buttons
* Description
* Pickup availability
* Custom liquid

You can add, remove, or reorder available blocks in the theme editor.

***

### Title

The **Title** block displays the product title.

The title is controlled by the product in Shopify Admin.

***

### Price

The **Price** block displays the product price.

If the product has a compare-at price, Shopify may show sale pricing based on your product pricing settings.

***

### Variant picker

The **Variant picker** block displays product options such as size, style, quantity, or other variants.

Variant options are controlled by the product in Shopify Admin.

***

### Quantity selector

The **Quantity selector** block lets customers choose the quantity before adding the product to cart.

***

### Buy buttons

The **Buy buttons** block displays the add-to-cart button and dynamic checkout buttons when enabled and available.

***

### Description

The **Description** block displays the product description.

Use a clear product description in Shopify Admin so customers understand the product, options, materials, dimensions, and customization process.

***

### Pickup availability

The **Pickup availability** block shows local pickup availability when pickup is configured in Shopify.

If pickup is not configured, this block may not show visible pickup information.

***

### Custom liquid

The **Custom liquid** block lets advanced users add custom Liquid inside the product page.

Use this only if you need custom content inside the product area.

Custom code may not be covered by standard theme support.

***

### Related products

The Product page can include a **Related products** section.

This section includes:

* Pill text
* Heading
* Products to show

Related products are managed through Shopify’s product recommendation system and can be configured with the Shopify Search & Discovery app.

If Shopify does not return related products, the section may not appear on the storefront.

***

### Complementary products

The Product page can include a **Complementary products** section.

This section includes:

* Pill text
* Heading
* Products to show

Complementary products are managed through Shopify Search & Discovery. If no complementary products are assigned or returned, the section may not appear on the storefront.

***

### If the product does not appear correctly

Check that:

* The product is active.
* The product is available on the Online Store sales channel.
* The product has at least one available variant.
* The product has a price.
* Product images are uploaded.
* The correct product template is assigned.
* Required upload fields are configured correctly.
* Dynamic checkout buttons are enabled only when needed.
* Related or complementary products are configured if you expect them to appear.

***

### Save your changes

After editing the Product page, click **Save**.

If changes do not appear immediately, refresh the storefront or open the page in a private browser window.


---

# 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://docs.lufavo.com/frameora/page-setup/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.
