Custom Service Block

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

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.

Block items

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.

Bottom block

Settings	Meaning
Show bottom block	Toggle the bottom block.
Background color	Set color for the the bottom block background.
Image	Upload/Select an image.

Button 1 / Button 2

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.

Block settings

[BLOCK] Settings block

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.