How to Add Service Blocks to Your PhotoBiz Website

Use the Service Block to show your Ecommerce services directly on your website—so visitors can easily browse and purchase them.

STEP ONE

Log into your PhotoBiz account and click WEBSITE in the left-hand menu.

STEP TWO

Add a Service Block to a Page

1. Click the name of the page where you want to add your services.

2. On the right-hand side, find and click the Services Block icon.

You can either:

• Click the icon to add it to the bottom of your page, or
  
  
• Click and drag it to the exact spot you want.
  (A teal bar will show where it will be placed.)

STEP THREE

Pick a Layout

Browse the layout options and click SELECT on the one you like best.

• Blank layouts follow your site’s global style settings.
  
  
• Predesigned layouts have their own custom styles that match the preview you see.

STEP FOUR

Choose Which Services to Display

You’ll now decide what services to show in your block. Choose from:

• All Services – Show everything you’ve created in Ecommerce.
  
  
• Single Category – Show only services from one category.
  
  
• Services by Tag – Show services with one or more specific tags.
  
  
• Custom Services – Pick individual services to feature.
  
  Need to make changes to your services? Click MANAGE SERVICES at the bottom.

When you're done, click SAVE CHANGES.

STEP FIVE

Customize the Last Item Link to guide users to more services or another location.

This feature works if your layout doesn’t show all your services at once (e.g., only 6 of 30 are shown due to rows/columns settings).

Options for the Last Item:

• None – Just display the visible services.
  
  
• Load More Link – A link that loads additional services. Customize the link text.
  
  
• Standard Link – A custom link to a different page, form, file, etc.

Link destinations include:

• None
• External Link
• Page on your site
• Form
• Email Marketing Campaign
• File (PDF, JPG, PNG, GIF)
• Phone Number
• Email Address
• Address (Google Maps)
• Video (YouTube/Vimeo)
• Pop-up

STEP SIX

Adjust Your Block Layout

Click LAYOUT on the left-hand menu to preview display options and choose your favorite.

💡 Layout Types:

• Rows & Columns – Control how many services show (e.g., 2 rows × 3 columns = 6 services shown).
  
  
• Modern – Title & price show on top of the image.
  
  
• Editorial – Title & price show below the image.
  
  
• Designer – Price is on the image; title is below.
  
  
• Single Item Layouts – Display one service in detail (title, description, price).

🔲 Layout Styles:

Click SAVE after choosing your layout.

⚠️ If you pick a single item layout, don’t forget to select the specific service you want to feature.

STEP SEVEN

Style Your Service Block

Make your Service Block match your brand!

✏️ Styling Options (May vary by layout):

• Overlay Opacity – Control the hover effect transparency.

• Text Alignment – Align titles and descriptions (left, center, right).

• Image Borders – Add a border (none to thick).

• Spacing – Adjust:

  • Space between items

  • Space above/below the block

  • Padding inside the block

• Flushing – Choose full-width or centered content.

• Mobile Layout – Show 1 or 2 columns on phones.

Click SAVE CHANGES to apply your styling.

COLORS

You can change your Service Block’s colors without affecting your entire website.

Available color options may include:

• Title
• Text
• Background
• Overlay
• Last Item (text & background)
• Shape (background & text)
• Borders
• Captions

Click any color square to choose a shade or enter a HEX code.
A small flag will appear beside any custom setting.

Click SAVE CHANGES when you're done.

FONTS

Customize fonts for individual service blocks without changing your site’s global fonts.

You can adjust:

• Title
• Price
• Last Item Text

Change the font style, size, letter spacing (kerning), and line height.

Click SAVE CHANGES to lock in your choices.

FONTS

Personalize the fonts used in your Service Block.

Font options vary by layout.

Common font settings include:

• Title
• Price
• Last Item Text
• Button Text

You can adjust font style, size, spacing, and line height.

Click Save Changes when you’re done.

IMAGE ANIMATIONS

Add motion effects to grab attention and create a better shopping experience.

Image Hover Animations:

• None
• Scale – Zoom in
• Blur – Soft focus effect
• Scale + Blur
• Bounce

Button Hover Animations:

• Fill – Bolder button on hover
• Overlay – Highlights with contrast
• Scale – Button grows slightly
• Arrows – Adds sleek arrow icons

These small touches can help increase clicks and engagement!