Use the Services block to load your desired Ecommerce services for visitors to purchase.
IMPORTANT: This guide applies to ECommerce Services. If you're looking to add Scheduler Services, please check out our guide on using the Scheduler Service Block.
STEP ONE
Log into your Zibster account and click on the WEBSITE option from the left-side menu.
STEP TWO
Choose or Create a Page
Click on the page where you want to add a Service Block, or click NEW PAGE to create a new services page.
PRO TIP!
If creating a new page, check out the Pre-designed ECommerce Page Layouts for faster setup.
Learn More: How To Use Pre-Designed Page Layouts
STEP THREE
Add a Service Block
Once you're on your page, add a Service Block and any other blocks you want on your services page.
STEP FOUR
Customize Your Service Block
Click inside the Service Block or on the pencil icon in the upper-right corner of the block, then select Advanced. A menu will open on the right, allowing you to choose which service categories or services to display and customize the look of the block.
STEP FIVE
Choose Which Services to Display
From the settings menu on the right, select the services you wish to display in the block. You can choose from the following options:
- Display All Services: Shows every service you offer.
- Display a Single Category: Shows all services in a specific category.
- Display Services Tagged With: Displays services with specific tags. Add one or multiple tags to filter your services.
- Custom Services: Manually select specific services to display in the block.
If you need to edit your services, click the Manage Services button. Once you're done, click SAVE CHANGES.
STEP SIX
Last Item Link
If your services exceed the number of rows and columns you’ve set in the layout, you can customize the last item in the sequence using the Last Item Link feature. This feature does not apply if you're using a Single Item Layout.
Options for the last item:
- NONE: Displays only the number of services allowed by the rows and columns you set.
- LOAD MORE LINK: Adds a link as the last item to load more services. You can customize the link text.
- STANDARD LINK: Displays a link as the last item that can direct users to a different location (e.g., an external site, another page on your website, or an email).
Link options include:
- None: No link added.
- External Link: Link to another website.
- Page: Link to a specific page in your website.
- Form: Link to a Form in your account.
- Marketing: Link to a Marketing Campaign in your account.
- File: Link to a file uploaded to your account.
- Phone: Link to a phone number.
- Email: Link to an email address.
- Address: Link to a street address.
- Video: Link to an embedded video.
- Pop Up: Link to a pop up created in your account.
STEP SEVEN
Choose a Layout for Your Service Block
The layout determines how your services’ images, titles, and prices will appear.
Click Layout on the left side of the menu to preview or change the layout. The Rows and Columns will determine how many services display (e.g., 2 rows and 3 columns show 6 services).
You can choose from the following 29 different layouts:
Modern Layouts:
- Modern Square
- Modern Portrait
- Modern Landscape
Editorial Layouts:
- Editorial Circle
- Editorial Square
- Editorial Landscape
- Editorial Portrait
Designer Layouts:
- Designer Pinboard
- Designer Portrait
- Designer Landscape
- Designer Large Portrait
Image Layouts:
- Image Small Left
- Image Large Left
- Image Thin Left
- Image Bottom
Classic Layouts:
- Classic Landscape
- Classic Layers
- Classic Menu
Contemporary Layouts:
- Contemporary Square
- Contemporary Landscape
- Contemporary Menu
Other Menu Layouts:
- Designer Menu
- Center Menu
- Stack Menu
Single Item Layouts:
- Single Item Square Top
- Single Item Square Left
- Single Item Portrait
- Single Item Gallery
- Single Item Slideshow
Choose your preferred layout from options like and click SAVE CHANGES to apply.
STEP EIGHT
Styling Options
The styling options in this section will vary depending on the layout that you've selected. Customize the appearance of your Service Block using the following options:
- Overlay Opacity: Adjust the transparency when hovering over an image.
- Space Between Items: Control spacing between items.
- Space Below Blocks: Adjust the gap between this block and the next.
- Space Inside Blocks: Control padding within the block.
- Flushing: Decide if content fills the screen width or stays centered.
- Mobile View: Choose whether items display in one or two columns on mobile devices.
STEP NINE
Colors
Override the global button and background colors for this block.
STEP TEN
Background: Add a custom background image for the Service Block, different from the overall website background.
STEP ELEVEN
Fonts all you to customize the fonts for the following elements in your Service Block. You can also customize font type, size, spacing (kerning), and line height. You can choose from the following options:
- Title
- Price
- Last Item Link
STEP TWELVE
Enhance your website’s call-to-action with our new button hover animations. These subtle yet impactful effects highlight key links, making them more engaging and interactive for your visitors.
- Fill: Change the style of your button on hover to create a bold call to action.
- Overlay: Adjust both the button and text color to add contrast and highlight important links.
- Scale: Increase the size of your buttons by 10%, giving them extra emphasis when visitors hover.
- Arrows: Add an elegant arrow graphic to your buttons, signaling movement and encouraging clicks.
