How To Add Service Blocks To Your PhotoBiz Website
Use the Services block to load your desired Ecommerce services for visitors to purchase.
Please Note: This applies to ECommerce Services, if you're looking to add SCHEDULER SERVICES to your website, check out our guide on using the SCHEDULER SERVICE BLOCK.
STEP ONE
Log into your PhotoBiz account and click on the WEBSITE option in the left side menu.
STEP TWO
Click on the page you wish to add a SERVICE BLOCK to or click on NEW PAGE to create a new services page.
Pro Tip: If you choose NEW PAGE, check out the pre-designed page layouts section for ECommerce.
STEP THREE
Add Your SERVICE BLOCK and any other blocks you wish to have on the page you're using for your service.
STEP FOUR
Click inside your services block or on the pencil icon on the top right corner of the block and choose advanced. The menu will open to the right side of your screen and you'll be able to choose what service categories or services you wish to display and customize the look of the block.
STEP FIVE
Choose which services you want to display in this block.
The settings menu will pop up on the right. From here you can choose which services you want to display. Choose to display all of your services, a single services category, services with specific tags, or custom services. If you need to make edits to any of your services, click the manage services button.
- Display ALL of your service categories: Choose this option to display every service you have for sale.
- Display a single service category: Choose this option to display all created services within one service category.
- Display all services tagged with: Choose this option to display services with specific tags. You can choose to display one or multiple tags in this section. After typing your desired tag, click add tag to apply your selections.
- Custom services: Choose this option to select specific services to display in your current block. Click add service to add more services.
Click on the SAVE CHANGES button once you've made your selection.
STEP SIX
Last Item Link
Using the Last Item customization feature allows quick loading of your content, and for your users to choose to view more of your services. The Last Item feature does not apply if you are using a Single Item layout.
If you have more services than your selection of rows and columns in the Layout area allow, you have the following options for the last item in your sequence:
None: The exact number of services according to your selection of rows and columns will display.
Yes, as a "load more link": A link will display as the last item in your sequence of services, which will load more of your services once clicked. You can customize the text that shows in this box in the LINK TEXT box provided.
For example, if you choose to display two rows and three columns of services, the last service on the second row will be replaced with your custom link text prompting users to click to load more services.
Yes, as a Standard Link: Similar to the previous load more option, this choice displays a box with custom link text as the last item in your sequence of services that connects to another area.
Link options include:
- NONE: Your item would not link anywhere.
- EXTERNAL LINK: Direct your clients to helpful resources that exist in a place other than your website.
- PAGE: Direct your visitors to an existing web page on your website.
- FORM: Connect to a Custom Form you have created in your FORM BUILDER.
- EMAIL MARKETING: Direct users to a Campaign or Landing Page you have created in the MARKETING tool.
- FILE: Allow users to open a PDF, JPG, PNG, or GIF file that has been uploaded to the DOCUMENTS area of your account's FILES section.
- PHONE: Connecting your item to a phone number allows users to quickly click to call you.
- EMAIL: Connecting your item to an email address opens a user's default mail client to easily send you an email.
- ADDRESS: Allow users to find where you are by opening an address in Google Maps.
- VIDEO: Add a video embed code obtained from YouTube or Vimeo to play in a light-box.
- POP UPS: Connect to a pop-up to notify users of a promotion or discount.
STEP SEVEN
Choose a layout for your SERVICE BLOCK.
The Layouts determine the display of your services' image, title, and price in addition to the number of services that show within the block.
Click layout on the left-side of the menu to preview and/or change the layout.
- Rows and Columns: The number of rows and columns you choose to display within the Services block determines how many of your services show. For example, if you have 30 services created in Ecommerce and choose to show two rows and three columns in your Services block, only six of your 30 services will show. The rows are horizontal and the columns are vertical.
- Modern Layouts: Display the service title and price on top of the services' image.
- Editorial Layouts: Your services' title and price display below the services' image.
- Designer Layouts: The service price shows on top of the services' image; the services' title shows below the image.
- Single Item Layouts: Display a single service with all of its corresponding information (title, description, and price).
You can choose from any of the following service block layouts:
Modern Square, Modern Portrait, Modern Landscape, Editorial Circle, Editorial Square, Editorial Landscape, Editorial Portrait, Designer Pinboard, Designer Portrait, Designer Landscape, Image Small Left, Image Large Left, Image Thin Left, Image Bottom, Classic Landscape, Classic Layers, Contemporary Square, Contemporary Landscape, Designer Large Portrait, Classic Menu, Contemporary Menu, Designer Menu, Center Menu, Stack Menu, Single Item Square Top, Single Item Square Left
Mouse over the layout you prefer to use and it will be outlined, click on the SAVE button to apply the layout to your service block.
STEP EIGHT
STYLING, COLOR, & BACKGROUND OPTIONS
The styling section includes six styling options: Overlay Opacity, Space Between Items, Space Below Blocks, Space Inside Blocks, Flushing, and Mobile View. These styling sections will override the settings that have been picked in the global styling section under DESIGN tab.
OVERLAY OPACITY: Adjusts the opacity upon hovering over an image. This setting only applies to layouts where titles and prices are seen by hovering over an image. Increase or decrease the opacity of your overlay by adjusting the percentage in the drop down menu.
Click on SAVE CHANGES at the bottom of the styling settings to apply the overlay opacity percentage you've selected.
Space Between Items: Controls the spacing between images using grid layouts.
Space Below Blocks: Controls the amount of space before the next block begins.
Space Inside Blocks: Controls the amount of space at the top and bottom of a block.
Flushing: Controls whether the content of this block flushes to fill the screen width or remains contained in the center of the screen.
Mobile View: Controls if images on mobile and smaller devices display in one column or two.
COLORS
The color section includes six color options. These colors will override the colors for the buttons and background that have been picked in the global color section under the design tab.
BACKGROUND
You can customize a background image behind your block to be different from your website background.
FONTS
You can easily customize the fonts you're using on your service blocks to override your global font settings. You can change the font, font size, letter spacing (kerning), and line height for any of the following items in your service block:
- TITLE
- PRICE
- LAST ITEM TEXT
Click on Save Changes at the bottom of the control panel menu to apply your changes.