Custom Service Block
Last updated
Last updated
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Custom service block".
| Settings | Meaning |
|---|---|
Section ID | Enter the Section ID to match the Menu link to enable the scroll to Section feature. Note: Enter the section ID to match the menu link and enable the scroll-to-section feature. |
Section width | Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full Width (100% of the viewport width). |
Padding for 'full width' option on desktop | Determine the left and right spacing of the full width layout. |
Show top border | Toggle to show or hide border top. |
Show text underline | Toggle to show or hide border bottom. |
Border color | Apply a color to the borders. |
Mobile layout | Select the layout for the section render on mobile device. The options are: List Scroll Slider |
Arrow icon color | Paint the color for the arrow icon of the slider layout. Note: Only applicable for slider layout. |
Block items style | Select the style of the layout: Style 1 : Full width (the 100% of the container); Style 2 : Has padding left and padding right Style 3 : The items have no padding on the left and right. |
Background color - Background gradient | Set color (or gradient) for the section background. |
Background image | Upload/Select an image as the section background. |
Title | Enter in the title for the section. |
Show title border | Toggle the borders on the left and right of the title. |
Title color | Apply a color to the title of the section. |
Title font size | Specify the font size of the title. |
Title font size on mobile | Specify the font size of the title on mobile. |
Title bottom margin | Determine the spacing of the title from bottom on desktop. |
Title bottom margin on mobile | Determine the spacing of the title from bottom on mobile. |
Description | Enter the text for the description. |
Description position | Select position of the description : Top or Bottom |
Description color | Apply a color to the description. |
Description font size | Specify the font size of the description. |
Description top margin | Determine the spacing of the description from top. |
Description bottom margin | Determine the spacing of the description from bottom. |
View all | Enter the text for the "view all" link. |
'View all' alignment | Select the alignment of the "view all" text to be either to the Left, Center or to the Right. |
'View all' font weight | Select the font weight of the "view all" text |
'View all' top margin | Determine the top spacing of the "view all" from top. |
'View all' bottom margin | Determine the top spacing of the "view all" from bottom. |
Show 'view all' border | Toggle "view all" border. |
'View all' link | Set URL for the "view all" to redirect to if the "Redirect To URL" is selected. |
'View all' link color | Apply a color to the "view all" text. |
'View all' icon | Enter the SVG icon for the "view all". Note: Go to this link find your icon. Find the icon you want, then copy the SVG code and paste it here. |
'View all' icon color | Apply a color to the icon. |
Alignment | Select the alignment of the header text to be either to the Left, Center or to the Right of the section. |
| Settings | Meaning |
|---|---|
Item width | Select the width of the items: Auto (The width of the item matches its content). Full width (The items have equal widths). |
Border style | Select style of border items: None Style 1 : border between items Style 2 : border between items and shorter |
Show spacing between items | Toggle Item distance. |
Show box shadow on hover | Toggle hover box shadow. |
Enable motion animation on hover | Toggle Hover Effects Top. |
Item top padding | Determine the spacing of the item from top. |
Item bottom padding | Determine the spacing of the item from bottom. |
Left/Right padding | Determine the spacing of the item from left/right. |
Corner radius | Determine the roundness of the block item. |
Grid gap | Determine the gap between items. |
Content alignment | Select the horizontal alignment of the text content to be either to the Left, Right or Center. |
| Settings | Meaning |
|---|---|
Show bottom block | Toggle the bottom block. |
Background color | Set color for the the bottom block background. |
Image | Upload/Select an image. |
| Settings | Meaning |
|---|---|
Button label | Enter the text for the button. |
Button link | Enter URL for the button to redirect to. |
Button width | Determine the width of the button. |
Text color | The text color of the button. |
Border color | The border color of the button. |
Background color | The background color of the button. |
Background gradient | The background gradient of the button. |
Text hover color | The text color of the button for hover state. |
Border hover color | The border color of the button for hover state. |
Background hover color | The background color of the button for hover state. |
Background hover gradient | The background gradient of the button for hover state. |
| Settings | Meaning |
|---|---|
Background | Set color for the block background. |
Border color | Set color for the block border. |
Use image or text/SVG icon | Select to use the image or text for Icon. |
Image | Select/Upload image for the icon. |
Icon | Enter the SVG icon for the block. Note: Go to this link find your icon. Find the icon you want, then copy the SVG code and paste it here. |
Icons width | Enter the desired width of the icon. |
Icon height | Enter the desired height of the icon. |
Icon spacing bottom | Determine the spacing of the icon from bottom. |
Icon color | Set the color for the icon. |
Title | Enter in the title for the block. |
Title font family | Select font type for the title: Font family #1 or #2 |
Title font size | Specify the font size of the title. |
Title font size on mobile | Specify the font size of the title on mobile. |
Font weight | Select the font weight of the title. |
Title bottom margin | Determine the spacing of the title from bottom on Desktop. |
Title bottom margin on mobile | Determine the spacing of the title from bottom on Mobile. |
Text color | Apply a color to the title. |
Description | Enter the text for the description. |
Description font size | Specify the font size of the description on desktop. |
Description font size on mobile | Specify the font size of the description on mobile. |
Description line height | Determine the line height of the description text. |
Description bottom margin | Determine the spacing of the description from bottom. |
Description color | Apply a color to the description for the block. |
Button | Enter the text for the button. |
Link | Enter URL for the button to redirect to. |
Button style | Select the style of the button: Style 1: as a Link. Style 2: normal button. |
Button font size | Determine the font size of the button. |
Button width | Determine the width of the button. |
Button font weight | Select the font weight of the button. |
Show button underline | Toggle the underline for the button. |
Color | The text color of the button. |
Border color | The border color of the button. |
Background color | The background color of the button. |
Background gradient | The background gradient of the button. |
Hover color | The text color of the button for hover state. |
Border hover color | The border color of the button for hover state. |
Background hover color | The background color of the button for hover state. |
Background hover gradient | The background gradient of the button for hover state. |
