Fluorescent Logo
Back to the index

Gallery

The Gallery section lets you display images and captions in an Instagram feed-like way. It’s great for curating your actual social media posts while having total control over how they’re presented on your storefront.

Gallery section

This section can be used on the following page templates:

  • The home page template
  • The collection pages template

Add a gallery section to your home page

To set up the gallery section:

  1. From your theme’s “Customize” screen, choose Home page from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed

  2. Scroll down the list of home page settings until you see the Add section button.

    Add section button

  3. Choose Gallery from the list of sections, and press the Add button.

    This opens the gallery section settings.

  4. Add a Heading, Link text and Link.

    These all appear at the top of the section.

    The link is displayed at the right side of the page:

    Gallery with link enabled

    If you want to link to a external page, like an Instagram profile page, you need to type (or copy and paste) the full URL starting with https://. For example: https://instagram.com/abc123.

  5. Set the amount of Images per row using the slider.

    This corresponds with the amount of content blocks you add when using the Add content button below.

  6. Use the Add content button to content blocks to the gallery.

    For more information about adding and editing these blocks, see the Add gallery content article.

  7. Use the Back to settings (<) button to go back to all of the home page settings again. Use the drag handles to rearrange the order of your home page sections:

    Shopify section drag handles

  8. Use the Save button in the top-right corner when you are finished editing.

Add a gallery to other pages

In addition to the home page, this section can be added to the Collection pages template.

  1. From your theme’s “Customize” screen, choose Collection pages from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed

  2. Scroll down the list of available settings until you find Gallery. Click on it.

  3. Check the Enable checkbox to show this section.

  4. Add a Heading, Link text and Link.

    These all appear at the top of the section.

    The link is displayed on the right side of the page:

    Gallery with link enabled

    If you want to link to a external page, like an Instagram profile page, you need to type (or copy and paste) the full URL starting with https://. For example: https://instagram.com/abc123.

  5. Choose an Image aspect ratio for all images in the gallery.

    This setting auto-crops images to a single aspect ratio, making it easy to quickly add images and make them look uniform.

    Use the Natural option if you don’t want images to be auto-cropped.

  6. Set the amount of Images per row using the slider.

    This corresponds with the amount of content blocks you add when using the Add content button below.

  7. Use the Add content button to add image content blocks to the gallery.

    For more information about adding and editing these blocks, see the Add gallery content article.

  8. Use the Save button in the top-right corner when you are finished editing.

Settings

The following settings are available for gallery sections:

Enable
Check this checkbox to enable this section.

This setting does is not available when adding a section to the home page. To disable this section from appearing on the home page you need to use the Remove section button from within the section’s settings list.

Heading
Change the heading displayed above the gallery.

We recommend keeping this to just a few words long.

Link text
Change the text for a link above the gallery section, which is most likely a link to one of your social media accounts.
Link
Change the link for the link text above the gallery section. If you’re adding an external link, you need to type (or copy and paste) the full URL, starting with https://. For example: https://instagram.com/abc123.
Image aspect ratio
Use this setting to force-crop images to a specific aspect ratio. Choose from Square (1:1), Landscape (3:2), or Portrait (2:3) aspect ratios.

Choose Natural if you do not want your images to be cropped.

Images per row
Use the slider to choose how many social image previews should be displayed per row of previews. You can choose between 2 and 4 previews per row.

For each gallery content block you add, there are additional settings. See the Add gallery content article for more information.

Add gallery content

Once you have added a Gallery section to your home page, you can start curating gallery content to be added to the section.

To set up a gallery image:

  1. Make sure you are already editing the Gallery section that you want to change.

  2. Under Content, use the Add image button to add a new gallery image.

  3. Choose or upload an Image.

  4. Add Text to be displayed below the image.

  5. Make the image into a clickable link by adding a Link.

    If you want to link to a external page, like an Instagram profile page, you need to type (or copy and paste) the full URL starting with https://. For example: https://instagram.com/abc123.

  6. Adjust the order of the gallery images by using the drag handles.

    Drag handles

  7. Use the Save button in the top-right corner when you are finished editing.

Settings

Each gallery images has the following settings:

Image
Select or upload an image to be associated with the current block.
Text
Add text to be displayed below the image.
Link
Add a link to the image.

From within each image block, open the actions menu (…) and use the Remove image button to remove a block from the gallery.

Note that if you want to link to a external page, like an Instagram profile page, you need to type (or copy and paste) the full URL starting with https://. For example: https://instagram.com/abc123.

Related articles

  • Home page
  • Collection pages
  • Add gallery content
© 2014-2020 Fluorescent Design Inc.   •   hello@fluorescent.co