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

4 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.
In this article, learn how to set up:
Tip:
Adjusting the number of rows and columns in the gallery affects how many products are displayed per page. Go to the Layout tab 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. Click the relevant Product Gallery in the Editor.
  2. Click the Settings icon .
  3. Click the Settings tab.
  4. Scroll down and select Load More button.
  5. (Optional) Edit the button text:
    1. Click the Text tab. 
    2. Edit the "Load More" button text.
    3. Edit the "Load Previous" button text.
  6. Click the Design tab. 
  7. Click Load More/Previous button.
  8. 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

To enable and customize pagination:

  1. Click the relevant Product Gallery in the Editor.
  2. Click the Settings icon .
  3. Click the Settings tab.
  4. Scroll down and select Pagination.
  5. Customize the layout:  
    1. Click the Layout tab.
    2. Scroll down and select a pagination style.
    3. Click the First/Last arrows toggle to add a set of arrows that direct to the first and last page.
    4. Align the pagination left, right, or center. 
  6. Customize the 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. Click the relevant Product Gallery in the Editor.
  2. Click the Settings icon .
  3. Click the Settings tab.
  4. Scroll down and select Infinite scroll.

FAQs

Did this help?

|