ArtiStick Guide: Gallery Page Template

Using the Gallery Page

Gallery Page Settings

Gallery style

Crop images

Show gutter

Images per row

Enable lightbox

Colors

Layout

Width

Top/Bottom spacing

Advanced

Adding Gallery Images

Gallery Banner Settings

Show banner/Image

Darken banner image

Subheading

Width

Banner height

Top/Bottom spacing

CSS Class/Custom CSS

Mobile Layout

Using the Gallery Page

The ArtiStick theme includes a 'Gallery' page template which is a perfect way to create lookbooks, integrate your lifestyle and product shots, and beautifully present your visuals.

In order to use the 'page.gallery' template, the theme will need to be published! The templates from which you can select are limited to the templates available in your currently published theme.

If you are unable to currently publish your theme and would still like to set up the ‘page.gallery’ template, we have instructions on how to access unpublished templates here.

The 'Gallery' page template is completely configured within the theme editor. The images are added as content blocks and can be optionally linked to a URL. The gallery includes 3 style options for your layout: classic, horizontal masonry and vertical masonry, as well as an option to enable a 'lightbox' which opens a modal window to scroll through.

Custom CSS and layout options can be included in this section as well for further ArtiStickibility, and you can enable a top banner image if you'd like as well. 

When adding a Page in your Shopify Admin (Online Store > Pages), the page.gallery template is named page.gallery and can be selected under Template > Template suffix:

Once you've added your page content, you can head into the Theme Editor (Customize) > Select your Page.gallery from the drop-down page selector. Your theme editor on the left will then update with the page settings.

If you're looking to create multiple gallery pages with unique content, view our article on duplicating the page.gallery template

Gallery Page Settings

Gallery style

This gallery page template includes 3 different layout styles: Horizontal masonry, Vertical masonry, and Classic.

'Horizontal masonry' places images in optimal position based on available horizontal space:

'Vertical masonry' places images in optimal position based on available vertical space:

'Classic' places images in a standard grid-like design.

Crop images

This setting applies to the 'classic' gallery style only! If you're using images that are different in size and/or image aspect ratio, they may look unaligned with large white space in between. To make them uniform, you can enable the 'crop images' setting which will align the different sized images by cropping them.

Show gutter

When enabled, the 'show gutter' setting will add space (margin) in between your gallery 'image' content blocks. If you don't want space between the images and want them to be flush with each other, you can disable this setting.

Images per row

This setting applies to 'Vertical masonry' and 'Classic' gallery styles only! Choose from 2 - 5 images per row.

Enable Menu

You can enable a menu used to filter your images into groups.

Enable lightbox

You can choose to enable a lightbox for your gallery. When enabled, when you click on an image in the gallery a popup modal will appear which you can click through by using the arrows on your keyboard or the arrows that appear within the lightbox.

Colors

Overlay and Icons

If the 'lightbox' is enabled, or, if you have links added to your images, you can then choose the 'overlay' and 'icons' color settings for the overlay that appears when you hover over your gallery images.

Layout

The layout settings include options to adjust the spacing and width for the page.

Width

The options under the 'width' setting include: 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width.

Top/Bottom spacing

You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.

Advanced

In the advanced settings, you can add in your own CSS class and custom CSS.

More information about using the Advanced CSS feature.

In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!

The 'Custom CSS' field is where you can add in the actual CSS code.

Adding Gallery Images

The gallery images get added as content blocks through the Theme Editor (Customize) by navigating to your Gallery page, under Sections > Gallery > scroll down to Add image.

Here, you can select an image and optionally add a link for the image as well. You can also assign keywords to each image used to filter your images into groups.

If you choose to link your image, when that image is hovered over, a link icon will appear. If you have both the 'lightbox' and 'link' added, the magnifying glass icon and link icon will appear on hover!

Gallery Banner Settings

The top banner image is completely optional in the gallery page template! If you choose to enable the top banner, the settings include options for the layout and advanced CSS as well.

Show banner/Image

To enable the banner image, you'll need to check off the 'show banner' setting. The gallery page title will then display on top of the banner image. A 1800 x 800px image size is recommended.

Darken banner image

You can enable the 'darken banner image' setting to add a subtle overlay on top of you banner image. This comes in handy if you have have a 'busy' banner image as it will improve legibility!

Subheading

If you'd like to include additional text on top of the banner image, below the page title, you can enter content in the 'subheading' field.

Width

The 'width' setting can be set to 'standard' or 'wide.' If you'd like your banner image to spread full-width, you can select 'wide.' If you'd like your banner image to be contained/not full-width, you can select 'standard.'

Banner height

You can select small, medium, or large for the height of the page's banner image.

Top/Bottom spacing

You can adjust the space above and below your banner image with the 'top spacing' and 'bottom spacing' settings.

CSS Class/Custom CSS

More information about using the Advanced CSS feature.

In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!

The 'Custom CSS' field is where you can add in the actual CSS code.

Mobile Layout

When viewed on a mobile device, if your 'Gallery style' is set to 'Vertical masonry' or 'Classic', the gallery images will stack vertically:

gallery-section-mobile-1-min.gif

If your 'Gallery style' is set to 'Horizontal masonry', the gallery images will stack vertically as well. However, if there are smaller images these will still be placed based on available horizontal space. Meaning that if there's room, some smaller images could be placed beside each other: