Shopify Dawn Theme PhotoSwipe Setup

PhotoSwipe is a Javasript image gallery & lightbox library. This post explains how to set up PhotoSwipe with the Shopify Dawn theme.

If you don't have a store to test this on, you can create a deveopment store with generated data.

Download the Dawn theme and PhotoSwipe

You can create a new Dawn theme using the Shopify CLI:

$ shopify theme init

Then in a separate folder, clone the PhotoSwipe repositry:

$ git clone https://github.com/dimsemenov/PhotoSwipe.git

Next, copy photoswipe-lightbox.esm.js, photoswipe.esm.js and photoswipe.css from the /dist folder of the respositry to the /assets folder of the theme.

Make a gallery template

In /templates create a copy of page.json and rename it page.gallery.json.

Now edit page.gallery.json and change the type from "main-page" to "main-gallery".

Make a gallery section

In /sections make a copy of main-page.liquid and rename it main-gallery.liquid

Now edit main-gallery.liquid and make the following changes:

Below the default section css import at the top of the file, import the PhotoSwipe CSS:

{{ 'photoswipe.css' | asset_url | stylesheet_tag }}

Add the gallery code between the title and content tags:

<div class="page-width page-width--narrow section-{{ section.id }}-padding">
  <h1 class="main-page-title page-title h0{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {{ page.title | escape }}
  </h1>

  <div id="portfolio-gallery">
    {%- for block in section.blocks -%}
      {%- if block.settings.image -%}
        <a
          class="{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {{ block.shopify_attributes }}
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: {{ forloop.index }};"
          {% endif %}
          href="{{ block.settings.image | image_url: width: 1024 }}"
          data-pswp-width="1024"
          data-pswp-height="1024"
          target="_blank"
        >
          {{ block.settings.image | image_url: width: 200 | image_tag }}
        </a>
      {%- endif -%}
    {%- endfor -%}
  </div>

  <div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {{ page.content }}
  </div>
</div>

Update the Gallery Schema

Update the galley schema with a new name and image block:

{% schema %}
{
  "name": "Gallery",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ]
}
{% endschema %}

Gallery Overlay Fix

PhotoSwipe dynamically inserts an empty div for the lightbox gallery background. However, in its base.css the Dawn theme sets empty divs to display: none, so without any changes the lightbox overlay will be hidden. To fix this, we can just revert to the default div display property (block). In assets/photoswipe.css add the following below the pwsp class:

.pswp div:empty {
  display: revert;
}

Upload the theme to a store

Next, you can push the changes to the store. If the theme is live on your store, you can just run:

$ shopify theme push

If you haven't published the theme before you will need to push the unpublish theme first, before you set it as the live theme:

$ shopify theme push --unpublished
$ shopify theme publish

Create a new page that uses the 'gallery' template

Create a new page and set the 'Theme template' to the 'gallery' template you just created. To add this page to the main menu, add a new link to the 'gallery' page in the main menu editor of the navigation settings.

Add gallery images in the editor

The final step is to add your gallery images in the theme editor. In the theme editor select the 'gallery' page. Then in the sections editor choose the 'gallery' section and then click 'add image'. Then from the block settings panel you can select the gallery image using the image picker. Repeat this process for the desired number of gallery images. You can then save your changes.

Now, if you view the store and navigate to the new page with the gallery template, the photoSwipe gallery should display and be working correctly.