> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/customer-review.md).

# Customer Review

<figure><img src="/files/Ib6D2HI0H5RLIPWcyZcF" alt=""><figcaption></figcaption></figure>

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Customer review**".&#x20;

## Section settings

### General

<table><thead><tr><th width="327">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full Width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout.</td></tr><tr><td>Style</td><td><p>Select the position layout for the section content. The options are:<br></p><p><mark style="color:orange;"><strong>Style 1</strong></mark></p><p><mark style="color:orange;"><strong>Style 2</strong></mark></p><p><mark style="color:orange;"><strong>Style 3</strong></mark></p></td></tr><tr><td>Background color</td><td>Apply color on the background of the section.</td></tr><tr><td>Background gradient</td><td>Apply color on the background gradient of the section.</td></tr><tr><td>Background image</td><td>Upload / Select an image as the section background.</td></tr><tr><td>Show title above review content</td><td>Toggle to show the title above the review content.<br><br><em><mark style="color:orange;">Note: Only applicable for style 2.</mark></em></td></tr></tbody></table>

### Section

<table><thead><tr><th width="331">Settings</th><th>Meaning </th></tr></thead><tbody><tr><td>Title</td><td>Enter the title for the section.</td></tr><tr><td>Title color</td><td>Apply color on the section title.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from the bottom.</td></tr><tr><td>Title font size</td><td>Determine the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on Mobile.</td></tr><tr><td>Description</td><td>Specify the text for the section description.</td></tr><tr><td>Description color</td><td>Apply color on the description text.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the description from its bottom.</td></tr><tr><td>Description font size</td><td>Determine the font size of the description.</td></tr><tr><td>Alignment</td><td>Select the align of title and description to be either to be to the Left, Right or Center.</td></tr></tbody></table>

### Review block

<table><thead><tr><th width="338">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Block layout</td><td><p>Select the layout for all blocks. The options are:<br></p><p><mark style="color:orange;"><strong>Layout 1</strong></mark></p><p><mark style="color:orange;"><strong>Layout 2</strong></mark></p><p><mark style="color:orange;"><strong>Layout 3</strong></mark></p></td></tr><tr><td>Reviews per row</td><td>Select the row count for reviews to render. The options are 1/2/3/4/5.<br><br><em><mark style="color:orange;">Note: Not applicable for layout 3.</mark></em> </td></tr><tr><td>Show navigation arrows</td><td>Toggle the arrows on review slider.</td></tr><tr><td>Enable center mode</td><td>Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.</td></tr><tr><td>Show avatar</td><td>Toggle to show or hide the avatar.<br><br><em><mark style="color:orange;">Note: Not applicable for layout 3.</mark></em></td></tr><tr><td>Bottom margin</td><td>Set the spacing of the reviewer's avatar from the bottom.</td></tr><tr><td><strong>Heading</strong></td><td></td></tr><tr><td>Text color</td><td>Set the color for the review heading.</td></tr><tr><td>Font size</td><td>Determine the font size of the review heading.</td></tr><tr><td>Bottom margin</td><td>Determine the spacing of the heading from the bottom.</td></tr><tr><td>Font weight</td><td>Select the font weight of the heading to be either Normal, Medium, SemiBold, Bold, Extra bold, Black.</td></tr><tr><td><strong>Subheading</strong></td><td></td></tr><tr><td>Text color</td><td>Set the color for the review subheading.</td></tr><tr><td>Font size</td><td>Determine the font size for the review subheading.</td></tr><tr><td>Bottom margin</td><td>Determine the spacing of the review subheading from the bottom.</td></tr><tr><td><strong>Name</strong></td><td></td></tr><tr><td>Text color</td><td>Set the color for the reviewers' names.</td></tr><tr><td>Font size</td><td>Determine the font size of the reviewers' names.</td></tr><tr><td>Bottom margin</td><td>Determine the spacing of the reviewers' names from the bottom.</td></tr><tr><td><strong>Date</strong></td><td></td></tr><tr><td>Text color</td><td>Set the color for the review dates.</td></tr><tr><td>Font size</td><td>Determine the font size of review dates.</td></tr><tr><td><strong>Content</strong></td><td></td></tr><tr><td>Text color</td><td>Set the color for the review message.</td></tr><tr><td>Font size</td><td>Determine the font size of the review message.</td></tr><tr><td>Bottom margin</td><td>Determine the spacing of the review message from the bottom.</td></tr><tr><td><strong>Icon</strong></td><td></td></tr><tr><td>Icon color</td><td>Set the color for the icons.</td></tr><tr><td>Background color</td><td>Set the color for the icon backgrounds.</td></tr><tr><td><strong>Star</strong></td><td></td></tr><tr><td>Font size</td><td>Determine the font size of the stars.</td></tr><tr><td>Bottom margin</td><td>Determine the spacing of the rating stars from the bottom.</td></tr><tr><td>Position</td><td><p>Select the position layout for the stars. The options are:<br></p><p><mark style="color:orange;"><strong>Above the title</strong></mark></p><p><mark style="color:orange;"><strong>Below the title</strong></mark><br><br><em><mark style="color:orange;">Note: Only applicable for layout 2.</mark></em></p></td></tr><tr><td>Star color</td><td>Set the color of the stars. With no color specified, the rating star color will fallback to its default (orange).</td></tr><tr><td>Star empty color</td><td>Set the color for the empty stars.</td></tr></tbody></table>

### Scrollbar

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Height</td><td>Set the height of the scrollbar.</td></tr><tr><td>Track background color</td><td>Set the track background color</td></tr><tr><td>Thumb background color</td><td>Set the thumb background color</td></tr><tr><td>Thumb background hover color</td><td>Set the thumb background hover color</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

## Block Settings

### Review

<table><thead><tr><th width="339">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Avatar</td><td>Select/Upload image for reviewer's avatar.</td></tr><tr><td>Heading</td><td>Fill in the heading for the review card.</td></tr><tr><td>Subheading</td><td>Enter the subheading for the review card.</td></tr><tr><td>Rating</td><td>Select the rating start from 0 to 5.</td></tr><tr><td>Name</td><td>Enter the reviewer's name.</td></tr><tr><td>Date</td><td>Enter the review date.<br><br><em><mark style="color:orange;">Example: Wednesday, Jan 26, 2019</mark></em></td></tr><tr><td>Content</td><td>Enter the review message for the review card.</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/customer-review.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.