PhotoBiz ECommerce gives you the flexibility to allow your clients to pay for your services online through your website. Once you have created your services in the Ecommerce section of your account, this guide will walk you through the steps of adding your services to a new page in your website builder.

Think of Ecommerce as your back-end warehouse, and the website builder as the front end that controls what everything looks like to your customers.

For instructions on how to create a new service within the Ecommerce section of your account, check out our how-to guide on creating new services.

STEP ONE

Log into your PhotoBiz account and click on WEBSITE in the left side menu.

STEP TWO

In your website builder, click on the new page button in he upper left corner, and select page from the drop-down menu.

From here, you can choose from our selection of pre-made page templates, or start with a new, blank page. Click the green select button on your page of choice, give the page a name, and click the green create page button to continue.

STEP THREE

To the right of your website builder, you will see a list of blocks. Click the services block to add it to your new page.

STEP FOUR

Choose which services you would like to display in this block.

Click on the services block you just added, where it says Click To Add Services. The Edit Services menu will appear from the right side.

You will first be prompted to choose which services you would like to display in this block. You can...

• 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 FIVE

Last Item Link

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. 

In the Edit Services menu, you can click on the last item tab towards the left.

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.

• 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.

STEP SIX

Choose a layout for your services block.

In the Edit Services menu, click on the layout tab towards the left.

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).

Mouse over the layout you prefer to use and it will be outlined. Adjust the number of rows and columns within the layout if needed, and click on the SAVE button to apply the layout to your service block.

STEP SEVEN

Styling

In the Edit Services menu, click on the styling tab towards the left.

The styling section includes six styling options:

• 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.
• 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.

Click the green save changes button at the bottom of the styling menu to apply your styling selections.

STEP EIGHT

Colors

In the Edit Services menu, click on the colors tab towards the left.

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.

Click the green save changes button at the bottom of the colors menu to apply your current color settings.

STEP NINE

Background

In the Edit Services menu, click on the background tab towards the left.

You can customize a background image behind your block to be different from your website background

• No Background: the background of your services block will be the same as your website background
• Custom Background: upload your own image to use as the background for this services block
• Background Library: choose from our library of images to use for the background of this services block.