Wix Stores: Customizing the Category Page
Important:The Category Page is not yet available to all users.The Category Page is your main shop page. You can design every part of the page, choose your preferred layout, decide what information to show and much more. Show me how to access the Category Page settings.
Click Pages and Menuon the left side of the editor. Click Store Pages. Click Category Page. Click the Category Page in the editor. Click Settings.
In this article, learn how to:
Choose which page elements to display Adjust the page's settings Choose a layout Edit text Design the page Customize the sidebar Customize the product sorting options Customize the Quick ViewTips:
You only need to customize the Category Page once. Your customizations automatically apply to each category.  Use the category preview selector at the top right to choose a category and preview it.Choose which page elements to displayThe Display tab is the place to choose which elements you want to show on the Category Page, and where you can hide the rest. To show or hide Category Page elements:
Click the Display tab. Select the checkboxes next to elements you want to show.Tip:You can also:
Go to the List tab to hide the Category List in the sidebar. Go to the Filters tab to hide filters from the sidebar. Go to the Sorting tab to hide the sorting option.Adjusting the Category Page settingsIn the Settings tab, you can decide how visitors view more products when they get to the end of the page (e.g. clicking a "Load More" button), choose what happens when customers hover over product images, and more.To select Category Page settings:
Click the Settings tab. Customize any of the following:
    
Scroll behavior: 

Select what happens when customers scroll to the bottom of the page. Learn more Enable the Sticky sidebar toggle to keep filters visible while scrolling. If enabled, customize the sidebar's distance from the top.   Image hover effect: Set what happens when a customer moves their mouse over a product. Add to Cart Button: If you enabled the button in the Display tab, customize what happens when the button is clicked: 
        
Show success pop-up: A pop-up notification appears. Open side cart:  Side Cart (Mini Cart) opens on the side of the screen. Go to cart page: Customers are taken directly to the cart page. Stay on current page: Customers stay on the same page. The button displays a checkmark to indicate that the product was successfully added.     Tips:
If you selected the "Load More" button or pagination scroll behavior option, go to the Design tab to customize the design.  Each page has a separate URL to help improve your Product Gallery's SEO. For example:
    
First page URL: https://www.mystunningwebsite.com/shop Second page URL: https://www.mystunningwebsite.com/shop?page=2  Choosing the Category Page layoutChoose your preferred layout for both the header (if displayed) and the product display. To choose layout options:
Click the Layout tab. Customize any of the following:
    
Breadcrumbs: Align the breadcrumbs left, right, or center. Header section:

Header position: Select Inline or Top.
Tip: If you select Top, we suggest hiding the Category List. Otherwise, categories give the appearance of subcategories of the selected category. Category info placement: Display the category description above, in front, or below image. Category info alignment: Align the header text to the left, right, or center. Category image height: Drag the slider to set the category image height. Spacing between title & description: Drag the slider to set the desired spacing. Description text appearance: If long, customers click to view the whole message.   Product grid:

Grid behavior:
Note: Customizations vary depending on whether you choose Fixed or Responsive.
            
Fixed: All visitors see the same amount of rows and columns in the gallery.   Responsive: The number of products displayed adjusts according to your visitor's screen size.
Note: The responsive setting is available only if you stretch the gallery to full width.     Product images: 

Image placement: Place the image above or beside the product text. Image resizing: Select a resizing option:
            
Crop: Crops all images to the same size. Fit: Maintains the images' aspect ratios.   Image ratio: Select a height-to-width ratio. Image side padding: Adjust the padding to the left and right of the image. Image top and bottom padding: Adjust the padding above and below the image.   Add to Cart button: Choose where the button is placed.
Note: If the button is on the image, it replaces the Quick View button. Product info: Choose a product card layout option and customize it. Product options: Enable to limit the product option display to color choices or to limit the maximum number of colors displayed. Ribbons: Choose where to display the ribbon and customize the padding.  Tip:To stretch the Category Page to full width in, click the Category Page in the Editor, select the Stretch icon  and then click the toggle to enable it.
Designing the Category PageCustomize your Category Page to match your brand's overall design.To design the Category Page:
Click the Design tab. Follow the steps below to design every part of the Category Page.GeneralCustomize the color and opacity of your Category Page background and select a font and color for the breadcrumbs and total product count.Tip: Breadcrumbs are the links that appear at the top left of the Category Page. They show your visitors the exact page they're on.  Header sectionDesign the header of your Category Page:
Customize the fonts and colors of the header text. Make the corners of your category image rounder or more square. If the category description is on the image, customize the design using the available options. Category list & filtersSelect a background color and customize the fonts that appear in the sidebar.Product cardsEach product in the gallery is displayed inside a "card". You can customize the product card background and borders, and make the image corners rounder or more square.Product infoSelect fonts and colors for the available text.Quantity & product optionsIf you display product options and allow customers to select product quantity, customize the design using the available options.Note: To show or hide product options and quantity, go to the Display tab.RibbonsSelect a ribbon style and customize the colors, border, corners, and font. Note: To hide all ribbons, go to the Display tab. To select the ribbon placement, go to the Layout tab.Name & price dividerCustomize the width, length, and color of the divider that appears between the product name and its price.Note: To show or hide the name & price divider line, go to the Display tab.Add to Cart buttonCustomize the Add to Cart button style, colors, border, corners, and text. Choose whether you want to display the "Add to Cart" button as text, text and an icon, or only an icon.Note: To display or hide the button, go to the Display tab.Load More/Previous Buttons or PaginationIf you chose the Load More button or Pagination option in the Settings tab (as a way to let customers view more products), you can customize the look of the button or page numbers.Quick View buttonQuick view allows customers to view product details in a popup, without leaving your shop page.In the design tab, you can design the Quick View button. Important: If the Add to Cart button is enabled and placed on top of the product image, the Quick View button won't be displayed. Learn how to enable or disable Quick View and customize the Quick View window.Editing the text on the Category PageIn the Text tab, edit any of the available text so it matches your voice and tone. You can personalize the text appearing on buttons across the page (e.g. add to cart, pre-order) and the message that appears when a product is out of stock. Tip:If you choose to hide elements, the option to edit the text in that element doesn't appear.To edit text:
Click the Text tab. Edit any of the available text options.Customizing the sidebarThe category sidebar has 2 components: the category list and filters. You can display one or both, or hide the sidebar entirely. Important:The category list does not appear on mobile. Adding your categories to the site menu is the best way to give your customers easy access to them.Any active category you create automatically appears in the category list, but you can hide categories you don't want to display. You can also reorder the categories you do decide to show.These are the filters your customers can use to find the products they need. Your site's filters automatically adjust according to the category a site visitor is viewing.Tip:You can use category filters to allow customers to select subcategories. For example, when viewing the womenswear category, customers can select any filter that has products in other categories and womenswear.To customize the sidebar:
Click the List tab. Customize any of the following list options:
    
Show category list: Click the Show category list toggle to show or hide it. Show category list title: Deselect the checkbox to hide the title. If selected, you can edit the title text. How do you want to manage this list:

Sync all my categories automatically: Every active category is automatically displayed in the order it was added. Customize & reorder the list manually: Gives you the option of hiding certain categories and reordering the list.
            
Deselect the checkboxes next to the categories you want to hide. Reorder the categories using drag and drop.       Click the Filters tab. Customize any of the following filter options:
    
Show filters: Click the toggle to show or hide all filters.  Show filters title: Deselect the checkbox to hide the "Filter by" title.  Filters title: If you display the title, you can edit the title text. Let customers filter by: Hover over a filter and click the More Actions icon  to hide or edit it.
        
Category: You can hide the category filter or click Edit to select which categories to display. Price: You can hide the price filter or click Edit to edit the filter title. Product Options: Hide the product options filter. Tip: If you display product options, relevant options are displayed for each page. Discount: You can hide or delete this option. If you display this option, you can select categories to which sales are applied.    Customizing the sorting optionsYour Category Page comes with sorting options to make it easier for customers to view relevant products. You can disable any of the options or hide sorting completely. To customize product sorting:
Click the Sorting tab. Select the order your products are displayed from the Order products by drop-down. If you allow customers to sort products, they can override this setting.
Note: By default, the order of products in a category depends on the order you set in the dashboard.  Customize any of the following settings:
    
Click the Show "Sort by" options toggle to enable or disable it.   Edit the "Sort by" label. Deselect the checkbox next to any sorting option you want to hide.   Customizing the Quick ViewThe quick view option lets customers view product details in a pop-up without leaving your category page. Important: If the Add to Cart button is enabled and placed on top of the product image, the Quick View button won't be displayed. Learn how to enable or disable Quick View and customize it.