Gallery

1. Add to page

There’re several ways to add a gallery to your page. You can follow one way below

2. Auto create/add

• In app galleries list, navigate the gallery that you want to show in your page and click Publish button.

• Choose existing or create new page

• Choose position

• Click Save

3. Using embed code

• In app galleries list, navigate the gallery that you want to show in your page and click Publish button.

• Click Embed code

• Click Copy code

• Navigate to Online store > Pages

• Follow this to paste code

4. Use page template

4.1 Create new page template​

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Open the drop-down menu at the top of the page.
4. Use the dropdown menu to select a template. Click + Create template.
5. Give your template a unique name (for example gallery)
6. Using the dropdown menu, select which existing template you want to base your new template on.
7. Click Create template.

4.2 Add section to page templa

4.2.1. Click Add section, then Capti Gallery

4.2.2 Fill your gallery/album id then click save to preview your gallery

5. Apply a new template to a page

• From your Shopify admin, go to Online Store > Pages.
• Click the title of the gallery page.
• In the Online store section, use the dropdown menu to select a new theme template to apply to the selected page.
• Click Save.

6. Gallery list page

This is overview page. Here you can edit, clone, delete, import, export or publish a gallery.

7. Export gallery

To export gallery, click … button, then choose Export gallery

Save export Json file.

8. Import gallery

You can use exported gallery Json file and import to another store.

9. Add new gallery​

• From gallery list page, click Add new Gallery
• Name your gallery
• Upload images
• Press Save

10. Images

Here you can upload new images, add images from Shopify files or Product to your gallery.

11. Gallery settings

You can access gallery settings by clicking Settings when edit gallery.

12. Gallery type​

• Grid a regular set of equal rows and columns grid of images that displays every image as a square
• Masonry placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall

You don’t have to calculate and crop image in some fixed with & height. Capti Gallery do it for you.

• Stack placing elements near each other
• Justified style like Flickr images
• Carousel Put image in carousel type

12.1 Hover effect​

Set global effect for all images in gallery. You can set different effect for single image in image settings popup.

12.2 Appear effect​

This will hide all gallery images, then show images when user scroll.

13. Enable popup​

Here you can:

• Choose effect for popup
• Change background opacity
• Show/hide caption
• If you choose design type with description, you can choose to add description text to the caption
• Limit display item (with config text)

14. Images​

14.1 Image order​

Change order of images in gallery:

• Normal: follow upload order
• Reverse: reverse upload order
• Random: Image will display random every time user visit gallery page.

14.2 Thumbnail size​

Images in gallery will be resized for fast loading. Here you can manual set thumbnail width for your images. Popup will use original image that you upload.

Option to crop image in particular size.

14.3 Lazy load​

Lazy load is enabled by default. Check if you want to disable lazy load.

15 Gallery design​

Here you can modify how images are displayed.

• Choose type
• Simple title
• Title & description
• Title & button
• Button
• Image: with this type, user can see other image when hover over an image.
• Disable (no hover layer)
• Custom HTML
• Custom for item
• Custom for hover layer

16. Gallery build page