# Custom Service Block

<figure><img src="/files/0IvQBsUL7NWcik0FBsYm" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/2TJcpML6OGQ8fDqmBC5D" 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 "**Custom service block**".

## Section settings

### General

<table><thead><tr><th width="259">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section ID</td><td>Enter the Section ID to match the Menu link to enable the scroll to Section feature.<br><br><em><mark style="color:orange;">Note: Enter the section ID to match the menu link and enable the scroll-to-section feature.</mark></em></td></tr><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>Show top border</td><td>Toggle to show or hide border top.</td></tr><tr><td>Show text underline</td><td>Toggle to show or hide border bottom.</td></tr><tr><td>Border color</td><td>Apply a color to the borders.</td></tr><tr><td>Mobile layout</td><td><p>Select the layout for the section render on mobile device. The options are: <br><br><mark style="color:orange;"><strong>List</strong></mark><br><mark style="color:orange;"><strong>Scroll</strong></mark></p><p><mark style="color:orange;"><strong>Slider</strong></mark></p></td></tr><tr><td>Arrow icon color</td><td>Paint the color for the arrow icon of the slider layout.<br><br><em><mark style="color:orange;">Note: Only applicable for slider layout.</mark></em></td></tr><tr><td>Block items style</td><td><p>Select the style of the layout:</p><p><br><mark style="color:orange;"><strong>Style 1 :</strong> Full width (the 100% of the container);</mark></p><p><mark style="color:orange;"><strong>Style 2 :</strong> Has padding left and padding right</mark></p><p><mark style="color:orange;"><strong>Style 3 :</strong> The items have no padding on the left and right.</mark></p></td></tr><tr><td>Background color - Background gradient</td><td>Set color (or gradient) for the section background.</td></tr><tr><td>Background image</td><td>Upload/Select an image as the section background.</td></tr><tr><td>Title</td><td>Enter in the title for the section.</td></tr><tr><td>Show title border</td><td>Toggle the borders on the left and right of the title.</td></tr><tr><td>Title color</td><td>Apply a color to the title of the section.</td></tr><tr><td>Title font size</td><td>Specify the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Specify the font size of the title on mobile.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from bottom on desktop.</td></tr><tr><td>Title bottom margin on mobile</td><td>Determine the spacing of the title from bottom on mobile.</td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description position</td><td>Select position of the description : Top or Bottom</td></tr><tr><td>Description color</td><td>Apply a color to the description.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description.</td></tr><tr><td>Description top margin</td><td>Determine the spacing of the description from top.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the description from bottom.</td></tr><tr><td>View all</td><td>Enter the text for the "view all" link.</td></tr><tr><td>'View all' alignment</td><td>Select the alignment of the "view all" text to be either to the Left, Center or to the Right.</td></tr><tr><td>'View all' font weight</td><td>Select the font weight of the "view all" text</td></tr><tr><td>'View all' top margin</td><td>Determine the top spacing of the "view all" from top.</td></tr><tr><td>'View all' bottom margin</td><td>Determine the top spacing of the "view all" from bottom.</td></tr><tr><td>Show 'view all' border</td><td>Toggle "view all" border.</td></tr><tr><td>'View all' link</td><td>Set URL for the "view all" to redirect to if the "Redirect To URL" is selected.</td></tr><tr><td>'View all' link color</td><td>Apply a color to the "view all" text.</td></tr><tr><td>'View all' icon</td><td>Enter the SVG icon for the "view all".<br><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></td></tr><tr><td>'View all' icon color</td><td>Apply a color to the icon.</td></tr><tr><td>Alignment</td><td>Select the alignment of the header text to be either to the Left, Center or to the Right of the section.</td></tr></tbody></table>

### Block items

<table><thead><tr><th width="258">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Item width</td><td><p>Select the width of the items:</p><p></p><p><mark style="color:orange;"><strong>Auto</strong> (The width of the item matches its content).</mark></p><p><mark style="color:orange;"><strong>Full width</strong> (The items have equal widths).</mark></p></td></tr><tr><td>Border style</td><td><p>Select style of border items:</p><p></p><p><mark style="color:orange;"><strong>None</strong></mark></p><p><mark style="color:orange;"><strong>Style 1 :</strong> border between items</mark></p><p><mark style="color:orange;"><strong>Style 2 :</strong> border between items and shorter</mark> </p></td></tr><tr><td>Show spacing between items</td><td>Toggle Item distance.</td></tr><tr><td>Show box shadow on hover</td><td>Toggle hover box shadow.</td></tr><tr><td>Enable motion animation on hover</td><td>Toggle Hover Effects Top.</td></tr><tr><td>Item top padding</td><td>Determine the spacing of the item from top.</td></tr><tr><td>Item bottom padding</td><td>Determine the spacing of the item from bottom.</td></tr><tr><td>Left/Right padding</td><td>Determine the spacing of the item from left/right.</td></tr><tr><td>Corner radius</td><td>Determine the roundness of the block item.</td></tr><tr><td>Grid gap</td><td>Determine the gap between items.</td></tr><tr><td>Content alignment</td><td>Select the horizontal alignment of the text content to be either to the Left, Right or Center.</td></tr></tbody></table>

### Bottom block

<table><thead><tr><th width="262">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show bottom block</td><td>Toggle the bottom block.</td></tr><tr><td>Background color</td><td>Set color for the the bottom block background.</td></tr><tr><td>Image</td><td>Upload/Select an image.</td></tr></tbody></table>

### Button 1 / Button 2

<table><thead><tr><th width="264">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Button label</td><td>Enter the text for the button.</td></tr><tr><td>Button link</td><td>Enter URL for the button to redirect to.</td></tr><tr><td>Button width</td><td>Determine the width of the button.</td></tr><tr><td>Text color</td><td>The text color of the button.</td></tr><tr><td>Border color</td><td>The border color of the button.</td></tr><tr><td>Background color</td><td>The background color of the button.</td></tr><tr><td>Background gradient</td><td>The background gradient of the button.</td></tr><tr><td>Text hover color</td><td>The text color of the button for hover state.</td></tr><tr><td>Border hover color</td><td>The border color of the button for hover state.</td></tr><tr><td>Background hover color</td><td>The background color of the button for hover state.</td></tr><tr><td>Background hover gradient</td><td>The background gradient of the button for hover state.</td></tr></tbody></table>

## Block settings

## \[BLOCK] Settings block

<table><thead><tr><th width="270">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Background</td><td>Set color for the block background.</td></tr><tr><td>Border color</td><td>Set color for the block border.</td></tr><tr><td>Use image or text/SVG icon</td><td>Select to use the image or text for Icon.</td></tr><tr><td>Image</td><td>Select/Upload image for the icon.</td></tr><tr><td>Icon</td><td>Enter the SVG icon for the block.<br><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></td></tr><tr><td>Icons width</td><td>Enter the desired width of the icon.</td></tr><tr><td>Icon height</td><td>Enter the desired height of the icon.</td></tr><tr><td>Icon spacing bottom</td><td>Determine the spacing of the icon from bottom.</td></tr><tr><td>Icon color</td><td>Set the color for the icon.</td></tr><tr><td>Title</td><td>Enter in the title for the block.</td></tr><tr><td>Title font family</td><td>Select font type for the title: Font family #1 or #2</td></tr><tr><td>Title font size</td><td>Specify the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Specify the font size of the title on mobile.</td></tr><tr><td>Font weight</td><td>Select the font weight of the title.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from bottom on Desktop.</td></tr><tr><td>Title bottom margin on mobile</td><td>Determine the spacing of the title from bottom on Mobile.</td></tr><tr><td>Text color</td><td>Apply a color to the title.</td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description on desktop.</td></tr><tr><td>Description font size on mobile</td><td>Specify the font size of the description on mobile.</td></tr><tr><td>Description line height</td><td>Determine the line height of the description text.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the description from bottom.</td></tr><tr><td>Description color</td><td>Apply a color to the description for the block.</td></tr><tr><td>Button</td><td>Enter the text for the button.</td></tr><tr><td>Link</td><td>Enter URL for the button to redirect to.</td></tr><tr><td>Button style</td><td><p>Select the style of the button:</p><p></p><p><mark style="color:orange;"><strong>Style 1:</strong> as a Link.</mark></p><p><mark style="color:orange;"><strong>Style 2:</strong> normal button.</mark></p></td></tr><tr><td>Button font size</td><td>Determine the font size of the button.</td></tr><tr><td>Button width</td><td>Determine the width of the button.</td></tr><tr><td>Button font weight</td><td>Select the font weight of the button.</td></tr><tr><td>Show button underline</td><td>Toggle the underline for the button.</td></tr><tr><td>Color</td><td>The text color of the button.</td></tr><tr><td>Border color</td><td>The border color of the button.</td></tr><tr><td>Background color</td><td>The background color of the button.</td></tr><tr><td>Background gradient</td><td>The background gradient of the button.</td></tr><tr><td>Hover color</td><td>The text color of the button for hover state.</td></tr><tr><td>Border hover color</td><td>The border color of the button for hover state.</td></tr><tr><td>Background hover color</td><td>The background color of the button for hover state.</td></tr><tr><td>Background hover gradient</td><td>The background gradient of the button for hover state.</td></tr></tbody></table>


---

# Agent Instructions: 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:

```
GET https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/custom-service-block.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.