How To Use Products Blocks

How to Add and Customize a Products Block on Your PhotoBiz Website

Overview

A Products Block allows you to display and sell items from your PhotoBiz ECommerce store directly on your website. You can add a Products Block to an existing page or create a new predesigned ECommerce page that includes one automatically.

This guide explains how to add a Products Block, choose which products appear, select a layout, and customize the block’s design. Visitors can click your products to view additional details, select available options, and complete their purchase through your ECommerce store.

Prerequisites

Before you begin, make sure you have:

Added products to your PhotoBiz ECommerce store
Made the products you want to display active

STEP ONE

This opens the Website Builder, where you can manage your website pages and content blocks.

STEP TWO

Choose whether you want to add a Products Block to an existing page or create a new predesigned ECommerce page.

To add the block to an existing page, click the name of the page where you want your products to appear. Locate the Products Block icon in the right-side menu. Click the icon to add the block to the bottom of the page, or drag it to the location where you want it to appear. A teal line shows where the block will be placed.

If you do not already have a store page, use the option to add a new page and select a predesigned ECommerce page. The new page includes a Products Block automatically, so you do not need to add the block separately.

STEP THREE

If you added a Products Block to an existing page, browse the available layouts and click SELECT on the layout you want to use.

Predesigned layouts include styling created for the selected layout. Blank layouts use your website’s global design settings and provide a simpler starting point for customization.

If you created a predesigned ECommerce page, a Products Block layout is already applied. You can keep the existing layout or change it from the Products Block settings.

After you select or confirm the layout, the right-side editing panel remains open so you can configure the block.

FINAL STEP

Open the Products Block editing panel by clicking directly on the block or clicking its pencil icon. Open the Advanced settings and choose which products you want to display.

For layouts that display multiple products, you can choose all product categories, one product category, products with a specific tag, or a custom selection of individual products.

For a Single Item layout, select the product category from the first drop-down menu. After you select the category, use the second drop-down menu to choose the specific product you want to feature.

Click SAVE CHANGES when you are finished. Your selected products will appear in the Products Block, and the update will be applied to your website automatically.

Product Display Options

The product selection settings available in the right-side menu depend on the Products Block layout you choose.

For layouts that display multiple products, available options may include:

All Product Categories: Displays products from all active categories in your ECommerce store.
Single Product Category: Displays products from one selected category.
Products With a Specific Tag: Displays active products that use the selected product tag.
Custom Products: Allows you to select specific products individually.

Only active products can appear in a Products Block.

Selecting a Product for a Single Item Layout

Single Item layouts use two drop-down menus to select the featured product.

First, select the product category that contains the item you want to feature. After you select the category, choose the specific product from the second drop-down menu.

The product’s title, price, images, description, and available options are pulled from your ECommerce store.

Products Block Layout Options

PhotoBiz includes 30 Products Block layouts for displaying product grids, menus, image and text combinations, galleries, and individual products. The available rows, columns, styling, and product selection settings vary depending on the layout you choose.

Grid Layouts

Grid layouts display multiple products in an image-focused arrangement.

Modern Square – Title & price appear on the image.
Modern Portrait – Title & price appear on the image.
Modern Landscape – Title & price appear on the image.
Editorial Circle – Subtle styling with circular images.
Editorial Square – Subtle styling with squared images.
Editorial Portrait – Subtle styling, vertical images.
Editorial Landscape – Subtle styling, horizontal layout.
Designer Pinboard – Title below image, price on image.
Designer Portrait – Title below image, price on image.
Designer Landscape – Title below image, price on image.
Contemporary Square – Clean, modern square grid.
Contemporary Landscape – Clean, modern horizontal grid.

Gallery Layout

The Gallery layout provides an image-focused display for products that include multiple images.

Gallery – Large featured image with thumbnails below; ideal for fine art and prints.

Image and Text Layouts

These layouts combine product images with product details in side-by-side or stacked arrangements.

Image Small Left – Small image on the left, text on the right.
Image Large Left – Large image on the left, text on the right.
Image Thin Left – Thin image on the left, text on the right.
Image Bottom – Text on top, image below.
Designer Large Portrait – Prominent portrait-style image with styled text.
Classic Landscape – Traditional image and text layout.
Classic Layers – Overlapping layered layout with text and images.

Menu Layouts

Menu layouts provide a simplified way to organize and display products.

Classic Menu – Simple menu-style display.
Contemporary Menu – Modern menu with clean lines.
Designer Menu – Polished, high-end styled menu layout.
Center Menu – Centered text-only menu without images.
Stack Menu – Vertical menu with or without images.

Single Item Layouts

Single Item layouts allow you to feature one specific product.

Single Item Square – Square layout for featured product.
Single Item Landscape – Horizontal layout for featured product.
Single Item Portrait – Vertical layout for featured product.
Single Item Gallery – Show multiple images in a gallery format.
Single Item Slideshow – Showcase product images in a slideshow.

When you select a Single Item layout, choose the product category from the first drop-down menu. Then select the specific product from the second drop-down menu.

See How To Change Product Block Layout for full instructions.

Last Item Options

The Last Item settings control what visitors see after the products initially displayed in the block.

Available options may include:

None: Does not display an additional link.
Load More: Loads additional products within the same Products Block.
Standard Link: Directs the visitor to another destination.

A Standard Link can direct visitors to another website page, a form, an external website, a downloadable file, a video, a pop-up, a map, an email address, or a phone number.

You can also customize the text displayed for the Load More or Standard Link option.

The available Last Item settings depend on the Products Block layout you select.

Styling Options

Open the Styling settings to adjust the appearance and spacing of the Products Block.

Available options vary by layout and may include:

Overlay Opacity: Controls the transparency of an image overlay.
Text Alignment: Aligns supported text to the left, center, or right.
Image Borders: Adjusts the border displayed around product images.
Spacing: Controls the space between products and around the block.
Padding: Adjusts the space inside the Products Block.
Flushing: Controls whether the block uses a centered or wider page display.
Mobile Columns: Displays supported product layouts in one or two columns on phones.

Click SAVE CHANGES after adjusting the Styling settings.

Colors

The Colors settings allow you to customize the Products Block without changing the global colors used throughout your website.

Available color settings vary by layout and may include:

Product title color
Price and text colors
Block background color
Overlay color
Button text and background colors
Border color
Shape color
Caption title and text colors
Last Item text and background colors

Use the color picker or enter a HEX color code. A flag icon appears next to a setting that differs from your website’s global design settings.

Click SAVE CHANGES to apply your selections.

Backgrounds

Open the Background settings to add a background image or color to the Products Block.

You can upload your own background image or select one from the Background Library. Available image display options may include Tile, Top Left, Center, or Cover.

Choose a background that keeps product images, titles, prices, and buttons easy to see. Click SAVE CHANGES when you are finished.

Fonts

The Fonts settings allow you to override your website’s global font settings for the Products Block.

Depending on the selected layout, you may be able to customize:

Product titles
Prices
Product descriptions
Last Item text
Button text

Available font controls may include the font family, size, letter spacing, and line height.

Click SAVE CHANGES after customizing the fonts.

See How To Change Fonts on Product Blocks for full instructions.

Animations

The Animation settings allow you to add movement when visitors interact with product images or buttons.

Available image hover animations may include:

None
Scale
Blur
Scale Blur
Bounce

Available button hover animations may include:

Fill
Overlay
Scale
Arrows

Animation options vary by layout. Use animations selectively so they support the shopping experience without distracting visitors from your products.

Helpful Notes

Products are created and managed from the ECommerce Dashboard.
Only active products can appear in a Products Block.
Product names, prices, descriptions, options, and images are pulled from your ECommerce store.
Available product selection and design settings vary by layout.
Changing the layout may change which Styling, Last Item, Colors, Fonts, and Animation settings are available.
The Save button automatically applies updates to your website. There is no separate publish button.
Preview the page on desktop and mobile after making changes.
Use clear product images and concise titles to make your products easier to browse.

Previous Post Next Post

How should I get started with my Photography Online Store?

October 22, 2025

How should I get started with my Retail Online Store?

April 9, 2025

How To Make Products Searchable On Your Website