Wix Stores: Customizing the Studio Two Category Page

1. Click the Data settings icon .

2. Drag the Products per page slider or enter a number to choose how many products show on the page.

3. (Optional) Click Manage Data to add and manage your products and categories in your dashboard.

Tip: Learn more about managing products and categories.

1. Click the Padding & Behavior icon .
2. Enter the padding you want for the page.

1. Click the All design options icon .
2. Configure your design options in the inspector panel.

1. Right-click an element on the page.
2. Click Connect to Data.
3. Connect the element to a data source.

1. Select the breadcrumbs on the page.
2. Click the Settings tab in the inspector panel.
3. Open Accessibility and enter a description for screen readers in the Accessible name field.
4. (Optional) Click the Design tab and select Category Breadcrumbs or Breadcrumbs under Choose what to design to style the whole element or only the breadcrumb items.

1. Select the category name on the page.
2. Click the Design tab in the inspector panel and customize the text in the Typography section, such as the font and size.
3. (Optional) Click the Settings tab to see the data the text is connected to.

1. Select the category menu on the page.
2. Click the Settings tab in the inspector panel.
3. Choose how the menu behaves:
   • When there are no subcategories: Select Show same-level categories or Hide the category menu.
   • Show "Shop All" button: Enable the toggle to show a button that displays all products.
   • Overflow behavior: Select how the menu behaves when the categories don't fit, such as Scroll.
4. (Optional) Click the Design tab, select Category Menu or Menu items under Choose what to design, then select Regular, Hover or Selected to style that state.
5. (Optional) Click Change Layout on the action bar and select Horizontal or Vertical from the Orientation dropdown.

1. Select the filters button on the page.

2. Click the Settings tab in the inspector panel.

3. Customize the filter panel:

   • Panel title: Enter the title that appears at the top of the filter panel.

   • Panel opens from: Select where the filter panel opens from, such as Left.

1. Select the product counter on the page.
2. Click the Design tab in the inspector panel and customize the text in the Typography section, such as the font and size.
3. (Optional) Click the Settings tab, open Accessibility and enter a description for screen readers in the Accessible name field.

Applied Filters shows the filters a customer selected, along with a Clear All button.

1. Select the applied filters on the page.

2. Click the Design tab in the inspector panel.

3. Select Applied Filters, Filter Tag or Clear All under Choose what to design to style that part.

4. (Optional) Click the Settings tab, open Accessibility and enter a description for screen readers in the Accessible name field.

1. Select the sort dropdown on the page.
2. Click Customize Icon on the action bar.
3. Select Static or Animated to choose the icon type.
4. (Optional) Click Replace to choose a different icon.
5. (Optional) Click the Settings tab in the inspector panel, open Accessibility and enter a description for screen readers in the Accessible name field.

The product list shows the products in the selected category.

1. Select the product list on the page.
2. Click Change Layout on the action bar.
3. Choose how the products display:
   • Choose layout: Select Cards, List, Slider or Advanced grid.
   • Set items per row: Enable the toggle and enter the number of products you want in each row.
4. (Optional) Click the mode dropdown at the top of the list and select Regular mode or No Items to design how the list looks with or without products.

The product image links to its product page.

1. Select a product image on the page.
2. Click the Settings tab in the inspector panel.
3. Choose how the image works:
   • Image: Shows the product's main media.
   • Alt text: Shows the product data used as the image's alt text.
   • Display mode: Select Fill, Fit or Keep image ratio.
   • Link: Shows the link to the product page.
4. (Optional) Click Replace Image or Mask on the action bar to change the image or its shape.

1. Select the ribbons on a product.
2. Click the Design tab in the inspector panel.
3. Select the part you want to style under Choose what to design: Ribbons, Primary Ribbon or Additional Ribbon.

1. Select the product name on the page.

2. Click the Design tab in the inspector panel and customize the text in the Typography section, such as the font and size.

1. Select the price on a product.
2. Click the Settings tab in the inspector panel.
3. Choose how to display the price in the Properties section:
   • Original Price First: Enable the toggle to show the price before the sale first.
   • From Label: Enter the text that appears before the price when a product's price varies.
4. (Optional) Click the mode dropdown at the top of the element and select Regular mode, On Sale, Price Range or Full Price to design that version of the price.

1. Scroll to the bottom of the product list and select the Load More button.
2. Click the Settings tab in the inspector panel.
3. Customize the button in the Properties section:
   • Text: Enter the text that appears on the button.
   • Links to: Click Choose a link to set where the button leads.
   • Disabled: Enable the toggle to disable the button.
4. (Optional) Click the Design tab and select Button or Text under Choose what to design to style that part.