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
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
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.
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.
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:
Comments will be approved before showing up.