Product Galleries are the way to showcase the products you offer. You can add a gallery to any site page and then decide what to display: All your products or one specific category.
Depending on your preferences, you can choose between a Grid gallery or a Slider gallery, like the one below:
In this article, learn more about:
Displaying a category in a Grid Gallery
A Grid Product Gallery is a great way to display a large number of products. Products appear in a grid with multiple columns and rows.
To add a Grid Gallery and select a category to display:
- Go to the page to which you want to add a gallery.
- Open the Add Elements panel in your Editor:
- Wix Editor: Click Add Elements
on the left side of the Editor. - Editor X: Click Add Elements
at the top of Editor X.
- Click Store.
- Click Grid Product Gallery.
- Drag the Grid Gallery to the relevant location on your site page.
- Click the gallery in the Editor.
- Click Choose Category.
- Select an option:
- To display all products: Make sure the All Products category is selected.
- To display one category: Click to select a category.
Customizing a Grid Gallery
The gallery is the first part of your store that customers see. Customize it to make sure it makes a great impression.
To customize a Grid Gallery:
- Go to the page in the Editor containing the gallery you want to customize.
- Click the Product Gallery.
- Click the Settings icon
. - Choose what you want to do:
Click the Layout tab and customize the gallery using the following options:
- Stretch to full width: Click the toggle to stretched the gallery across the browser. If enabled, set the size of the gallery margins. If you enabled Stretch to full width, we recommend you select Responsive under Grid behavior in the Gallery Layout section.
- Gallery Layout: Select a display style and then choose the text alignment, the number of columns and rows, and how they're spaced.
- Image Layout: Select how the images you uploaded are displayed. Learn more
- Ribbon Layout: Select where the ribbon appears.
- Pagination: Select a pagination style and customize the arrows and alignment.
Note: Available only if you select pagination in the Settings tab.
Click the Settings tab and customize the following options:
- On Hover: Set what happens when a customer moves their mouse over a product.
- What's Displayed?: Show or hide gallery elements.
- View More Products: Select what happens when customers scroll down to the bottom of the page. Learn more
Note: On mobile, the "Load More" button is always displayed after 10 products. - Add to Cart Button: Display the button so customers can add products to the cart without going to the Product Page. If selected, customize the button:
- On hover only: Select to show the button only when customer moves the mouse over it.
- When button is clicked: Select where customer is directed after clicking the Add to Cart button.
- Show quantity: Select to allow customers to add 2 or more of a product to the cart.
- Show options: Enable the toggle to display product options such as color or size.
Click the Text tab and customize any of the following:
- Add to Cart Button text: Available if Add to Cart button is enabled.
- Out of Stock Text: Message appears when product inventory is zero.
- View More Products text: Available if you selected to display a Load More button when customers scroll down to the bottom of the page.
Click the Design tab and customize the gallery using the following options:
Tip: The options vary according to the features you enabled in the Settings and Quick View tabs.
- General: Select a background color for the gallery and customize the filter and sorting designs.
- Load more button / Pagination: Customize the option you selected in the Settings tab, "Load More Button" or "Pagination".
- Product Display: Select a background color for the products, add a border, and customize the gallery text.
- Add to Cart Button: Select a design for each view - default and hover.
- Ribbons: Select a ribbon shape, color, and font. Learn more
- Product options & quantity: Customize both types of product options: color and drop-down.
- Name & price divider: Customize the divider line between the product name and price.
- Quick View button: The Quick View button appears over the image when the mouse hovers over it. To view it, preview your site.
Enable filters to help customers find the products they're looking for.
Learn how
Let customers sort your products by price, name, or by how new they are.
Learn how
Quick View allows customers to view product details in a pop-up without leaving your shop page.
To disable Quick View:
- Click the Quick View tab.
- Click the Show Quick View toggle to disable it.
To learn how to customize Quick View, click
here.
Customizing the Grid Gallery for mobile
Make sure the gallery looks great when customers view it on a mobile device. You can adjust the design to match smaller screens and allow customers to quickly add products to the cart without navigating away from the gallery.
To customize the Grid Gallery for mobile:
- Go to the page with the Grid Gallery you want to customize.
- Click the Switch to Mobile icon
at the top of the Editor.
- Click the Grid Gallery.
- Click Settings.
- Do any of the following to customize your gallery for mobile:
- Show Add to Cart button: Enable to allow customers to add products to the cart without going to the Product Page. If enabled, click the Show quantity toggle to allow customers to add more than one of the product to the cart.
- Show product options: Enable to display product options such as sizes or colors.
- Customize the layout: Display products in 1 or 2 columns.
- Customize the design: Drag the toggles to adjust the text size for mobile.
Displaying a category in a Slider Gallery
A Slider Gallery is the perfect way to show off your products. Customers can click the navigation arrows to view more products.
To add a Slider Gallery and select a category to display:
- Go to the page to which you want to add a gallery.
- Open the Add Elements panel in your Editor:
- Wix Editor: Click Add Elements on the left side of the Editor.
- Editor X: Click Add Elements at the top of Editor X.
- Click Store.
- Click Slider Product Gallery.
- Drag the Slider Product Gallery to where you want to place it.
- Click the gallery in the Editor.
- Click Settings.
- Select an option:
- To display all products: Make sure the All Products category is selected.
- To display one category: Select a category from the Which category to display? drop-down.
Customizing a Slider Gallery
Customize a Slider Product Gallery to get the perfect look. You can personalize the gallery's text and design, choose what elements to display (e.g. an Add to Cart button) and much more.
To customize a Slider Gallery:
- Click the Slider Product Gallery.
- Click Settings.
- Choose what you want to do:
Click the Layout tab and customize the gallery using the following options:
- Stretch to full width: Click the toggle to choose how the Slider Gallery is displayed.
- Enabled: The element is stretched to the full width of your visitors' browser.
- Margins: Set the size of the margins at the edges of the gallery.
- Disabled: The element is not stretched across the browser.
- Product display style: Select how product info is displayed.
- Product info alignment: Select the text alignment: left, right, or center.
- Gallery title alignment: Title can be disabled in the Settings tab.
- Number of products: Select how the number of products displayed is determined:
- Fixed: The number of products you select is displayed to all site visitors.
- Select the number of products to show.
- Responsive: The number of products displayed adjusts according to your visitor's screen size. This setting is available only if you selected Stretch to full width above.
- Spacing between products: Adjust the size of the blank space between products.
- Product info padding: Adjust the padding to the left and right of the product info.
- Image Layout: Select how the images you uploaded are displayed. Learn more
- Ribbon Layout: Select where the ribbon appears. Learn more
Click the Settings tab and customize the following options:
- On Hover: Set what happens when a customer moves their mouse over a product.
- What's Displayed?: Show or hide gallery elements.
- Add to Cart Button: Display the button so customers can add products to the cart without going to the Product Page. If selected, customize the button:
- On hover only: Select the checkbox to show the button only when customer moves the mouse over it.
- When button is clicked: Select where customer is directed after clicking the Add to Cart button.
- Show quantity: Select to allow customers to add 2 or more of a product to the cart.
Click the Text tab and customize any of the following:
- Gallery title text: Available if the title is enabled.
- Add to Cart Button text: Available if Add to Cart button enabled.
- Out of Stock Text: Message appears when product inventory is zero.
Click the Design tab and customize the gallery using the following options:
Tip: The options vary according to the features you enabled in the Settings and Quick View tabs.
- General: Select a background color for the gallery, choose a title font and color, and customize the Slider Gallery arrows.
- Product Display: Select a background color for the products, add a border, and customize the gallery text.
- Add to Cart Button: Select a design for each view - default and hover.
- Ribbons: Select a ribbon shape, color, and font. Learn more
- Name & price divider: Customize the divider line between the product name and price.
- Quick View button: The Quick View button appears over the image when the mouse hovers over it. To view it, preview your site.
Quick View allows customers to view product details in a pop-up without leaving your shop page.
To disable Quick View:
- Click the Quick View tab.
- Click the Show Quick View toggle
to disable it.
To learn how to customize Quick View, click
here.
