---
title: Shop pages, product cards and product pages
description: The shop and collection pages, the filters, product cards and the product page.
url: "https://wpruby.com/knowledgebase/gemelune-catalog-and-filters/"
updated: "2026-11-04"
category: WPRuby Themes / Gemelune
---

# Shop pages, product cards and product pages

Table of Contents

 [Toggle](#)

- [Shop and collection pages](#Shop_and_collection_pages)
- [Filters](#Filters)
- [Product cards](#Product_cards)
- [Product pages](#Product_pages)
- [Cart and checkout](#Cart_and_checkout)

## Shop and collection pages

The shop, category and search pages share one layout: the collection title and introduction, then the filters beside the products, with the result count and sorting above them. On a category with an image, the image sits beside the title like a collection opening: add it under **Products → Categories → edit a category → Thumbnail**.

To edit the layout, go to **Appearance → Editor → Templates** and open **Product Catalog** (or **Products by Category**, **Product Search Results** and so on).

[![A Gemelune collection page with filters and product cards](https://cdn.wpruby.com/wp-content/uploads/2026/11/04092306/gemelune-docs-catalog-filters.jpg)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04092306/gemelune-docs-catalog-filters.jpg)

## Filters

Filters are WooCommerce's own **Product Filters** block, so they work with WooCommerce's URLs, caching and extensions. The column is titled *Refine* and has:

- **Active filters** as removable chips
- **Category**
- **Price**
- **Every product attribute your pieces use**: metal, gemstone, ring size, length, style and so on
- **Availability**

Short choices, such as ring sizes and lengths, show as chips; the rest as a checklist. On phones the filters open in a drawer.

[![The filter drawer open on a phone](https://cdn.wpruby.com/wp-content/uploads/2026/11/04092308/gemelune-docs-catalog-filters-phone.jpg)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04092308/gemelune-docs-catalog-filters-phone.jpg)

## Product cards

Cards show the portrait product image, the [badges](https://wpruby.com/knowledgebase/gemelune-products/#badges), a [second image on hover](https://wpruby.com/knowledgebase/gemelune-products/#second-image-on-hover), the name, the price and up to five [metal swatches](https://wpruby.com/knowledgebase/gemelune-products/#on-product-cards).

## Product pages

A product page has:

- **A large gallery** with zoom and a lightbox
- **The purchase column**: collection, title, rating, price, short description, the options ([metal swatches and size buttons](https://wpruby.com/knowledgebase/gemelune-products/#on-the-product-page), with the size guide) and **Add to cart**, with your delivery link under it
- **The details** in accordions that work without JavaScript: the description, specifications (the product's attributes, weight and dimensions), and care and delivery from your [information pages](https://wpruby.com/knowledgebase/gemelune-information-pages/)
- **Customer reviews** and **related pieces**

To change the layout, go to **Appearance → Editor → Templates → Single Product**.

## Cart and checkout

The cart, mini cart, checkout and My Account use WooCommerce's blocks with Gemelune's styling. Checkout has its own quiet header and footer, with nothing that leads away from the order. Nothing in the theme changes how payment, shipping or orders work.