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
ID Section	Enter the Section ID to match the Menu link to 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), 1170px, 1770px, Full Width (the 100% of the viewport width).
Padding Container Full Width	Determine the left and right spacing of the Full Width layout.
Enable Border Top?	Toggle Border Top
Enable Border Bottom?	Toggle Border Bottom
Border Color	Apply a color to the top and bottom borders.
Layout Mobile Responsive	Select the layout for the section render on mobile device. The options are: List, Scroll Snap and Slider.
Arrow Icon Color	Paint the color for the arrow icon of the slider layout.
Style Layout	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.
Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile	Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately.
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.
Enable Border Title	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 Mobile	Specify the font size of the title on mobile.
Title Margin Bottom	Determine the spacing of the title from bottom on Desktop.
Title Margin Bottom 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 Spacing Top	Determine the spacing of the description from top.
Description Spacing Bottom	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 Margin Top	Determine the top spacing of the "View all" from top.
View All Margin Bottom	Determine the top spacing of the "View all" from bottom.
Enable 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 Color	Apply a color to the "View all" text.
View All Icon	Enter the SVG icon for the "View all".
Icon View All 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 Block

Settings	Meaning
Item Width	Select width of the items : Auto (The width of the item matches its content.) Full width (The items have equal widths.)
Border Items	Select style of border items: None Style 1 : border between items Style 2 : border between items and shorter
Enable Item Distance	Toggle Item Distance
Enable Hover Box Shadow	Toggle Hover Box Shadow
Enable Hover Effects Top	Toggle Hover Effects Top
Item Spacing Top	Determine the spacing of the item from top.
Item Spacing Bottom	Determine the spacing of the item from bottom.
Item Spacing Left/Right	Determine the spacing of the item from left/right.
Border Radius	Determine the roundness of the block item.
Grid Gap	Determine the gap between items.

Customize the Settings Block

Settings	Meaning
Enable the Bottom Block	Toggle the bottom block
Background Color	Set color for the the bottom block background.
Select Image	Upload/Select an image.

Button 1

Settings	Meaning
Button Text	Enter the text for the button 1.
Button Link	Enter URL for the button 1 to redirect to.
Button Width	Determine the width of the button 1.
Color	The text color of the button 1.
Border Color	The border color of the button 1.
Background Color	The background color of the button 1.
Background Gradient	The background gradient of the button 1.
Hover / Active Color	The text color of the button 1 for hover state.
Hover / Active Border Color	The border color of the button 1 for hover state.
Hover / Active Background Color	The background color of the button 1 for hover state.
Hover / Active Background Gradient	The background gradient of the button 1 for hover state.

Button 2

Settings	Meaning
Button Text	Enter the text for the button 2.
Button Link	Enter URL for the button 2 to redirect to.
Button Width	Determine the width of the button 2.
Color	The text color of the button 2.
Border Color	The border color of the button 2.
Background Color	The background color of the button 2.
Background Gradient	The background gradient of the button 2.
Hover / Active Color	The text color of the button 2 for hover state.
Hover / Active Border Color	The border color of the button 2 for hover state.
Hover / Active Background Color	The background color of the button 2 for hover state.
Hover / Active Background Gradient	The background gradient of the button 2 for hover state.

[BLOCK] Settings block

Settings	Meaning
Background Color	Set color for the block background.
Border Color	Set color for the block border.
Use image or text for Icon?	Select image or text for Icon: Text/Image
Select Image	Select/Upload image for the icon.
Icon	Enter the SVG icon for the block.
Icon 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 Type	Select font type for the title: Font family #1 or #2
Title Font Size	Specify the font size of the title.
Title Font Size Mobile	Specify the font size of the title on mobile.
Font Weight	Select the font weight of the title
Title Spacing Bottom	Determine the spacing of the title from bottom on Desktop.
Title Spacing Bottom Mobile	Determine the spacing of the title from bottom on Mobile.
Color Text	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 Mobile	Specify the font size of the description on mobile.
Description Line Height	Determine the line height of the description text.
Description Spacing Bottom	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.
Enable 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 / Active Color	The text color of the button for hover state.
Hover / Active Border Color	The border color of the button for hover state.
Hover / Active Background Color	The background color of the button for hover state.
Hover / Active Background Gradient	The background gradient of the button for hover state.