Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Galapagos Products Pages

Galapagos offers a variety of eye-catching features to help your products shine. Quick View, Product Image Zoom, and on-hover effects give your customers a sleek, interactive online shopping experience.

The Products Page is the landing page where visitors browse through your products. Clicking on a product opens the individual product item with its own URL. To learn how to add a Products Page and product items, visit Adding products to your store.

This page details Galapagos special Products Page features.

Tips: To create an eCommerce store on your site, add a Products Page in the Pages panel. On the Products Page, add new products by clicking the + icon.

Product Grid

The Products Page displays the first image for each product in a sleek grid format.

Use the Product Grid section of the Style Editor to choose the layout:

  • Product Grid Style: Fit - All the products display at the same size and shape, for a clean, minimalist look.
  • Product Grid Style: Featured - The first product displays larger, to make it the most prominent product on the page. All other thumbnails display at the same size and shape.
  • Product Grid Style: Organic - The thumbnails display in a mixture of sizes, giving the page a dynamic feel.

For any layout style, use the Product Size and Product Spacing tweaks to adjust how the grid looks. To make the product images touch, reduce the spacing to 0% by manually typing 0 into the tweak's percentage field.

The landing page holds up to 50 items at a time. Previous and Next arrows help customers navigate through all pages of results. 

pagination-more-than-50.png

Quick View

With Galapagos, you can display a Quick View button on hover for all of the products on your Products Page. When customers click the button, they open a lightbox with product details, images, and a link to View Full Item. This allows customers to browse your products without navigating away from the Products Page.

Note: Quick View won't display in mobile.

To enable Quick View, open Page Settings by hovering over that page in the Pages panel and clicking the

Click the Features tab and check Enable Quick View.

Once enabled, new sections appear in the Style Editor. Use the Products: Quick View Button section to style the button’s color, font, position, and style (bar, floating, or docked).

Use the Products: Quick View Lightbox section to style the lightbox:

  • Select Excerpt Display: Truncate to display the product description.
  • Overlay Color adds a color filter to the Products Page behind the lightbox.
  • Use the Controls tweaks to adjust the navigation and close button that appear outside the lightbox.

You can also enable Quick View for Summary Blocks and Product Blocks. Learn more at Product Quick View.

Note: Quick View can also feature image zoom.

Product name and price

Galapagos has multiple ways to display the product name and price for each item on the main Products Page.

To display product information over the image without a color filter, use the Product Info Style tweaks in the Product Grid section of the Style Editor to select the information style: Simple, Tag, Corner, or Box.

Next, use the Product Info tweak to determine what information displays:

  • Price, title on hover - Price displays. On hover, it’s replaced by the title.
  • Title, price on hover - Title displays. On hover, it’s replaced by the price.
  • Price and title - Price and title display.
  • Price - Price displays.
  • Title - Title displays.
  • Price on hover - Price displays on hover.
  • Title on hover - Title displays on hover.
  • None - Neither price nor title display. This also hides any Sale or Sold Out labels.  

To display product details over a semi-transparent or opaque color overlay, select Product Info Style: Overlay. The name and price display in the “Simple” style on hover.

Use the Product Overlay Color tweak to adjust the color filter that displays over the image. To learn how to adjust the color and opacity, visit Changing colors.

For all styles, use the Product Accent Color and Product Info Font tweaks to change the product details’ color and font.

Alternative image on hover

In the product grid, you can display a secondary image on hover. This is great way to show off a special feature, alternate color, or key detail for each product.

To enable this feature:

  1. Ensure you’ve added at least two images in the product editor.
  2. In the Product Grid section of the Style Editor, select any Product Info Style except Overlay. For example, you could select Product Info Style: Simple.
  3. Check Show Alt Image on Hover.
  4. If you don’t want product details to display, select Product Info: None.
Note: The Show Alt Image on Hover tweak won’t appear if you’ve selected Product Info Style: Overlay.

The second image in the product editor shows on hover. Drag and drop the images in the product editor to determine the image order.

Category navigation

A category navigation at the top of Galapagos Products Pages displays links to each product category. Clicking a link filters out every product except the ones in that category.

To learn how to add categories to your product items, visit Organizing products.

If your Main Navigation style is set to Nav Style: Simple, a box displays around the category navigation.

Product items

Clicking on a product opens the individual product item with its own URL. When you’re on an item page, the Product Item section appears in the Style Editor. Adjusting these tweaks affects all product item pages.

To hide the Share Button, check Hide Product Share Button. To learn more, visit Adding Share buttons.

If you add additional information to a product, it displays a More Info link, which scrolls to the Additional Info area.

Image zoom

When image zoom is enabled, customers who hover over the image on product item pages or in Quick View will see a closeup of that image.

Enable and style this feature with the tweaks in the Products: Image Zoom section of the Style Editor. Learn more at Product Image Zoom.

Mobile

On mobile, product images take the same Product Grid Style format as the desktop version. Learn more at Galapagos mobile styles.

m-prods-galapagos.png

Note: For general information about styling your site, visit Structure and style.

Next steps

Learn about Galapagos Blog Pages.

Was this article helpful?
1 out of 9 found this helpful
Galapagos Products Pages