# Text list

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdS87m3Yr8UVTHQmtU%2F-MHdVSzO0zcfUtqIc5Jo%2Ftext-list.jpeg?alt=media\&token=f78025d4-e756-4d18-bf51-2bd6ee1b8a90)

## 1. Open the existing section

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Text list** section.

## 2. Add a Text list section to your home page

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Text list** > **Add**.
4. Use the settings to customize your **Text list** section.
5. Click **Save**.

## 3. Settings

### Background

* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.

### Section gutters

* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.

### General settings

* **Show the text in uppercase format:** display all characters in the uppercase format.
* **Wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
* **Hide this section on the mobile screen:** not show the section on the mobile screen.

### Separated line

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdS87m3Yr8UVTHQmtU%2F-MHdX6nGKwZXFdwT8W07%2Ftext-list-separated-line.jpeg?alt=media\&token=e16952b9-70d4-4b28-a9b2-efae026fa0a4)

* Enable: show/hide the line between text list items.

### Colors

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdS87m3Yr8UVTHQmtU%2F-MHdXM3dsLHIpI2EY77O%2Ftext-list-colors.jpeg?alt=media\&token=7e1024de-1588-4952-8f6e-e145c39d874e)

&#x20;Configure colors for title, subtitle, and icon.

### Font sizes

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdS87m3Yr8UVTHQmtU%2F-MHdXgpXDv7_xAvtkHIh%2Ftext-list-font-sizes.jpeg?alt=media\&token=a6c4f067-5ce7-4363-b252-69a99ddbc20a)

Configure the font sizes for the title, icon on the desktop, tablet, and mobile screens.

{% hint style="info" %}
The font size of the subtitle will be calculated base on the title's font size.
{% endhint %}

## 4. Add/Edit/Remove a text item

Scroll down to the bottom, you will see an **Add text item** button, click this button to add a new text item. Or you can click one of the available items to edit/remove it and drag/drop items to rearrange them.

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdS87m3Yr8UVTHQmtU%2F-MHdYGK6PC_cMneKKEN0%2Ftext-list-add-item.jpeg?alt=media\&token=e87790c3-caad-4a88-942c-186aca78f0a2)

**Text item settings:**

* **Content:**
  * **Icon Class:** add the icon HTML class. You can go to [this page](https://boostheme.com/vodoma/icons) and copy the HTML class of an icon you want to add, then paste it into this setting.
  * **Title:** add your text to display it as a title.
  * **Subtitle:** add your text to display it as a subtitle.
* **Background color:** set an item's own background.
  * **Enable:** turn on/off the background color.
  * **Pick a color:** choose a color for the background.
