# Trust Badge

![Màn hình thêm trust badge](https://3137359664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1RAeIMFPQkdVfsP2GGGB%2Fuploads%2FQQca0kExqkUBNURHWmZp%2Fimage.png?alt=media\&token=ccbc639a-ac3f-4454-922a-bc78ac6b7158)

Areas of the trust badge add/edit dashboard:

**(1) Badges Library:** The library has over 1,300 pre-made badges, categorized by flexible categories and industries.

**(2) Trust Badge Preview**

**(3) Trust badge editor:** Options for Trust Badge's adjustment.

**(4) Badges show on:** Choose template and position to display trust badge on store.

**(5) Name/status setting area:** Name/status setting area and trust badge saving action.

### 1. Badges Library

![Badge Library](https://3137359664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1RAeIMFPQkdVfsP2GGGB%2Fuploads%2FA7GB2W7TxjJErPo0HxMy%2Fimage.png?alt=media\&token=93831c63-28e8-4100-b33b-dcf2a5010026)

**The badges library area includes the following components:**

1. Choose Industry: Set the industry you want .
2. Search badges by name.
3. Sort badges by category All, Return...: in library catalogs.
4. My Badges: List of custom badges and uploaded badges. 
5. Featured: Display badges according to the selected industry.
6. The area allows to create custom badge / upload badge quickly.
7. The list of badges allows the user to choose.

### 2. Trust Badge Preview

Display list of chosen badges and visual changes when interacting with the Trust badge editor.

![Trust Badge Review](https://3137359664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1RAeIMFPQkdVfsP2GGGB%2Fuploads%2FpZbRDHGpklp2x6QtqH0j%2Fimage.png?alt=media\&token=2c2aa150-46db-4820-9dbc-6741e353fd02)

Trust Badge Preview includes the following components:

**(1) Show header:** Hide/show header of Trust Badges.

**(2) The content of displayed header**

**(3) List of Chosen Badges:** At this list, there are 2 quick actions that can be used: Delete each badge and hold and drag each badge to change the position.

### 3. Trust Badge Editor

![Trust Badge Editor](https://3137359664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1RAeIMFPQkdVfsP2GGGB%2Fuploads%2FleoHdB04HbNjMToFPf3z%2Fimage.png?alt=media\&token=63a6c80a-f8d3-456e-9a7a-87b3ce71a8bb)

The area contains tools that allow editing trust badge visually, all operations will be displayed immediately on the Trust badge preview. 

Trust Badges Editor contains following components:

* **Size:** Adjust the size of the badges.
* **Style Color:** Set color/black and white mode for badge.
* **Animation:** Trust badge animation effect when loaded.
* **Width Box:** The width of the frame containing the trust badge. Unit %
* **Align:** Align badge: Center, left, right.
* **Badges Spacing:** Spacing between badges.
* **Spacing Around:** The distance of the trust badge container from the elements on the page.
* **Show Border:** Turn on the border and set the color and edge of the border.

### 4. Badges Show On

The area to set the display position of the trust badge on the store

![](https://3137359664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1RAeIMFPQkdVfsP2GGGB%2Fuploads%2FDtXLG9VfmqHUGDeuIIwO%2Fimage.png?alt=media\&token=3a99917e-b429-46df-8dcf-524e2733e67a)

***Badges Show On contains following components:***

1. A short-code will be generated allowing you to copy. Trust badge will be displayed everywhere when you paste this short-code in your theme's code.
2. List of templates that allow displaying trust badge:
   * Product pages
   * Cart page
   * Collection pages
   * Search results pages
   * Home page
   * Collection list pages
3. The Css element you want to put the trust badge on: There are 2 ways to set the value for this field.

* Tap the "4" area to use the app's smart location picker.
* Import the Css element you want yourself (Suitable for developers with html/Css knowledge).

4\. Trust badge display location picker: Tap to select the location you want visually on the store.

5\. Set the display position of trust badge: Above or below the Css Element you have set up. Only available when you manually import the Css element.

### 5. Interact with the list of templates

**Product pages**

When you select the template as "Product pages", the system will display a list of products allowing you to select certain products to display that trust badge.

![Product Badge](https://3137359664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1RAeIMFPQkdVfsP2GGGB%2Fuploads%2FnVJQlrBGyGQyLpNvMfrz%2Fimage.png?alt=media\&token=5fdb633b-d75c-4d39-af30-ac903e514f3b)

The system allows you to filter or type in a name to search for products according to the conditions you want.

**Collection pages**

When you select the template as "Collection pages", the system will display a list of the collections you want to display the trust badge on. The default is to select all.

![Collection Page](https://3137359664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1RAeIMFPQkdVfsP2GGGB%2Fuploads%2FgnAtByNo3ReWU9bu5MO9%2Fimage.png?alt=media\&token=3b17b171-33e4-4868-91f8-8dd1a5f2cad3)

### 5. Name/status setting area

![Name/Status Setting Area](https://3137359664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1RAeIMFPQkdVfsP2GGGB%2Fuploads%2F1p7kdGfV987po0stWPRv%2Fimage.png?alt=media\&token=834ec0e7-a26a-4130-8a3d-f76cb4c632cc)

Enter the name and status of the trust badge then press the save button to save the trust badge.