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".
Last updated
| Settings | Meaning |
|---|---|
| Settings | Meaning |
|---|---|
| Settings | Meaning |
|---|---|
| Settings | Meaning |
|---|---|
| Settings | Meaning |
|---|---|
| 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.
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.
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 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 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.
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.
