How to Use the Product Block to Sell Items on Your PhotoBiz Website
The Product Block makes it easy to showcase and sell your e-commerce products right on your website. You can add it to any page—or create a dedicated store page to display your full collection.
This guide will walk you through how to add a Product Block to your page, choose which items to display, and customize the layout and styling to match your brand.
STEP ONE
Log-in to your PhotoBiz account
From the left-hand menu, click on WEBSITE to open the Website Builder.
STEP TWO
Add a product block to a page
-
Click on the name of the page where you'd like to showcase products.
-
From the right-hand toolbar, click the Product Block icon.
- Click once to add it to the bottom of the page.
- Or, click and drag to place it wherever you'd like on the page.
A teal line will appear to show where the block will be inserted.
STEP THREE
Chooser a layout
Browse through the layout options and click SELECT on the one you’d like to use.
- Predesigned Layouts include built-in design styles that match the layout you chose.
- Blank Layouts use your website’s global style settings and let you build the block from scratch.
Next:
- The side panel menu will remain open, and you can jump right in to the next step.
STEP FOUR
Choose What Products To Display
Click directly on the Product Block (or the pencil icon) to open the editing panel.
Under the Advanced tab, choose what type of product selection you want to show. Depending on the layout you've selected, this options can vary:
- All Product Categories
- Single Product Category
- Products with a Specific Tag
- Custom Products (select specific items one by one)
Click SAVE CHANGES when you’re finished. Your products will now appear on the page.
LAST ITEM LINK (Optional)
At the bottom of your product grid, you can choose to add a Last Item Link, which appears as a button below your products. This can be used to load more items or direct visitors somewhere else.
Available options:
-
None – No link displayed
-
Load More Link – Loads additional products when clicked
-
Standard Link – Directs users to:
-
Another page on your website
-
A form
-
An external link
-
A PDF or downloadable file
-
A video
-
A pop-up
-
A map, email, or phone number
-
You can also customize the link text and destination.
PRODUCT BLOCK LAYOUT OPTIONS
Choose from 31 unique layouts to best display your products:
Grid Layouts
Display your products in a uniform, image-forward layout.
- 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.
- Gallery – Large featured image with thumbnails below; ideal for fine art and prints.
- Contemporary Square – Clean, modern square grid.
- Contemporary Landscape – Clean, modern horizontal grid.
Image + Text Layouts
Combine product images with product description text in a side-by-side or stacked arrangement.
- 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 & Contemporary Menu Layouts
Ideal for organizing product collections or creating stylized menus.
- Classic Landscape – Traditional image and text layout.
- Classic Layers – Overlapping layered layout with text and images.
- 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
Highlight a single product with multiple image and display options.
- 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.
💡 Pro Tip
Selling artwork or prints?Use the Gallery Layout to beautifully feature your work and sell it directly from the page!
STYLING YOUR PRODUCT BLOCK
You can customize the look and feel of your Product Block to match your brand. Styling options depend on the layout you’ve selected.
AVAILABLE STYLE OPTIONS
-
Overlay Opacity – Control transparency of hover overlays
-
Text Alignment – Left, center, or right
-
Image Borders – None to thick
-
Spacing – Adjust:
-
Space between product items
-
Space above/below the block
-
Padding inside the block
-
-
Flushing – Choose full-width or centered layout
-
Mobile Columns – Show one or two product columns on phones
Click SAVE CHANGES to apply your updates.
COLORS
Each Product Block can have its own colors without affecting your global site settings. The color options can vary depending on the layout you've selected. You can adjust:
- Title Color
- Text Color
- Background Color
- Overlay Color
- Button Text & Background
- Border Color
- Shape Color
- Caption Title & Text
Use the color picker or enter a HEX code. A flag icon will appear next to any setting that differs from your global theme.
BACKGROUND OPTIONS
Customize the block background with an image or color:
-
Upload your own background image, or select one from the Background Library.
-
Choose how the image displays:
Tile, Top Left, Center, or Cover
Click SAVE CHANGES to update.
FONTS
Each layout offers font settings you can customize, the options vary from layout to layout:
- Product Title
- Price
- Last Item Text
- Button Text
Adjust the font style, size, letter spacing, and line height.
Click SAVE CHANGES when finished.
ANIMATIONS
