Help Center
    Help Center
  1. Managing your business
  2. Business solutions & apps
  3. Wix Stores
  4. Designing your store
    5. Wix Stores: Customizing the Category Page

Wix Stores: Customizing the Category Page

9 min read
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. 
In this article, learn how to:
Tips:
  • 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.

Adjusting the Category Page settings

In the Settings tab, select which elements to show on the Category Page, and what happens when customers hover over product images. You can also decide how visitors view more products when they get to the end of the page (e.g. clicking a "Load More" button).

To select Category Page settings:

  1. Click the Settings tab.
  2. Customize the following settings:
    • Select the checkboxes next to elements you want to show.
    • Choose what happens to your product images when visitors hover over them.
    • Select how customers view additional products when they get to the end of the page:
      • Load More button: Display a "Load More" button.
      • Pagination: Display page numbers
      • Infinite scroll: Customers can scroll without moving from page to page.
    • Add and customize an Add to Cart button.
    • Display or hide your product options.
Tips:
  • If you selected the "Load More" button or pagination 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 layout

Choose your preferred layout for both the header (if displayed) and the product gallery. 

To choose layout options:

  1. Click the Layout tab.
  2. Customize the header using the following options:
    • 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 on or below the 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.
  3.  Customize the gallery using the following options:
    • Product display style: Choose how your product looks in the gallery.
    • Product info alignment: Align the product info to the left, right, or center.
    • 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.
  4. Customize product images using the following options:
    • 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.
    • Image corner radius: Make the image corners rounder or more square.
  5. Click Ribbon Layout to customize its placement:
    • Product info: The ribbon appears below the product image, next to the description.
    • On image: The ribbon appears on the product image. Drag the sliders under Side padding and Top padding to add more space around the ribbon.
Tip:
To stretch the Category Page to full width, click the Category Page in the Editor, select the Stretch icon  and then click the toggle to enable it.

Editing the text on the Category Page

In 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:

  1. Click the Text tab.
  2. Edit any of the available text options.

Designing the Category Page

Customize your Category Page to match your brand's overall design.

To design the Category Page:

  1. Click the Design tab.
  2. Follow the steps below to design every part of the Category Page.

Customizing the sidebar

The 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.

To customize the sidebar:

  1. Click the Sidebar tab.
  2. Select what you want to customize:

Customizing the sorting options

Your 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:

  1. Click the Sorting tab.
  2. Customize any of the following settings:
    • Click the Show sorting options toggle to disable it. This means customers don't have the option to sort through your products. 
    • Edit the sorting label (e.g. "Sort by:").
    • Select which sorting option is displayed by default.
    • Deselect the checkbox next to any sorting option you want to hide. 

Customizing the quick view

The quick view option lets customers view product details in a pop-up without leaving your category page. 
Tip:
To customize the "Quick View" button, go to the Design tab.

To customize the quick view:

  1. Click the Quick View tab.
  2. Click the Show Quick View toggle to enable it. 
  3. Choose what you want to customize next:
    • Background color: Select a background color for the quick view window.
    • Border opacity & color: Select a border color and adjust the opacity.
    • Text font & color: Select a font and color for each piece of text appearing in the quick view window.
    • Add to Cart button: Edit the button's text, style, font and more. 

Did this help?

|

In This Article

  • Adjusting the Category Page settings
  • Choosing the Category Page layout
  • Editing the text on the Category Page
  • Designing the Category Page
  • Customizing the sidebar
  • Customizing the sorting options
  • Customizing the quick view

Related Content

Wix Stores: SEO for Category Pages
Wix Stores: About Product Categories
Wix Stores: Creating Product Categories

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched