Zibster Website Package includes ECommerce that allows you to easily set up an online store to sell your products through your website. This guide will walk you through the steps on how to add a Product Block to your website to showcase the products you've made available with your Zibster ECommerce.
STEP ONE
Log into your Zibster account and click on the WEBSITE option in the left-side menu.
STEP TWO
Click on the page name or add a new page where you want to use a product block.
There are two ways to add a product block to your page:
- On the right-hand side of your screen, click the product icon, and the product block will appear at the very bottom of your page.
- 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, release 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, 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 giving you the following options:
- Display ALL of your product categories
- Display a single 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 exceeds the total number of rows and columns you've selected. You can also use the last item link as a call-to-action link to other pages, social media, or items 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 outside of your website.
- PAGE: Direct your visitors to an existing webpage 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 lightbox.
- POP-UPS: Enable one of your pop-ups to pop up when the button is clicked to easily notify clients of your promotions, discounts, or to sign up for your newsletter.
PRODUCT BLOCK LAYOUT OPTIONS
You can choose from 27 different product block layouts for displaying your products. The product block layouts are:
- Modern Square: Products display as squares in a grid, showing the product title and price on top of the product image.
- Modern Portrait: Products display vertically, showing the product title and price on top of the product image.
- Modern Landscape: Products display horizontally, showing the product title and price on top of the product image.
- Editorial Circle: Products display as circles, showing the product title and price on top of the product image.
- Editorial Square: Products display as squares, showing the product title and price on top of the product image.
- Editorial Landscape: Products display horizontally, showing the product title and price on top of the product image.
- Editorial Portrait: Products display vertically, showing the product title and price on top of the product image.
- Designer Pinboard: Products are arranged in a grid without cropping, showing the product title below and the price on top of the product image.
- Designer Portrait: Products display vertically, showing the product title below and the price on top of the product image.
- Designer Landscape: Products display horizontally, showing the product title below and the price on top of the product image.
- Gallery: Products fit the content area with no cropping, showing the title and price on top of the main product image.
- Image Small Left: Products display in rows with a small product image on the left and the title and price on the right.
- Image Large Left: Products display in rows with a large product image on the left and the title and price on the right.
- Image Thin Left: Products display in a grid with a vertical product image on the left and the title and price on the right.
- Image Bottom: Products display in a grid with a horizontal product image, with the title and price above the image.
- Classic Landscape: Products display horizontally, showing the title, description, and price below the product image.
- Classic Layers: Products display horizontally, showing the title above the image and the description and price below.
- Contemporary Square: Products display as squares, showing the title, description, and price below the image.
- Contemporary Landscape: Products display horizontally, showing the title, description, and price below the image.
- Designer Large Portrait: Products display large and vertically, showing the title, description, and price below the image.
- Classic Menu: Products display left-aligned in two columns without an image, with the title and price on the same line and the description below.
- Contemporary Menu: Products display left-aligned in two columns without an image, with the title first, followed by the description, and then the price.
- Designer Menu: Products display left-aligned in two columns without an image, with the title first, followed by the price, and then the description.
- Center Menu: Products display centered in two columns without an image, with the title first, followed by the price, and then the description.
- Stack Menu: Products display left-aligned in two columns without an image, with the title and price on the same line and the description below.
- Single Item Square: A single product displays all images in a gallery layout to the left, with the title and price on the right.
- Single Item Landscape: A single product displays all images in a gallery layout, with the title above and the price below.
STYLING OPTIONS
The PRODUCT styling section allows you to customize how your products are displayed within the selected layout. These settings can include:
- Overlay Opacity: Adjust the opacity upon hovering over a product image. This applies to layouts where titles and descriptions are seen by hovering over an image.
- Space Between Items: Control the spacing between products in grid layouts.
- Space Below Blocks: Control the amount of space before the next block begins.
- Space Inside Blocks: Control the space at the top and bottom of a block.
- Flushing: Decide whether the content flushes to fill the screen width or remains contained in the center.
- Mobile View: Choose whether products on mobile devices display in one column or two.
Click on Save Changes to apply your changes to your product block styling options. The customized settings will apply to any colors or styles you've changed from your default settings.
COLORS
Customize the colors of your product block buttons with six color options, overriding the global color settings:
- TITLE COLOR
- TEXT COLOR
- BACKGROUND COLOR
- OVERLAY COLOR
- LAST ITEM TEXT COLOR
- LAST ITEM BACKGROUND COLOR
Click on Save Changes to apply your color updates.
BACKGROUND
Customize a background image for your Product block:
- Tile: Tile your image to fill the background.
- Top Left: Align your image to the top left.
- Centered: Align your image at the center.
- Cover: Scale your image to cover the background.
Click on Save Changes to apply your changes to the background settings.
FONTS
Customize the fonts in your product blocks to override global font settings, including font, size, letter spacing, and line height for:
- TITLE
- PRICE
- LAST ITEM TEXT
Click on Save Changes to apply your changes.
0 Comments