Your Services section is where customers discover what you offer. Keeping it up to date with great images and exact pricing helps turn visitors into bookings. Watch the video, or follow the steps below.
Step 1: Open the UENI Editor
Log in to your UENI Hub and click Edit Website.
Step 2: Go to Services
Click Pages, open the page with your services, then click Services.
Step 3: Edit the section title
Enter a new name in the Title field and click Save.
Step 4: Create a service group
Click Add new group to create a category, such as "At home services". You can rename it at any time.
Step 5: Add a service
Click Add new service in your group.
Fill in the Service Name, Price and Pricing Unit (for example, Suit Consulting, £60, per hour).
Add an image in the Image box.
Write a Description. Customers see this when they click the service.
Click Save.
Step 6: Make a service bookable
To add a Book button, select Bookable and choose Bookable on UENI page. Customers can then pick a date and time within your bookable hours.
Auto Confirmation Settings
Default: follows your Settings > Booking Settings.
Enabled: bookings are confirmed automatically and show as confirmed in My Customers > Bookings.
Disabled: you confirm each booking manually.
Note: Booking Settings also let you allow the last appointment of the day even if its buffer runs past closing time. Here's how to configure your booking settings.
Already use another booking platform? You can make your services bookable on a third-party platform instead.
Pro tip: Set a service duration and buffer time to avoid overlaps, especially if you sync your Google, Outlook or Calendly calendar.
Step 7: Move, rearrange or remove services
Move to another group: open the service, choose a new group from the Group dropdown and click Save.
Rearrange: in your services list, click Edit and drag services into order.
Remove: in Edit mode, click the delete option next to a service.
Step 8 (Optional): Filter your Services
Warning: You can only filter your services on the page where they are displayed. If you are using the Catalog, the Filter option will not be available.
Do you want to showcase a specific service/serviceson one page? Now you can!
The Product Filter allows you to select the Products and Categories that will be displayed on that specific Product Widget:
After you click on the Services Filter option, all of your Services and Categories will be shown to you. Tick the services and categories that you want to display on the page to show or hide them:
Once you have decided which services you want to showcase, save your work. Only the selected services will be displayed; the rest will be hidden until you enable them again.
Note: This doesn't delete any services only hides them. The products are still viewable if they exist in another section.
Step 9 (Optional): Advanced Service Design
The Advanced Layout lets you design your Services section the way you picture your business. You control columns, spacing, colors, images and text with simple sliders and menus. No code needed.
Turn on the Advanced Layout
In the UENI Editor, open your Services section.
Change Type of Layout from Basic to Advanced.
Click Save.
Click Design Services to get started.
Pro tip: Click the down arrow next to an option to change its setting for Phone, Tablet, Laptop or Desktop. You can also double-click the number on the right side of a slider to type a value instead of sliding.
Section settings
Gap Below Title (0 to 100px): space between the section title and your services.
Widget Padding Top, Bottom, Left and Right (0 to 200px each): space between the Services widget and the navigation menu, the footer, and the left and right sides of the screen.
Section title padding top, bottom, left and right (0 to 200px each): space around the section title.
Background Color: the background color of the section.
Content settings
Columns (1 to 12): how many services show side by side. You can set a different number per device.
Container Size: the size of the Services widget, which also sizes your services. Choose Default Value, Full Width, Small, Medium or Large.
Container Alignment: where your services align in the widget. Choose Default (Center), Left, Right, Space Evenly or Space Between.
Gap Between Items (0 to 100px): space between each service.
Container Padding Top, Bottom, Left and Right (0 to 200px each): space between the edges of the Services widget and your services.
Background Color: the background color of the Services widget.
Font Color: the color of your Service Category titles.
Desktop Categories Layout: show your categories as Headers, Tabs, Accordion or Hidden.
Card settings
Layout
Gap inside item (0 to 100px): space between the service image and its title and text.
Item padding top, bottom, left and right (0 to 200px each): space between the edges of the Service Card and its content.
Min Height: the minimum height of the Service Card on any screen size.
Content Layout: how the title, description and button are arranged.
Stacked (default): title, description and button one below the other.
Split: title on the left, description and button on the right.
Inline action: title and description on the left, button on the right, vertically centered.
Heading row: title and button on one row, description below at full width.
Content Alignment: align the text inside the card left, center or right.
Content Vertical Alignment: align the title, text and button to the top, center or bottom of the card.
Style
Elevation (1 to 24): the shadow under the card. The higher the number, the bigger the shadow.
Hover Effect: what happens when a visitor hovers over the card. Choose None, Elevate, Lift, Grow or Image Zoom.
Border corner radius (0 to 100px), Border Width (0 to 20px) and Border Color: round, thicken and color the card border.
Background Color: choose a Solid color or a Gradient (Linear, Radial or Angular). Use the + and - buttons to add or remove gradient colors, and the invert and rotate gradient buttons to adjust it.
Title, description and price
Font Color and Title Color: the color of the Service Card title.
Title Font Size (0 to 200px) and Title font weight: the size and thickness of the title.
Title margin top, bottom, left and right (0 to 200px each): space around the title.
Text Font Size (0 to 200px), Text font weight and Text Color: the size, thickness and color of your service description.
Text margin top, bottom, left and right (0 to 200px each): space around the description.
Price Font Size (0 to 200px), Price Color and Promotional Price Color: how your regular and promotional prices look.
Price margin top, bottom, left and right (0 to 200px each): space around the price.
Duration Position (Hidden, Next to price or Under title), Duration Line Height and Duration Color: where and how the service duration appears.
Action button
Action Button Width: the width of the button.
Action Button Margin Top, Right, Bottom and Left (0 to 200px each): space around the button.
Action button Customization: further options such as shape, color and border.
Button font size: the text size inside the button. This also changes the button size.
Button horizontal padding and Button vertical padding (0 to 100px each): the width and height of the button.
Button Background Color, Button Text Color and Button Border Color: the button colors.
Warning: Action Button Width only works with the Stacked and Split content layouts.
Image
Image Container Position: Left of Card, Right of Card, Top of Card, Bottom of Card or Fit Card.
Image Container Aspect Ratio: 1:1, 4:3, 3:4, 16:9 or 9:16.
Image Container Width (10% to 100%): how wide the image area is.
Image Container Corner Radius (0 to 200px): rounds the corners of the image area.
Image Fit: how the image fills its area. Choose Cover, Contain, Fill or None.
Image Position: where the image sits in its area. Choose Top Left, Top Center, Top Right, Center Left, Center Center, Center Right, Bottom Left, Bottom Center or Bottom Right.
Disable Gutters: adds or removes space around the image area.
Final thoughts
You're all set to showcase your services! For more ideas, read getting the most out of your services on the UENI Blog.