# Page Builder

## How To Build A Home Page ?

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FCKSZKOvwdfhEf0h3loNr%2FPage%20Builder%20(1).mp4?alt=media&token=99905ab9-1daf-4a34-9768-74c6eede0028>" %}

1. From our app, click **Page Builder.**
2. Select the type page of page you want to create. For example: I would choose a homepage to get started.
3. Click **Build Home.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F3g3b9EDoCoe6AyBvbjyO%2FPage%20Builder%201.jpg?alt=media&#x26;token=a6e00b43-bf18-4219-b65b-20000419625b" alt=""><figcaption></figcaption></figure>

4. Click Blank Template or start with pre-made template if you want. Click **Select.**
5. Enter the name of template. Click **Start Building.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FjicCaQKd85tJwm2Z1ww8%2FPage%20Builder%202.jpg?alt=media&#x26;token=c9be03ce-bc4a-4852-8f00-e7c19710e9cf" alt=""><figcaption></figcaption></figure>

6. Click **Add Section.**
7. Select the section you want and click **Select.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FhzS8a8QsONW8lrWsQOUl%2FPage%20Builder%203.jpg?alt=media&#x26;token=16f151d4-a16b-4381-ba2e-591b97187310" alt=""><figcaption></figcaption></figure>

8. If you want to try a new thing. Click **Regenerate.** It will automatically generate variations of existing sections with different layouts, making store-building faster and more dynamic.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F8V4vfl7wYLHw2iTjZqOz%2FPage%20Builder%204.jpg?alt=media&#x26;token=60c4f33b-680b-47a8-b4b0-b19fdee76197" alt=""><figcaption></figcaption></figure>

9. Click Theme Settings gear icon. In the **Page Style**, select the style of the page you want.
10. Click **Save.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FWpZ3Qw3UK3yqlzpne1es%2FPage%20Builder%205.jpg?alt=media&#x26;token=a78bf735-e5cc-43ca-bcfa-c280277170ae" alt=""><figcaption></figcaption></figure>

11. Click **Content Editor** to edit the content of the page.
12. Click **Install**.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FVwimW343BMivDcphOCPO%2FPage%20Builder%206.jpg?alt=media&#x26;token=00b779f6-ed99-40a2-a83c-061ab06b3192" alt=""><figcaption></figcaption></figure>

13. Now you can customize your content, image or color for the page

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FO3cJrH8FGKLmecspUFHh%2FPage%20Builder%207.jpg?alt=media&#x26;token=d04a68c8-67a5-4262-bffc-238baf8bdd52" alt=""><figcaption></figcaption></figure>

14. Go to **Smind Sections > My Library**
15. On the **Templates** tab, choose **Home** tab
16. Choose a template that you've just created and click **...** button . For example: smi-test7.&#x20;

* **Rename:** Change the name of the selected template.
* **Hide header & footer of theme**: When enabled, this hides the default Shopify theme’s header and footer on the selected template. Useful for landing pages or standalone designs.
* **Hide global group**: This hides any global section groups that may appear across multiple templates.
* **Set as default:** Sets this template as the default for its page type (e.g., home, product, collection). Click this template as a homepage, for example.&#x20;
* **Delete:** Permanently removes the selected template from the library.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FszAK0BzLUONkyRzbiT6D%2FPage%20Builder%20Image%201%20(1).jpg?alt=media&#x26;token=0b512b0a-7fa9-439b-a634-606cb3c003a9" alt=""><figcaption></figcaption></figure>

## How To Build A Product/Collection Page?

Building a **Product Page** or **Collection Page** is exactly the same as building a Homepage using the Page Builder. So you simply follow the step-by-step instructions above, but apply them to the **Product Page** or **Collection Page** instead.

After you've built your **Product Page** or **Collection Page**, you need to assign a specific product or collection to it.

1. From our app, click My Library.
2. Click the **Product** or **Collection** tab
3. Click ... > **Assign**
4. Select the product to assign to the page. Click **Save**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FkLDBpYwrdFwIDRaNyh0N%2FPage%20Builder%209%20(1).jpg?alt=media&#x26;token=eb7e5d22-1b9f-475c-b28e-64f3aa8fc23d" alt=""><figcaption></figcaption></figure>

## How to use the Quick Build&#x20;

Quick Build is designed to help you create pages faster. Instead of adding sections one by one, it generate a complete page layout instantly using pre-designed templates.

Once the installation is complete, you will see the interface as shown in the image.

{% hint style="danger" %}
If you don't see your installed template after installation, it's likely because you haven't selected the correct template tab. For example, if you've installed the Product template, be sure to select the 'Product' tab.
{% endhint %}

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F1J34s36wgVrpDSqH05GP%2FPage%20Builder%2010.jpg?alt=media&#x26;token=bd50b655-850e-4a91-a2e9-5903d4adb3d1" alt=""><figcaption></figcaption></figure>

Click on **Quick Build** -> **Add Section**. You can quickly add sections or replace the template you want.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FXkcbD410E6ZChZ5zBkmY%2FPage%20Builder%2011.jpg?alt=media&#x26;token=d8a772cb-057a-4c87-86c7-63a5e6c7cfaa" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FzmDsGdxqwgFf9cRWkvhR%2FPage%20Builder%2012.jpg?alt=media&#x26;token=8aceff89-80d1-4d2c-8c79-148b1c8df1fd" alt=""><figcaption></figcaption></figure>

**Note:** Remember to save your changes after making any adjustments.
