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

# Product Main

Add blocks on product page from this section to built main look of your product.  Re-arrange blocks position with Drag & Drop.

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FOXaCEYs6OXFBrkrUXmCk%2Fproduct-page1.jpg?alt=media&amp;token=a0db7717-e23c-4a78-909f-92867d5cf8ea" alt=""><figcaption></figcaption></figure></div>

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

* In the theme editor, Choose **Default product** top dropdown menu.

* Click **Product Main** Sectio&#x6E;**,**

* Adjust style from section.

* Click **Add Block** to add more blocks and save.
  {% endhint %}

* **Section Settings**

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FP4lZd0vd0BA3HxgfsOKL%2Fproduct-page3.jpg?alt=media&amp;token=bfea00db-cdb6-4824-9d9f-d229583bf04f" alt=""><figcaption></figcaption></figure>

* **Available blocks to use**

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FwXLiWGh16eTAqS4HtCKO%2Fproduct-page2.jpg?alt=media&amp;token=f469056a-c75f-48a2-b0f9-bd3b0d677356" alt=""><figcaption></figcaption></figure>

* [Click to manage some global product settings.](/vogal-theme/theme-settings/product-page.md#product-swatch)

{% embed url="<https://youtu.be/8N3Owj0vhaY>" %}