Use the Products block to load your desired Ecommerce products for visitors to purchase.
ADD PRODUCTS
STEP ONE
Log into your PhotoBiz account and click on the WEBSITE option in the left side menu.
STEP TWO
Click on the page name or add a new page you want to use an product block on.
There are two ways to have an active product block on your page:
- On the right hand side of your screen, you can click the product icon and the product block will appear at the very bottom of your page.
- The second option is to hover your mouse over the product icon, left click and hold, then drag the block to your preferred location. When a teal colored line appears where you want the block, let go of the mouse button and the block will drop in that location. To move it, simply drag it up or down.
STEP THREE
To add products to your product block, simply click inside the block or on the pencil icon at the top right and choose Advanced. The menu will open on the right side of your control panel and give you the following options:
- Display ALL of your product categories
- Display s signle product category
- Display all products tagged with:
- Custom products
Once one is selected, click save changes and the product block will populate with the products selected.
STYLING OPTIONS FOR YOUR PRODUCT BLOCK
LAST ITEM LINK
The Last Item Link feature allows quick loading of additional products in your product block if the number of products you have uploaded exceed the total number of rows and columns you've selected for your product block. You can also use the last item link as a call to action link to other pages/social media/items that you want to direct visitors to. You'll see the following options for Display Last Item Link:
- NONE: No link will be used on the last item in your grid.
- YES, AS A "LOAD MORE LINK": When clicked, it will load another set of items within the page. You can customize the text that appears in the load more link under the Link Text section.
- YES, AS A "STANDARD LINK": When clicked, it will link out to a separate page. You can customize the text that appears in the standard link under the Link Text section. You can also choose what you would like to link the standard link to from the following options:
- NONE: The button will not link anywhere and exists for aesthetic reasons on your page.
- 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.
- 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 button to a phone number allows users to quickly click to call you.
- EMAIL: Connecting your button 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: Enable one of your pop-ups to pop up when the button is clicked on to easily notify clients of your promotions, discounts or to sign up for your newsletter.
- NONE: The button will not link anywhere and exists for aesthetic reasons on your page.
PRODUCT BLOCK LAYOUT OPTIONS
You can choose from 27 different product block layouts for how you'd like your products to be displayed in your product block. The product block layouts are the following:
- Modern Square: Products will display as squares in a grid with the number of rows and columns of your choosing. This layout will display the product title and price on top of the product image.
- Modern Portrait: Products will display vertically in a grid with the number of rows and columns of your choosing. This layout will display the product title and price on top of the product image.
- Modern Landscape: Products will display horizontally in a grid with the number of rows and columns of your choosing. This layout will display the product title and price on top of the product image.
- Editorial Circle: Products will display as circles with the number of rows and columns of your choosing. This layout will display the product title and price on top of the product image.
- Editorial Square: Products will display as squares in a grid with the number of rows and columns of your choosing. This layout will display the product title and price on top of the product image.
- Editorial Landscape: Products will display horizontally in a grid with the number of rows and columns of your choosing. This layout will display the product title and price on top of the product image.
- Editorial Portrait: Products will display vertically in a grid with the number of rows and columns of your choosing. This layout will display the product title and price on top of the product image.
- Designer Pinboard: Products will be arranged in a grid in the number of columns and rows of your choosing. The Pinboard layout does not crop the original photos. This layout will display the product title below the product image and the price will show on top of the product image.
- Designer Portrait: Products will display vertically in a grid with the number of rows and columns of your choosing. This layout will display the product title below the product image and the price will show on top of the product image.
- Designer Landscape: Products will display horizontally in a grid with the number of rows and columns of your choosing. This layout will display the product title below the product image and the price will show on top of the product image.
- Gallery: Products fit the content area with no cropping, remaining products in the sequence show up as tiles below the main product. This layout will show the title and price on top of the main product image.
- Image Small Left: Products will display in rows with a with a small product image displaying to the left. Product title and price will display right of the image.
- Image Large Left: Products will display in rows with a with a large product image displaying to the left. Product title and price will display right of the image.
- Image Thin Left: Products will display in a grid with a with a vertical product image displaying to the left. Product title and price will display right of the image.
- Image Bottom: Products will display in a grid with a with a horizontal product image. Product title and price will display above of the image.
- Classic Landscape: Products will display horizontally in a grid with the number of rows and columns of your choosing. This layout will display the product title, description, and price below of the product image.
- Classic Layers: Products will display horizontally in a grid with the number of rows and columns of your choosing. This layout will display the product title above the product image, with the description and price below the product image.
- Contemporary Square: Products will display as squares in a grid with the number of rows and columns of your choosing. This layout will display the title, description, and price below the product image.
- Contemporary Landscape: Products will display horizontally in a grid with the number of rows and columns of your choosing. This layout will display the title, description, and price below the product image.
- Designer Large Portrait: Products will display large and vertically in a grid with the number of rows and columns of your choosing. This layout will display the title, description, and price below the product image.
- Classic Menu: Products will display left alligned in two columns without an image. Title and price will be on the same line with the description below the title.
- Contemporary Menu: Products will display left alligned in two columns without an image. The product title will display first, with the description following. The price will be displayed last.
- Designer Menu: Products will display left alligned in two columns without an image. The product title will display first, with the price following. The description will be displayed last.
- Center Menu: Products will display centered in two columns without an image. The product title will display first, with the price following. The description will be displayed last.
- Stack Menu: Products will display left alligned in two columns without an image. Title and price will be on the same line with the description below the title.
- Single item Square: A single product will display all images for the product in a gallery layout to the left. Product title and price will display to the right of the product image.
- Single Item Landscape: A single product will display all images for the product in a gallery layout. Product title will display above the product image and the price will display below the product image.
STYLING OPTIONS
The PRODUCT styling section gives you more control over how your products are displayed within the layout you've selected. By default, this section will use the styling and spacing settings in the global styling section of your website. You can override the global settings for your products block within this area. The settings in this section can include any of the following items:
- Overlay Opacity: Adjusts the opacity upon hovering over a product image. This setting only applies to layouts where titles and descriptions are seen by hovering over an product image. Increase or decrease the opacity of your overlay by adjusting the percentage.
- Space Between Items: Controls the spacing between products 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.
- Mobile View: Controls whether products on mobile and smaller devices display in one column or two.
Click on Save Changes to apply your changes to your product block styling options. The customized message will apply to any colors you've changed from your default styling settings.
COLORS
The button color section includes six color options. These colors will override the colors for the button that have been picked in the global color picker section under the DESIGN tab. Click on the color square or enter the HEX color code to customize the color for the following sections:
- TITLE COLOR
- TEXT COLOR
- BACKGROUND COLOR
- OVERLAY COLOR
- LAST ITEM TEXT COLOR
- LAST ITEM BACKGROUND COLOR
The customized flag will appear next to any color you've selected to override the global color picker for your website.
Click on save changes at the bottom to apply your color updates.
BACKGROUND
You can customize a background image behind your Product block to be different from your website background.
BACKGROUND
You can add a background image to display behind your Image block by adding a background image. You can upload your own custom background image or choose one from the Background Library. You can customize how the background image is displayed under the Background Settings.
If you upload a Custom Background or select a file from the Background Library, you can customize how the background image is displayed under the Background Settings from the following 4 different options:
- Tile: Will tile your image to fill the background
- Top Left: Will align your image to the top left
- Centered: Will align your image at the center of the available space
- Cover: Will scale your image to be as large as possible to completely cover the background
Click on Save Changes to apply your changes to the background settings.
FONTS
You can easily customize the fonts you're using on your products 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 products block:
- TITLE
- PRICE
- LAST ITEM TEXT
Click on Save Changes at the bottom of the control panel menu to apply your changes.
PRO TIP!
Selling Fine Art prints? Utilize the Gallery Layout to show off and sell your work at the same time!