🌄Photo gallery - User Guide
Add New Album
This guide will walk you through the steps to create and configure a new album in the app.
Step 1: Open the Add New Album Page
Go to Albums in the app
Click Add New Album
Step 2: Enter Album Information
Fill in the basic details for your album:
Title (required)
Enter the name of your album
Permalink
Customize the album URL slug
Album Description
Add a description using the rich text editor
Show Album Title
Toggle to display the album title on the frontend
Show Album Description
Toggle to display the description
Album Cover URL
Enter the image URL for the album cover
Sort Order
Set the display order (lower numbers appear first)
Step 3: Configure Display Settings
Control how the album layout appears:
Grid Template
Choose a layout style (e.g., Masonry)
Page Layout – Columns
Select the number of columns:
2 columns
3 columns
4 columns
Photo Hover Effect
Choose how images behave on hover
Lightbox
Select the popup style for viewing images
Step 4: Configure Photo Settings
Adjust how photos are displayed:
Main Photo – Full Size
Enable to keep original image size (no resizing)
Show Photo Title
Display photo titles on the frontend
Show Photo Link
Enable clickable links for photos
Step 5: Save Your Album
Click Save Album to create the album
Click Cancel to discard changes
Best Practices
Use clear, descriptive titles for better organization
Optimize image sizes for faster loading
Use consistent layouts across albums for a better user experience
Enable Lightbox for a more interactive gallery experience
Edit an album:
From the Albums page, click the pen icon on an album item you want to edit.
Upload photo
1. Open the Upload Photos tab
Go to Albums and open the album you want to edit.
Select Upload Photos.
2. Add photos
Click Add Photo to upload one image.
Click Bulk Upload to upload multiple images at once.
3. Organize photo order
Use the Sort Order column to check each image position.
Click Sort Photos to reorder photos quickly.
4. Find and filter photos
Use Show entries to change how many rows are displayed.
Use the Search box to find a specific photo by name/title.
5. Manage existing photos
Use the checkbox at the left to select one or multiple photos.
Click the edit icon in Action to update a photo.
Click the delete icon in Action to remove a photo.
6. Control visibility
Check the Status column.
Active means the photo is enabled and available.
7. Push updates to Shopify
After confirming changes, click Sync to Shopify to publish updates.
Tips
Keep Sort Order clean and sequential for a better storefront display.
Use search before editing to avoid changing the wrong photo.
Sync after every important update to keep Shopify data current.
Settings
This guide covers all configurable settings available in the Albums App settings panel. Use these options to tailor the look, layout, and behavior of your Albums page to match your store's branding and customer experience goals.
1. Albums Page Layout
The Albums Page Layout section controls how your albums grid is displayed to visitors. You can choose between different page widths and column configurations to best suit your content.
1.1 Page Layout
The Page Layout option determines whether the albums page spans the full browser width or is contained within a fixed-width box.
• Full Width — The albums page stretches edge-to-edge across the entire viewport. Ideal for an immersive, modern storefront feel.
• Boxed — The albums page content is constrained within a centered container. Useful for stores that prefer a more traditional, structured layout.
📝 Note: Full Width is selected by default. Changing to Boxed may affect how your header and footer elements align with the albums content.
1.2 Number of Columns
This option controls how many album columns are displayed in the grid on the albums listing page. Choose a layout that best showcases your albums based on the number of albums you have and the style of your store.
• 2 columns — Best for stores with large album cover images or fewer albums.
• 3 columns — The default layout — a balanced choice for most stores.
• 4 columns — Suitable for stores with many albums who want a compact, magazine-style grid.
• 2/3 + 1/3 layout — An asymmetric two-panel layout where the left column takes up two-thirds of the width and the right takes one-third.
• 1/3 + 2/3 layout — The reverse of the above — a narrower left column with a wider right column.
💡 Tip: For stores with five or more albums, the 3-column or 4-column options provide a clean, browsable grid. Use asymmetric layouts (2/3 + 1/3 or 1/3 + 2/3) when you want to feature one album or category more prominently.
1.3 Show Original Image Size for Thumbnail
This toggle controls the image resolution used when rendering album thumbnails on the albums listing page.
• Enabled (On) — Thumbnails are rendered at the original uploaded image resolution. This produces sharper, higher-quality images but may increase page load time.
• Disabled (Off) — Thumbnails use a compressed, optimized version of the image. This significantly improves page loading speed, especially on mobile devices.
📝 Note: This toggle is enabled by default. If you notice slow loading times on your albums page, consider disabling this option to improve performance.
Setting
Default Value
Description
Page Layout
Full Width
Controls whether the albums page spans full width or is contained in a box.
Number of Columns
3 columns
Determines the column count of the albums grid.
Show Original Image Size
Enabled
Toggles between original resolution and optimized thumbnails.
2. Albums Page Header
The Albums Page Header section lets you customize the visual appearance of the header displayed at the top of your albums page, including the page title, background color, text styling, and a descriptive paragraph.
2.1 Page Title
Enter the title text that will be displayed as the heading of your albums page. By default, this is set to "Albums".
💡 Tip: Customize the page title to reflect your brand's language — for example, "Our Collections", "Lookbooks", or "Photo Galleries" — to better communicate your content to visitors.
2.2 Header Background Color
This field accepts a hex color code to set the background color of the albums page header section. The default value is #E4E4E4 (a light gray).
To change the color, click the color swatch on the left side of the input field to open the color picker, or type a valid hex color code directly into the field (e.g., #FFFFFF for white, #1A56DB for blue).
2.3 Title Color
This field sets the color of the page title text. The default value is #333333 (dark charcoal gray), which ensures strong readability against light backgrounds.
📝 Note: Ensure sufficient contrast between the Title Color and the Header Background Color for accessibility compliance. A contrast ratio of at least 4.5:1 is recommended for normal text.
2.4 Title Font Size (px)
This numeric field controls the font size of the page title in pixels. The default value is 48px. You can increase or decrease this value using the up/down arrows on the right side of the input field, or by typing a number directly.
💡 Tip: For mobile responsiveness, keep the title font size between 32px and 64px. Extremely large values may cause text overflow on smaller screens.
2.5 Description
The rich-text description editor allows you to add a paragraph of text beneath the page title in the header. This is useful for providing context about your albums collection or a welcome message.
The editor supports standard text formatting options including:
• Paragraph styles — Normal, headings, and other text block styles.
• Font family — Choose from available system fonts.
• Font size — Adjust the size of selected text.
• Undo / Redo — Revert or reapply recent changes.
• Additional formatting — Access extended formatting options via the ••• menu on the right.
📝 Note: Leaving the description field empty is perfectly fine. The header will simply display the title and background color without additional body text.
Setting
Default Value
Description
Page Title
Albums
The heading text shown at the top of the albums page.
Header Background Color
#E4E4E4
The background color of the page header section.
Title Color
#333333
The text color of the page title.
Title Font Size
48px
The font size of the page title in pixels.
Description
(empty)
Optional descriptive text displayed below the title.
3. Photos Settings
The Photos Settings section controls how individual photos are loaded and paginated within an album.
3.1 Photos Per Page
This option determines how many photos are displayed per page (or per load) when a visitor views an album. Select the number that best balances performance and visual richness for your store.
• 10 photos — Fastest load time; best for albums with high-resolution images or limited bandwidth.
• 15 photos — A light option that keeps pages concise.
• 20 photos — A balanced choice for most stores.
• 25 photos — The default value — suitable for stores with moderate image sizes.
• 50 photos — Shows more photos upfront but may increase initial load time.
💡 Tip: If your album photos are large files (over 1MB each), consider choosing a lower per-page count (10 or 15) to prevent slow load times for visitors on mobile connections.
3.2 Load More Button Text
This field defines the label text displayed on the button visitors click to load additional photos in an album. The default text is "Load more".
You can customize this label to match your brand's tone — for example: "Show More Photos", "See More", or "View All".
Setting
Default Value
Description
Photos Per Page
25 photos
Number of photos displayed per page load in an album.
Load More Button Text
Load more
Label text for the pagination button at the bottom of an album.
4. Lookbook Settings
The Lookbook Settings section configures the behavior and appearance of the lookbook view — an interactive overlay that allows visitors to browse album photos and discover tagged products.
4.1 Show Sidebar
This toggle controls whether a product sidebar is displayed alongside photos when a visitor opens a photo in the lookbook view.
• Enabled (On) — A sidebar appears next to the photo, listing products that have been tagged in that image. Visitors can click product tags to view or purchase items directly.
• Disabled (Off) — The sidebar is hidden, and the photo is shown in a cleaner, full-focus layout without product listings.
📝 Note: The Show Sidebar toggle is enabled by default. If you do not use product tagging in your albums, disabling the sidebar provides a cleaner visual experience.
4.2 Popup Background Color
This field sets the background color of the lookbook popup (lightbox) overlay that appears when a visitor clicks on a photo. The default value is #FFFFFF (white).
Enter a valid hex color code to customize this color. A white or light neutral background is recommended for optimal photo visibility.
4.3 'Shop This Look' Text
This field allows you to customize the label on the call-to-action button displayed within the lookbook popup. The default text is "SHOP THIS LOOK" (displayed in uppercase).
You may change this to any preferred call-to-action phrase, for example: "View Products", "Explore the Look", or "Buy Now".
💡 Tip: Use action-oriented, concise language for the 'Shop This Look' button. Short phrases (2–4 words) tend to perform better as calls to action.
Setting
Default Value
Description
Show Sidebar
Enabled
Toggles the product sidebar in lookbook view on or off.
Popup Background Color
#FFFFFF
Background color of the lookbook photo popup overlay.
'Shop This Look' Text
SHOP THIS LOOK
Call-to-action button label inside the lookbook popup.
5. Developer Settings
The Developer section provides advanced configuration options intended for developers or technically experienced merchants who need to extend or customize the app's behavior.
5.1 Custom CSS Code
This text area accepts custom CSS code that will be injected into the albums page. Use this field to override default styles or apply additional visual customizations beyond what the standard settings offer.
Example — the following CSS code is pre-filled by default to hide the download button and icon from the lightbox:
.lcl_icon.lcl_right_icon.lcl_download, a#lg-download { display: none !important; }
📝 Note: Only enter valid CSS in this field. Incorrect CSS syntax may affect the appearance of your albums page. Always test changes in a staging environment before applying to your live store.
5.2 Include jQuery Library
This toggle controls whether the app loads the jQuery JavaScript library on your store's albums page.
• Enabled (On) — jQuery is loaded by the app. Enable this if your Shopify theme does not already include jQuery and you encounter JavaScript errors on the albums page.
• Disabled (Off) — jQuery is not loaded by the app, preventing duplicate library loading if your theme already includes it.
📝 Note: Most modern Shopify themes include jQuery by default. Check your theme documentation before enabling this option to avoid loading jQuery twice, which can cause conflicts.
Setting
Default Value
Description
Custom CSS Code
(see default)
Accepts custom CSS to override app styles or add visual customizations.
Include jQuery Library
Enabled
Loads jQuery if the current theme does not already include it.
Show gallery albums
Step 1 – Enable App Embed
Before the gallery appears on your storefront, you must activate the app embed.
Option A – From the app dashboard:
Open Zify Photo Gallery in your Shopify admin.
On the Get Started panel, find 1. Enable app embeds.
Click Activate app embed — the Theme Editor opens automatically.
Option B – From the Theme Editor:
Go to Online Store > Themes > Customize.
Click the App embeds icon (grid icon) in the left sidebar.
Search for Zify Gallery and toggle it ON.
Click Save in the top-right corner.
The gallery is now active on your theme.
Step 2 – View the Default Gallery Page
Once enabled, your albums are available at:
https://your-store.myshopify.com/apps/gallery/albums
No additional setup is required for this default URL.
Step 3 – Embed Gallery on a Specific Page (Optional)
To display the gallery on a custom storefront page:
Go to Online Store > Pages in your Shopify admin.
Open an existing page or click Add page.
In the Content field, paste the shortcode:
[zifyapp-gallery]Click Save.
The gallery will now render on that page automatically.
Examples:
Albums Collection - 2 columns: https://zifyapp-demo-03.myshopify.com/pages/albums-collection-2-columns
Albums Collection - 3 columns: https://zifyapp-demo-03.myshopify.com/pages/albums-collection-3-columns
Albums Collection - 4 columns: https://zifyapp-demo-03.myshopify.com/pages/albums-collection-4-columns
Albums Collection - 1/3 + 2/3 columns: https://zifyapp-demo-03.myshopify.com/pages/albums-collection-1-3-2-3-columns
Albums Collection - 2/3 + 1/3 columns: https://zifyapp-demo-03.myshopify.com/pages/albums-collection-2-3-1-3-columns
If your theme is OS 2.0, you can add app section into anywhere
Show an album
Each album has a default public URL and can also be embedded anywhere on your store using a shortcode or HTML code.
Default Album Page
Your album is automatically available at its own page. To view it, open the album and click View Album (top-right corner).
Embed the Album Anywhere (Optional)
To display the album on a product page, blog post, page, or any section:
Open the album and go to the Embedded Code tab.
Choose one of the two embed options:
Shortcode
[zify-album-1]
Pasting into a Shopify Page content field
HTML code
<div class="zify-album" id="zify-album-1"></div>
Pasting into a theme section, custom HTML block, or blog post HTML editor
Click Copy next to the code you need.
Paste it into the desired location on your store.
Tips
Each album has its own unique ID (e.g.,
zify-album-1). Make sure you copy the code from the correct album.Use the shortcode for standard pages; use the HTML code for advanced theme editing.
After pasting, save the page/section and preview your storefront to confirm the album renders correctly.
If your theme is OS 2.0, you can add app section
Show Albums Collection Slider
Use embedded code below
Embed albums collection slider into a page, see screenshot below
Embed albums collection slider into home page.
From your store admin, go to Online Store > Themes
Click Customize button from your current theme.
Add section > Custom content or Custom Liquid (this depends your custom theme)
Paste the embedded code and save.
If your theme is OS 2.0, you can add app section
Uninstall app
From your Shopify admin, go to Settings > Apps.
Find Zify Photo Gallery in the installed apps list.
Click the ⋯ (three-dot) menu on the right.
Click Uninstall (shown in red).
Confirm the uninstall when prompted.
Note: Uninstalling the app will remove it from your store and disable all galleries on your storefront. Your album data may be permanently deleted. Make sure to back up any important content before proceeding.
Last updated