The Blank Product Listing Widget lets you display a list of blank products on your website that visitors can decorate and purchase. You can modify the appearance and content of the blank product list by editing the Blank Product Listing Widget settings.
Watch the video below for a quick overview of how to use the Blank Product Listing Widget, and read below for more detailed instructions and information on settings.
In this article, you will learn how...
- To add a Blank Product Listing Widget to your website
- To edit/add category tabs in a Blank Product Listing Widget
- To configure the Design settings for the Blank Product Listing Widget
- To configure the appearance of the Product Name text element
To add a Blank Product Listing Widget to your website:
- Click on the WIDGETS button in the Website Editor Toolbar.
- Browse the Widgets tab to locate the Blank Product Listing Widget in the LISTS section.
- Click and drag the Blank Product Listing Widget onto your website page.
Allowable areas the Blank Product Listing Widget can be inserted into include:
- Within rows
- Within columns
- Above or below existing widgets
- Between existing widgets
The Blank Product Listing Settings popup will be displayed.
- Configure the Properties for the Blank Product Listing Widget.
- Panel title: lets you specify the title that will appear in the header area for the product listing.
- Categories Display: sets the overall look of the product listing.
- Normal: displays products as a flat listing.
The following settings are displayed only of "Normal" is selected from the Categories Display drop-down.
- List Display: lets you choose the source of products to display.
- Latest Products: displays the most recently added products to the store.
- Category Products: displays products from a single category.
- Category lets you choose the category of products to be displayed. All categories will be displayed if nothing is selected.
- List Display: lets you choose the source of products to display.
- Display Categories as Tabs: displays products within tabs configured for specific categories.
When this option is selected, you are able to add multiple tabs to display different categories of products. By default, a tab containing all products will be preconfigured.
Click here for instructions on how to edit or add category tabs.
- Normal: displays products as a flat listing.
- Products Per Page: lets you specify the number of products the listing will be limited to.
- Clicking product goes to: lets you choose how a product will load when the product name or thumbnail is clicked.
- System default: uses the Product display option configured in the Blank Product Display settings. (Admin > Products > Blank Product Display)
- Product details page: loads the product details page when the product is clicked.
- Designer with cheapest decoration process: loads the designer with the cheapest decoration process set as the process to use.
- Designer with no decoration process: loads the Designer with no decoration process selected.
- Show prices for: sets what pricing to display next to the product thumbnail for a blank product listing.
- System default: uses the Price types to display option configured in the Blank Product Display settings. (Admin > Products > Blank Product Display)
- Decoration prices: displays the prices for the available decoration processes only.
- 'No decoration' price: displays the price for the blank product only.
- Both 'decoration' and 'no decoration' prices: displays the prices for the combined blank product and available decoration processes.
- Price level display: sets what level of pricing to display next to the product thumbnail for a blank product listing.
- System default: uses the Pricing levels to display option configured in the Blank Product Display settings. (Admin > Products > Blank Product Display)
- As low as (cheapest unit price including quantity discounts): displays the best possible unit price for the product, taking into consideration the highest quantity volume discount level.
Price display example
- Starting from (unit price for minimum quantity): displays the unit price of the product for the minimum quantity that can be purchased.
Price display example
- Both 'as low as' and 'starting from': displays both the best possible price for the highest quantity and the unit price for the minimum quantity.
Price display example
- Thumbnail Image: lets you choose the source of the image that is displayed for products.
- System default: the system will utilize the product image set as the product default image in the product's configuration.
- Sales Image: the image uploaded as the sales image for the product in the product's configuration.
- Product Image: the image uploaded as the product information image for the product in the product's configuration.
- Configure the Design settings for the Blank Product Listing Widget. Click here for instructions.
- Click OK to apply the changes.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
To edit/add category tabs:
- Make sure Display Categories as Tabs is selected in the Categories Display drop-down box.
A section called, "Select categories you wish to appear as tabs" will be displayed.
By default, a tab containing all products will be preconfigured.
- Click on the Edit button to edit existing tabs.
OR
Click on the + button to add a new tab.
The properties for editing a tab category and adding a tab category are the same:
- Configure the tab properties as required:
- Tab Content: lets you choose the source of products to be displayed.
- Latest Products: displays the most recently added products to the store.
- Category Products: displays products from a single category.
- Tab Type: lets you choose one of the following types.
- Single: displays a single category.
- Group: displays a group of categories.
- Category lets you choose the category of products to be displayed. All categories will be displayed if nothing is selected.
- Tab Type: lets you choose one of the following types.
- Tab Name: lets you specify a name for the tab.
- Tab Content: lets you choose the source of products to be displayed.
- Click OK to apply the changes or click on the Blank Product Listing breadcrumb link in the title bar to go back to editing the main properties.
To configure the Design settings for the Blank Product Listing Widget:
- Mouse over the widget.
The widget's controls will be displayed.
- Click on the down arrow beside the Blank Product Listing Widget icon.
- Choose the Blank Product Listing Settings item from the drop-down menu.
The Blank Product Listing Settings popup will be displayed.
- Click on the Design tab.
If you add the Blank Product Listing Widget to a custom dropdown menu, the Show as Link(s) in Mobile Menu option will be available. When enabled, this option will generate matching links for the content placed in the custom dropdown menu that will be rendered as a simple list of links on the site's mobile menu.
- Select from one of the pre-configured Product Listing Layout options:
- Grid: image thumbnails maintain their aspect ratio and are displayed in the center of each cell in a uniform grid arrangement.
- Masonry: image thumbnails are resized to have the same width while maintaining their aspect ratio and arranged to form equal columns. Images are placed in an optimal position based on available vertical space.
- Collage: image thumbnails maintain their aspect ratio, but are cropped and are placed in a pre-defined pattern arrangement of a specified number of items per row. You can set a 3,4,5, or 6 image pattern per row. Each row will use one of 4 pattern variations. If the last row has fewer items than necessary then the images will be arranged in a layout to ensure that all space is used on the final row.
- Carousel: rotates the image thumbnails radially and in a 3D feel by using distance and depth of field. The image thumbnails rotate on an axis where the image is always facing you.
- Stacked: image thumbnails maintain their aspect ratio and are displayed in a single column.
- Configure the rest of the design options for the Product Listing Widget.
- Thumbnail size: lets you set the display dimensions of the product thumbnails. You can choose a preset size or choose Custom Size to specify a custom size.
The following fields will be displayed when you select Custom Size:
- Thumbnail Width: lets you specify the width of the product image thumbnail in pixels.
- Thumbnail Height: lets you specify the width of the product image thumbnail in pixels.
The maximum allowable thumbnail width and height is 600px. If a value higher than 600 is entered, the value will be automatically reset to 600. This is to prevent blurry thumbnail images caused by upscaling of the product view images since they are generated at a maximum size of 600x600 pixels at the time of upload.
You can configure the container properties of the product thumbnails by clicking on the brush icon beside the Thumbnail Size field. The Thumbnail Properties popup will be displayed.
- Background Color: lets you specify the background fill color of the product thumbnail.
- Border Width: lets you specify the line thickness of the product thumbnail's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of the product thumbnail's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Border Radius: lets you specify the roundness of the corners of the product thumbnail's border in pixels. Enter a value between 0 and 100.
- Crop Thumbnail: crops the product image thumbnail to square when the checkbox is ticked. Leaves the image in its original shape when the checkbox is unticked.
- Use Higher Resolution on Retina Displays: when checked, will double the pixel density of the images to increase the clarity of the image for retina displays.
- Image Effects: lets you apply filter and transform effects to the product images.
- Hover Image Effects: lets you apply filter effects, transform effects, and hover animation to the product images for the hover state.
Click here for instructions on how to add image effects.
- Panel Title: lets you configure the font style and the color for the title that will appear in the header area of the product listing panel.
- Click on the font name to configure the font style using the Font popup. Click here for instructions.
- Click on the color spot to choose a text color using the Color popup. Click here for instructions.
- Panel Design: lets you configure the appearance of the panel containing the product listing.
Click on the brush icon to configure the panel design. The Panel Design popup will be displayed.
- Background Color: lets you specify the background fill color of the product listing panel. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
- Border Width: lets you specify the line thickness of the product listing panel's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of the product listing panel's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Border Radius: lets you specify the roundness of the corners of the product listing panel's border in pixels. Enter a value between 0 and 100.
- Text Overlay Background: lets you configure the background of any product information that is displayed on the product image or on image rollover.
Click on the brush icon to configure the text overlay background. The Text Overlay Background Properties popup will be displayed.
- Background Color: lets you specify the background fill color of the text overlay. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
- Border Width: lets you specify the border line thickness of the text overlay background in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the border color of the text overlay background. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Width: lets you specify the container width of the text overlay background as a percentage of the product thumbnail width.
- Align: lets you choose an alignment option for the text overlay in reference to the product image:
- Left: aligns the text overlay to the left of the product image.
- Center: centers the text overlay horizontally to the product image.
- Right: aligns the text overlay to the right of the product image.
- Categories Tab: lets you configure the appearance of the tab containing the blank products listing. (Only available if "Display Categories as Tabs" is selected in the Categories Display drop-down list in the Properties tab).
Click on the brush icon to configure the categories tab design. The categories tab style settings popup will be displayed.
- Text: lets you edit the font style and the color of the text used in the categories tab.
- Click on the font name to edit the font style using the Font Popup. Click here for instructions.
- Click on the color spot to edit the text color using the Color popup. Click here for instructions.
- Background Color: lets you specify the background fill color of the categories tab. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
- Border Width: lets you specify the line thickness of the categories tab's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of the categories tab's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Border Radius: lets you specify the roundness of the corners of the categories tab's border in pixels. Enter a value between 0 and 100.
- Align: lets you configure the horizontal alignment of the categories tab within the blank products listing container.
- Edit Hover: lets you configure the appearance of the categories tab when you move the mouse over it. Tick the checkbox to enable the hover settings.
- Hover Transition Duration: sets the length of time, in milliseconds, over which the hover properties will occur. Enter a value between 0 and 2000.
- Hover Text Color: sets the color of the categories tab's text on hover.
- Hover Background Color: sets the background color of the categories tab on hover.
- Hover Border Color: sets the border color of the categories tab on hover.
- Text: lets you edit the font style and the color of the text used in the categories tab.
- Categories Panel: lets you configure the appearance of the panel containing the blank products categories listing. (Only available if "Display Categories as Tabs" is selected in the Categories Display drop-down list in the Properties tab).
Click on the brush icon to configure the panel design. The categories panel style settings popup will be displayed.
- Border Width: lets you specify the line thickness of the categories panel's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of the categories panel's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Border Radius: lets you specify the roundness of the corners of the categories panel's border in pixels. Enter a value between 0 and 100.
- Tax Notice: lets you configure the font style, size, and color for the tax notice informing customers of the taxes that you collect. (Configure the tax notice via Admin > Settings > Taxes > Tax Settings).
- Click on the font name to configure the font style using the Font popup. Click here for instructions.
- Click on the color spot to choose a text color using the Color popup. Click here for instructions.
- Product Name: lets you choose an option for the display and placement of the product's name.
- Don't Show: does not show the product name.
- Show on Image: displays the product name across the middle of the product thumbnail.
- Show on Image on Rollover: displays the product name across the middle of the product thumbnail when the mouse hovers over the product thumbnail.
- Show Above: displays the product name above the center of the product thumbnail.
- Show Above on Rollover: displays the product name above the center of the product thumbnail when the mouse hovers over the blank product thumbnail.
- Show Below: displays the product name below the center of the product thumbnail.
- Show Below on Rollover: displays the product name below the center of the product thumbnail when the mouse hovers over the thumbnail.
Click on the brush icon to configure the appearance of the product name using the Font Settings Popup. (The brush will icon will not be displayed if "Don't Show" is selected.) Click here for instructions on configuring the settings in the Font Settings Popup.
- Product Code: lets you choose an option for the display and placement of the product's code.
The display options are the same as for Product Name.
Click on the brush icon to configure the appearance of the product code. (The brush will icon will not be displayed if "Don't Show" is selected). Click here for instructions on configuring the settings in the Font Settings Popup.
- Product Brand: lets you choose an option for the display and placement of the product's brand.
The display options are the same as for Product Name.
Click on the brush icon to configure the appearance of the product brand. (The brush will icon will not be displayed if "Don't Show" is selected). Click here for instructions on configuring the settings in the Font Settings Popup.
- Product Brand Logo: lets you choose an option for the display and placement of the logo for the product's brand.
The display options are the same as for Product Name.
- Product Prices: lets you choose an option for the display and placement of the product's price.
The display options are the same as for Product Name.
Click on the brush icon to configure the settings for the product prices element. (The brush will icon will not be displayed if "Don't Show" is selected). The Text Product Prices Settings popup will be displayed.
- Product Price Link: The product price link is the link preceding the price display named according to the decoration process. The link will load the Designer with the corresponding decoration process selected and the prices for that decoration process displayed accordingly. Click on the font name to configure the font style of the product price link using the Font popup. Click here for instructions.
Click on the color spot to edit the product price link color using the Color popup. Click here for instructions.
- Product Price Text: The product price text is the text all the text that indicates the price of the product in the price display. Click on the font name to configure the font style of the product price text using the Font popup. Click here for instructions.
Click on the color spot to edit the product price text color using the Color popup. Click here for instructions.
- Product Price (Pre-Discount): The pre-discount product price is the original retail price of the product. Click on the font name to configure the font style of the pre-discount product price text using the Font popup. Click here for instructions.
Click on the color spot to edit the pre-discount product price text color using the Color popup. Click here for instructions.
- Product Price Amount: The product price amount is the actual price value in the product price display. This setting overwrites the display setting for the product price text. Click on the font name to configure the font style of the product price amount using the Font popup. Click here for instructions.
Click on the color spot to edit the product price amount color using the Color popup. Click here for instructions.
- Product level 'as low as' label: lets you change the text of the "as low as" label.
This setting will only be enabled if allowed by the Fulfillment Center via the Blank Product Display Settings.
- Product Price Link: The product price link is the link preceding the price display named according to the decoration process. The link will load the Designer with the corresponding decoration process selected and the prices for that decoration process displayed accordingly. Click on the font name to configure the font style of the product price link using the Font popup. Click here for instructions.
- Product Colors: lets you choose an option for the display and placement of the product's available colors palette.
Click on the brush icon to configure the product colors palette settings. The Text Product Colors Palette Settings popup will be displayed.
- Border Width: lets you specify the line thickness of a color's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of a color's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Border Radius: lets you specify the roundness of the corners of a color's border in pixels. Enter a value between 0 and 100.
- Width: lets you specify the width of a palette color container in pixels. Enter a value between 5 and 50.
- Height: lets you specify the height of a palette color container in pixels. Enter a value between 5 and 50.
- Margin: lets you specify a uniform margin around a palette color container.
- Product Sizes: lets you choose an option for the display and placement of the product's available sizes.
The display options are the same as for Product Name.
Click on the brush icon to configure the appearance of the product sizes. (The brush will icon will not be displayed if "Don't Show" is selected). Click here for instructions on configuring the settings in the Font Settings Popup.
- Add to Cart Button: lets you choose an option for the display and placement of the Add to Cart button for the product.
The display options are the same as for Product Name.
Click on the brush icon to configure the appearance of the Add to Cart button. (The brush will icon will not be displayed if "Don't Show" is selected). Style settings for the Add to Cart for a blank product listing are the same as for theme button settings in the Style Editor. Click here for instructions on configuring the style settings for the Add to Cart button.
The following settings are available for the Carousel product listing layout only:
- Carousel Products Per Row: lets you specify how many products are visible in the carousel row.
- Carousel Arrow Position: lets you choose the position of scroll arrows displayed on the carousel.
- Carousel Arrow Style: lets you choose and configure the style of scroll arrows displayed on the carousel.
- Carousel Animation: displays the current setting duration setting for the transition from one slide to the next.
Click on the brush icon to display the Animation Settings popup which lets you configure the animation for the transition between slides. Click here for instructions on how to add image effects.
- Thumbnail size: lets you set the display dimensions of the product thumbnails. You can choose a preset size or choose Custom Size to specify a custom size.
- Click OK, once you have finished configuring the settings.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
To configure the appearance of the Product Name text element:
- Click on the font name link at the right of the Product Name drop-down list.
The Font popup will be displayed
- Select the font family from the dropdown list.
- Configure the settings for the selected font.
- Color: lets you specify the color of the text. Click on the color spot to edit the color using the Color popup. Click here for instructions.
- Size: sets the size of the font in pixels. Use the slider or specify a value between 6 and 120.
- Line Height: sets the height of the text element by adding space above and below the text. The height is specified as a factor of the current font size. Use the slider or specify a value between 0.6 and 6.
- Min. Height: sets the minimum height of the text element. This setting overrides the Line Height setting if the value for Line Height is smaller.
- Weight: sets how thin or thick the characters of the text should be displayed at.
- 400: Standard weight
- 700: Bold weight
- Italics: displays the font in italics if the checkbox is ticked.
- Small Caps: if this checkbox is ticked, all letters entered as lowercase will be set to uppercase, but will maintain the original height of the lowercase letters.
- Wrap when Multiple Lines: when this checkbox is ticked, words will flow onto the next line if the text exceeds the boundary of its container.
- Letter Spacing: sets the letter spacing of the font as a factor of the current font size. Use the slider or specify a value between -0.1 and 0.4.
- Word Spacing: sets the word spacing of the font as a factor of the current font size. Use the slider or specify a value between -0.1 and 1.
- Padding: lets you set the top, right, bottom, and left padding for the text.
- Decoration: sets the appearance of the decorative line, if any, added to the text.
- None: no line is added.
- Underline: adds a 1-pixel line across the baseline of the text.
- Overline: adds a 1-pixel line across the top of the text.
- Line-Through: adds a 1-pixel line across the middle of the text.
- Transform: sets the capitalization style of the text.
- None: leaves the text exactly as it was entered.
- Capitalize: capitalizes the first letter of each word.
- Uppercase: makes all letters uppercase.
- Lowercase: makes all letters lowercase.
- Align: lets you configure the alignment of the title text.
- Left: aligns the title to the left of the widget container.
- Center: aligns the title to the center of the widget container.
- Right: aligns the title to the right of the widget container.
For the Size, Line Height and Spacing properties, you can use the slider to configure the setting.
The slider will appear when you hover your mouse anywhere along the line between the label and the input field of the property.
- Close the font dialog box.
Comments
0 comments
Please sign in to leave a comment.