Wix Stores: Setting How Customers View More Products in Your Product Gallery

3 min read
By default, when there are a large number of products in a Product Gallery, customers can click a Load More button to view additional products.
You can replace your Product Gallery's "Load More" button with pagination or infinite scroll.
Screenshot of the bottom of a store page in a Wix site with the Load More button displayed
In this article, learn more about:
Tip:
Adjusting the number of rows and columns in the gallery affects how many products are displayed per page. Go to the Layout tab in the editor settings to adjust the rows and columns.

Setting up the "Load More" button

You can customize the colors, font, and shape of the "Load More" button to match your site's design. 

To enable and customize the "Load More" button:

  1. Go to your editor.
  2. Go to the page with the Product Gallery you want to customize. 
  3. Click the gallery on your page. 
  4. Click Settings .
  5. Click the Settings tab.
  6. Select Scroll Behavior.
  7. Select Load More button.
  8. Edit the button text:
    1. Click the Text tab. 
    2. Edit the "Load More" button text.
    3. Edit the "Load Previous" button text.
  9. Edit the button design:
    1. Click the Design tab. 
    2. Click Load More/Previous button.
    3. Choose what you want to customize:
      • Text font and color: Select a text font and color.
      • Style: Select a button style.
      • Background opacity and color: Select the background color and change the opacity.
      • Border width (px) and color: Select the border color and change the border width.
      • Corner Radius (px): Make the button corners rounder (higher number) or more square (lower number).
      • Button Width: Change the width of the button.

Setting up pagination

Add pagination and customize the look. If your store has a lot of pages, you can add arrows that direct to the first and last page
Screenshot of the bottom of a store page in a Wix site with the pagination visible

To enable and customize pagination:

  1. Go to your editor.
  2. Go to the page with the Product Gallery you want to customize. 
  3. Click the Product Gallery on your page. 
  4. Click Settings .
  5. Click the Settings tab.
  6. Click Scroll Behavior.
  7. Select Pagination.
  8. Customize the layout:  
    1. Click the Layout tab.
    2. Select Pagination.
    3. Select a pagination style.
    4. Click the First/Last arrows toggle to add a set of arrows that direct to the first and last page. 
    5. Align the pagination left, right, or center. 
  9. Customize the pagination font:
    1. Click the Design tab. 
    2. Click Pagination
    3. Select a font for the arrows and page numbers.
    4. Select a color for the page the customer is viewing.

Setting up infinite scroll

With infinite scroll, customers can keep scrolling through all your product without clicking to move from page to page. 

To enable infinite scroll:

  1. Go to your editor.
  2. Go to the page with the Product Gallery you want to customize. 
  3. Click the Product Gallery on your page. 
  4. Click Settings .
  5. Click the Settings tab.
  6. Click Scroll Behavior.
  7. Select Infinite scroll.

FAQs

Did this help?

|