# Custom Service Block

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FzqAn71oDNLd1os4nDZFk%2Fcustomer%20service.jpg?alt=media&#x26;token=36ca04e8-5e52-4d17-adc9-122082cc64a0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FMEVb2bnVYZdCG7V7NoRy%2Fcustomer%20service%201.jpg?alt=media&#x26;token=ef438e6d-59af-41ae-8b51-ad7afc794d51" 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>