The default Create page displays 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.
In this article, you will learn how...
- To edit the properties of the default Blank Product Listing Widget
- To configure the Design settings for the default Blank Product Listing Widget
To edit the properties of the default Blank Product Listing Widget:
- Click on the PAGES button in the Website Editor Toolbar.
- Click on the Create page tab.
- Mouse over the Blank Product Listing Widget on the page.
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.
- 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 blank product listing.
- Display as Categories: lets you choose whether to display the blank product listing as categories instead of a flat listing.
- Never: displays all blank products as a flat listing.
- Always: always displays the blank product listing as categories.
- Only on View All: displays the blank product listing as categories only when View All is selected.
- 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.
- System default: uses the Pricing 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 configure the Design settings for the default Blank Product Listing Widget:
- Click on the Design tab.
- Select from one of the pre-configured Blank 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 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.
- 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 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.
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.
- Image Effects: lets you apply filter and transform effects to the product images for the normal and hover states.
- 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.
- 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 blank product thumbnail.
- 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.
- 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.
- 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.
Click on the brush icon to configure the settings for the Product Prices element. The Product Prices Settings popup will be displayed. (The brush icon will be hidden if "Don't Show" is selected.)
- Product Price Link: Click on the brush icon to configure the font style for the product price link using the Font popup. Click here for instructions.
- Product Price Text: Click on the brush icon to configure the font style for the product price text using the Font popup. Click here for instructions.
- Product Price Amount: Click on the brush icon to configure the font style for the product price amount using the Font popup. Click here for instructions.
- Product level 'from' label: lets you change the text of the "from" label.
- 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 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 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 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.
- Min. Height: lets you specify the minimum height of the palette color container in pixels. Enter a value between 5 and 300.
- Margin: lets you specify a uniform margin around a palette color container.
- Padding: lets you set the padding on each side of the text container (top, right, bottom, left). Click on the brush icon to access the padding settings.
- 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.
- Add to Cart Button: lets you choose an option for the display and placement of the Add to Cart button for the product.
- Show Sort: lets you choose if/where the control for sorting the product listing is displayed.
- Don't Show: does not show the sort control.
- Show Left: displays the Sort control at the top left of the blank product listing panel.
- Show Right: displays the Sort control at the top right of the blank product listing panel.
Click on the brush icon to configure sort control panel design. The Sort Panel Design popup will be displayed.
- Text: lets you edit the font style and the color of text used in the sort control.
- 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 sort control. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
- Vertical Padding: sets the height of the sort control, using the em unit of measurement. An em is a value relative to the size of the font. Enter a value between 0.6 and 6. For example, 2em means 2 times the size of the font.
- Border Width: lets you specify the line thickness of the sort control's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of the sort control's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Rounded corners: lets you specify the roundness of the corners of the sort control's border in pixels. Enter a value between 0 and 100.
- Show Pagination: lets you choose if/where the pagination controls for browsing through the product pages are displayed.
- Don't Show: does not show the pagination controls.
- Show Above: displays the Sort control at the top center of the blank product listing panel.
- Show Below: displays the Sort control at the bottom center of the blank product listing panel.
- Show Above and Below: displays the sort control at the top and the bottom center of the blank product listing panel.
Click on the brush icon to configure the style settings for the pagination control. The pagination settings popup will be displayed.
- Page Numbers: lets you edit the font style and the color of the page numbers in the pagination control.
- Page Numbers Background: lets you specify the background settings of the page number links in the pagination control.
Click on the brush icon to configure the background settings for page number links in the pagination control. The page numbers settings popup will be displayed.
- Background Color: lets you specify the background fill color of the page number links. 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 border of the page number links in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of the border of the page number links. 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 border of the page number links. Enter a value between 0 and 100.
- Margin: sets the margin on each side of the number container (top, right, bottom, left). Click on the brush icon to access the margin settings.
- Padding: sets the padding on each side of the number container (top, right, bottom, left). Click on the brush icon to access the padding settings.
- Edit Hover: lets you configure the appearance of the pagination number 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 Background Color: sets the background color of the pagination number on hover.
- Hover Border Color: sets the border color of the pagination number on hover.
- Edit Active: lets you configure the appearance of the pagination number when it is active. Tick the checkbox to enable the active settings.
- Active Background Color: sets the background color of the pagination number when it is active.
- Active Border Color: sets the border color of the pagination number when it is active.
- Previous/Next: lets you edit the font style and the color of the Previous and Next links in the pagination control.
Click on the brush icon to configure the font settings for the Previous/Next link. Click here for instructions on how to configure the settings in the Font popup.
- Items Count: lets you edit the font style and the color of the Items Count in the pagination control.
Click on the brush icon to configure the font settings for the Items Count. Click here for instructions on how to configure the settings in the Font popup.
The following image shows what the pagination style settings apply to.
- Show Product Count: lets you choose if/where the product total and the number range of the products visible on the current page is displayed.
- Don't Show: does not show the product count.
- Show Above: displays the product count at the top center of the blank product listing panel.
- Show Below: displays the product count at the bottom center of the blank product listing panel.
- Show Above and Below: displays the product count at the top and the bottom center of the blank product listing panel.
- Thumbnail size: lets you set the 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.
Comments
0 comments
Please sign in to leave a comment.