How to create a gallery page

Kingdom doesn't any have in built methods for displaying custom galleries (non-product items), however, you could do a little trick, by using a real collection as your gallery.

Here's a real example of how would look like:

The process:

1. First of all, you need to create some products, give them a title, some description and of course, upload a bunch of images. This product needs to have an inventory set to 0, so that nobody purchases it by mistake.

2. Second, you need to create a special collection for all such products and manually insert these products in that collection, let's say "my-gallery-collection" (we'll take this as our handle example).

3. When you preview this collection in your browser, you'll see it work just like any other collection. In order to disable everything which is price/shop related, paste the following piece of custom CSS code at the end of the theme's main stylesheet ( /assets/css_main.scss.liquid):

#my-gallery-collection .grid-item .price, #my-gallery-collection .grid-item span.sold, #product-page[data-collection="my-gallery-collection"] #price, #product-page[data-collection="my-gallery-collection"] div[itemprop="offers"] {
    display: none;

After you save the stylehseet and review your page, you should see that everything which has to do with price related stuff will be gone. Of course, you need to replace "my-gallery-collection" from the code with your collection's own handle.

This is all!

If you want several gallery pages like this, simply add to the code you've added previously, like this:

#my-gallery-collection .grid-item .price, #my-gallery-collection .grid-item span.sold, #product-page[data-collection="my-gallery-collection"] #price, #product-page[data-collection="my-gallery-collection"] div[itemprop="offers"], #my-other-gallery-collection .grid-item .price, #my-other-gallery-collection .grid-item span.sold, #product-page[data-collection="my-other-gallery-collection"] #price, #product-page[data-collection="my-other-gallery-collection"] div[itemprop="offers"] {
    display: none;