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".
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.
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.
Show bottom block
Toggle the bottom block.
Background color
Set color for the the bottom block background.
Image
Upload/Select an image.
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.
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.
