# Home 1

### 1. Product Filter

The product filter on the home page is a Hikashop filter module. 

* Module type: HikaShop Filter Module

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F10TJ7LuSeaYNdQ7ZwB8I%2Fhikashop-filter-mod.jpg?alt=media&#x26;token=bf61baf5-9592-434c-a16e-b021d937b7d6" alt=""><figcaption><p>Configurations of the filter module</p></figcaption></figure>

### 2. How to change the background Image

To edit the background image of each section on the page, pls go to sp page builder > pages > edit your page > edit the row options > Style tab > Scroll down to find the background image option > upload or change the image.

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FyrMrvFthRRgsOQD3R6A5%2Fedit%20row%20options.jpg?alt=media&#x26;token=8cc76963-269d-4314-8e4b-78dd957c60f7" alt=""><figcaption><p>Open the row options</p></figcaption></figure>

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F9yV4QCOyvDHydFmxe1Vw%2Fedit%20parallax%20background%20image.jpg?alt=media&#x26;token=177243dc-db2c-4354-a0e7-5a354539230b" alt=""><figcaption><p>Upload / Change the background image</p></figcaption></figure>

#### How to edit the border image

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2Fblt6aMnG03MgZQaQACqw%2Fbackground%20border%20image.jpg?alt=media&#x26;token=0f39630a-a6fb-4bf2-9f0d-415de69a7535" alt=""><figcaption></figcaption></figure>

This is also a type of background image, so pls go to sp page builder > pages > edit your page > edit the row options > Style tab > Scroll down to find the background image option > upload or change the image.

* Background repeat: Repeat horizontally
* Background position: Left Top

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FVhhJ04SoCpoBlv8WhZ3I%2Fbackground%20border%20image%202.jpg?alt=media&#x26;token=5b73f53c-9bbd-414e-80df-a1332fcb104d" alt=""><figcaption></figcaption></figure>

### 3. Change the decoration and divider color

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FfcoNmAoUIV9udEe2Gbuq%2Fdecoration%20demo.jpg?alt=media&#x26;token=f90116e7-d936-4803-bc9c-81ea72bdbdfa" alt=""><figcaption></figcaption></figure>

#### Change the decoration's color

Pls edit your sp page builder page > Edit UK Header element > General tab > scroll down and you will see the Decoration color option

* Decoration type: Choose one of the options: None, bullet, divider, or line
* Decoration width: you can adjust the width of the decoration

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FRFLXwbNTxTjvwXrM5Xx7%2Fdecoration%20color.jpg?alt=media&#x26;token=6fdf0ced-84b8-4394-a158-ed90d21f8200" alt=""><figcaption><p>Change the decoration bullet's color</p></figcaption></figure>

#### Divider

* To edit the divider, you should edit the UK Divider addon > Border color
* In this addon, you also can choose the divider style, shape, and size

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FU4RlptnZcZbDMnLYBXHc%2Fedit%20divider%20color.jpg?alt=media&#x26;token=dd940900-a235-49c3-a154-a7f5ff66d4d3" alt=""><figcaption><p>Edit the divider's color</p></figcaption></figure>

### 4. Featured Products

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FXLyLYbs63gYjj1KZwd9t%2Fportfolio%20category%20mod.jpg?alt=media&#x26;token=7f9cf901-4458-402a-92aa-18fdc92773d8" alt=""><figcaption><p>Featured Products</p></figcaption></figure>

#### Create the product module

* Module type: TZ Portfolio Plus Categories
* Choose categories: Choose the portfolio categories created in the TZ Portfolio+ component
* Style: Elegant - Default

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2Ff0gG6zAHgLQdSzyeKvEi%2Fcreate%20portfolio%20category%20mod.jpg?alt=media&#x26;token=4eda4210-be85-45b9-b1c7-ae1e03a804c2" alt=""><figcaption></figcaption></figure>