Editing the default Design Listing Widget in the Designs page

The default Designs page displays a list of designs on your website that visitors can use to decorate products. You can modify the appearance and content of the design list by editing the Design Listing Widget settings.

In this article, you will learn how...

• To edit the properties of the default Design Listing Widget
• To configure the Design settings for the default Design Listing Widget

To edit the properties of the default Design Listing Widget:

1. Click on the PAGES button in the Website Editor Toolbar.
2. Click on the Designs page tab.
   
3. Double-click on the Design Widget in the Designs page.

   The Design Listing Settings popup will be displayed.

   
4. Configure the Properties for the Design Listing Widget.
   • Panel title: lets you specify the title that will appear in the header area for the design listing.
   • Display as Categories: lets you choose whether to display the design listing as categories instead of a flat listing.
     • Never: displays all designs as a flat listing.
     • Always: always displays the design listing as categories.
     • Only on View All: displays the design listing as categories only when View All is selected.
   • Show Designs: lets you choose whether stock or store designs will be available in the design listing.
     • Show Store Designs: only displays designs that have been uploaded to the store.
     • Show Stock Designs: only displays designs added from the stock design collection.
     • Show both Store and Stock Designs: displays both uploaded and stock collection designs.
   • Designs Per Listing: lets you specify the number of designs the listing will be limited to per page.
5. Configure the Design settings for the Design Listing Widget. Click here for instructions.
6. Click OK to apply the changes.
7. 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 Design Listing Widget:

1. Click on the Design tab.
   
2. Select from one of the pre-configured Design Listing Layout options:
   • Grid: design thumbnails maintain their aspect ratio and are displayed in the center of each cell in a uniform grid arrangement.
   • Masonry: design thumbnails are resized to have the same width while maintaining their aspect ratio and arranged to form equal columns. Designs are placed in optimal positions based on available vertical space.
   • Collage: design 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: design thumbnails maintain their aspect ratio and are displayed in a single column.
3. Configure the rest of the design options for the Design Listing Widget.

   The settings will vary depending on the layout selected.

   • Thumbnail size: lets you set the dimensions of the design 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 design thumbnail in pixels.
     • Thumbnail Height: lets you specify the width of the design 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 design listing 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 design 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 design thumbnail.
     • Border Width: lets you specify the line thickness of the design thumbnail's border in pixels. Enter a value between 0 and 20.
     • Border Color: lets you specify the color of the design 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 design thumbnail's border in pixels. Enter a value between 0 and 100.
   • Crop Thumbnail: crops the design thumbnail to square when the checkbox is ticked. Leaves the design in its original shape when the checkbox is unticked.
   • Inset Padding Thumbnail: will add spacing at a distance of 10% of the shortest side between the image and the container of design listing thumbnails.
   • 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.

     Retina displays have 4 times more pixels than standard screens. So, if you have a 600 x 600 pixel image, you would need a 1200 x 1200 pixel image to render smoothly on a high-density retina display. This setting will do this for you.

   • Image Effects: lets you apply filter and transform effects to the designs.
   • Hover Image Effects: lets you apply filter effects, transform effects and hover animation to the designs 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 design 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.
   • Text Overlay Background: lets you configure the background of any design information that is displayed on the design or on design 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 design thumbnail width.
     • Align: lets you choose an alignment option for the text overlay in reference to the design:
       • Left: aligns the text overlay to the left of the design thumbnail.
       • Center: centers the text overlay horizontally to the design thumbnail.
       • Right: aligns the text overlay to the right of the design thumbnail.
   • Design Panel: lets you configure the appearance of the panel containing the design 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 design 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 design listing panel's border in pixels. Enter a value between 0 and 20.
     • Border Color: lets you specify the color of the design 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 design listing panel's border in pixels. Enter a value between 0 and 100.
   • Design Name: lets you choose an option for the display and placement of the design's name.
     • Don't Show: does not show the design name.
     • Show on Image: displays the design name across the middle of the design thumbnail.
     • Show on Image on Rollover: displays the design name across the middle of the design thumbnail when the mouse hovers over the design thumbnail.
     • Show Above: displays the design name above the center of the design thumbnail.
     • Show Above on Rollover: displays the design name above the center of the design thumbnail when the mouse hovers over the design thumbnail.
     • Show Below: displays the design name below the center of the design thumbnail.
     • Show Below on Rollover: displays the design name below the center of the design thumbnail when the mouse hovers over the design thumbnail.
   • Design Rollover Behavior: lets you choose the behavior when the mouse pointer hovers over the design thumbnail.
     • Do Nothing: does not show a popup window displaying the design.
     • Show Design in Popup: shows a popup window displaying an enlarged view of the design.
   • Show Sort: lets you choose if/where the control for sorting the design is displayed.
     • Don't Show: does not show the sort control.
     • Show Left: displays the sort control at the top left of the design listing panel.
     • Show Right: displays the sort control at the top right of the design listing panel.

     Click on the brush icon to configure the 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 designs are displayed.
     • Don't Show: does not show the pagination controls.
     • Show Above: displays the sort control at the top center of the design listing panel.
     • Show Below: displays the sort control at the bottom center of the design listing panel.
     • Show Above and Below: displays the sort control at the top and the bottom center of the design 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 Design Count: lets you choose if/where the design total and the number range for the designs visible on the current page are displayed.
     • Don't Show: does not show the design count.
     • Show Above: displays the design count at the top center of the design listing panel.
     • Show Below: displays the design count at the bottom center of the design listing panel.
     • Show Above and Below: displays the design count at the top and the bottom center of the design listing panel.

     Click on the brush icon to configure the font settings for the design name and pagination using the Font popup. Click here for instructions on how to configure settings in the Font popup.

   • Show Filter: lets you choose if/where the filter for the designs listing is displayed.
     • Don't Show: does not show the design filter.
     • Show Left: displays the design filter at the left of the design listing panel.
     • Show Right: displays the design filter at the right of the design listing panel.

     Click on the brush icon to configure the font settings for the design filter using the Font popup. Click here for instructions on how to configure settings in the Font popup.

4. Click OK, once you have finished configuring the settings.
5. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.