Enhance Squarespace lightbox gallery with buy buttons

As a photographer, having both a portfolio and a print store on your website is standard practice. However, combining these two into a single gallery, where each image opens in a lightbox and includes a “Buy” button, can elevate the user experience and streamline the purchasing process.

If you're looking to implement this feature on your Squarespace website, similar to SmugMug, Lightbox Studio has you covered.

Solution with Lightbox Studio

With Lightbox Studio, you can display your gallery images in a sleek lightbox, while also adding functional buy buttons. While Squarespace 7.1 Gallery doesn’t support lightbox captions by default, Lightbox Studio allows you to add captions with custom links, providing a simple way to display a "Buy" button within the lightbox itself.

Here’s how to do it:

Step 1:

Install Lightbox Studio on your Squarespace website.

Step 2:

Add Buy Links to your Gallery images – Use the HTML description feature to embed buy links for each image.

Here’s an example of how to add a "Buy" button link within the gallery description:

<a class="lightbox-buy-button" href="https://example.com">Buy Print</a>

Add buy links on slide description

Step 3:

Enable lightbox for your gallery

• Start Edit the page, then hover over the gallery section and click the edit (pencil) icon.

• Switch the Lightbox and Caption toggles ON

• Click Save to save your changes and keep editing.

Enable Lightbox and Caption for galleries

Step 4:

Style the Button – Apply CSS styling to make the link look like a button, or customize it to fit your brand’s design. For example: below customisations will hide the buy button on main gallery captions and show it on the bottom of lightbox gallery

<!-- sqs:beyondspace-lightbox-studio-customisation -->
<style>
  .lightbox-buy-button {
    display: none;
  }

  .bs-lightbox-studio-caption {
    font-family: inherit;
  }

  @media only screen and (min-width: 768px) {
    .lightbox-buy-button {
      padding: 10px 20px;
      position: absolute;
      transform: translateY(-50%) !important;
      top: 50%;
      right: 1em;
      border: 2px solid #ccc;
      display: none;
    }

    .bs-lightbox-studio-caption .lightbox-buy-button {
      display: inline-block;
    }
  }

  @media only screen and (max-width: 768px) {
    .bs-lightbox-studio-caption .gallery-caption-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .bs-lightbox-studio-caption .lightbox-buy-button {
      margin-top: 10px;
      padding: 5px 20px;
      border: 2px solid #ccc;
      font-size: .9rem;
      display: inline-block;
      max-width: max-content;
    }
  }
</style>
<!-- /sqs:beyondspace-lightbox-studio-customisation -->

Real example

You can see how the buy button is displayed on a lightbox gallery in the screenshot below, Buy Print is displayed on the lightbox bottom and linked to an actual product page where visitor can purchase the prints

Squarespace lightbox with buy buttons using Lightbox Studio

Below is another example in different color mode

Previewing the custom lightbox with Buy buttons

If you'd like to see this in action, follow the above instructions on your site and use this tutorial to preview the plugin directly on your website.

Conclusion

Lightbox Studio allows you to seamlessly combine your portfolio and store into a unified gallery, enhancing user engagement and streamlining the buying process. Whether you want to add "Buy" buttons or clickable links to your images, this versatile solution offers a professional and user-friendly approach to showcase and sell your work. While ideal for photography websites, it can be adapted to suit any business, making it a valuable addition to your site regardless of industry.