How to Use the Product Block to Sell Items on Your Zibster Website
Your Zibster Website Package includes full eCommerce functionality, allowing you to easily set up an online store to sell products directly from your website. The Product Block showcases items you’ve made available through your Zibster eCommerce setup.
Follow the steps below to add and customize a Product Block on your website.
STEP ONE
Log into your Zibster account and click WEBSITE in the left-side menu.
STEP TWO
Click on the page where you want to showcase products, or create a new page.
You can add a Product Block in two ways:
-
Click the Product icon on the right-hand side to automatically add the block to the bottom of your page.
-
Or, click and drag the Product icon to place it anywhere on the page. When a teal line appears, release your mouse to drop it there. You can also move it later by dragging it up or down.
Good To Know: If you have a block that you want to move to the top or bottom of a page, the MOVE option in the advanced menu of the product block makes this very easy.
STEP THREE
Choose a Layout (Recommended: Predesigned Layouts)
After adding your Product Block, you’ll be prompted to choose a layout.
We recommend using one of the 9 Predesigned Layouts for a professional look right away. These layouts are styled and ready to go, making it easy to match your website design with minimal setup.
If you prefer to design your own, you can start with a Blank Layout, which uses your global site settings and allows full customization.
Once you’ve selected a layout, click SAVE CHANGES to apply it.
STEP FOUR
Click inside the block or on the pencil icon at the top right, then choose Advanced.
The menu on the right side of your control panel will display options depending on the layout you’ve selected:
-
Display All Product Categories
-
Display a Single Product Category
-
Display Products Tagged With a specific tag
-
Display Custom Products (manually selected items)
After choosing your preferred option, click SAVE CHANGES. Your Product Block will automatically populate with the selected products.
Styling Options For Your Product Block
LAST ITEM LINK
The Last Item Link feature allows you to display a final button in your product grid to either load more items or link elsewhere.
Display Options:
-
None: No link appears.
-
Yes, as a “Load More” Link: Loads additional products within the page.
-
Yes, as a “Standard Link”: Links to another location on your site or externally.
Standard Link Options:
-
None
-
External Link
-
Page (link to another page or specific block on your website)
-
Form (from your Form Builder)
-
Marketing (Campaign or Landing Page)
-
File (PDF, JPG, PNG, or GIF uploaded to Files > Documents)
-
Phone
-
Email (opens default mail app)
-
Address (opens in Google Maps)
-
Video (YouTube or Vimeo lightbox)
-
Pop-Up (trigger a site pop-up)
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.
Styling Options
You can customize the look and feel of your Product Block to match your brand. Styling options depend on the layout you’ve selected. These options can vary depending 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
Customize the product 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
Available animations depend on the layout you choose.
Add subtle motion to enhance the user experience and draw attention to your products.
IMAGE HOVER ANIMATIONS
- None – No movement
- Scale – Slight zoom
- Blur – Soft blur effect
- Scale Blur – Zoom with blur
- Bounce – Adds playful bounce
BUTTON HOVER ANIMATIONS
- Fill – Fills the button with color
- Overlay – Contrasting highlight
- Scale – Grows the button
- Arrows – Adds directional arrow
These animations help guide your visitors and encourage more clicks.
