Using a gallery page to control the same info displayed on multiple pages

I have to admit that’s not the wittiest title in the world, but it’s straight to the point so let’s just move on, ok?

I’m often impressed with the clever ways other Squarespace designers come up with workarounds to achieve certain designs and provide functionality for their client sites, particularly when they don’t use code at all.


Whenever I’m working on my own site, sometimes I feel I jump into an all-code solution way too quickly, without putting too much thought on if there’s another workaround without the hassle of writing the HTML myself.

However, a couple of days ago, I forced myself to think outside the box mainly because the code I would have had to write to achieve what I wanted was way too tedious (#lazyFTW ?).

And since I came up with a pretty smart solution – if I say so myself – with minimal code, I thought I’d share it with you today!


Finding the best solution

I was working on my product pages – since I’ve been wanting to change up the layout for a while now – and I was looking for a way to display 4 blocks (see exhibit A below) with the same information on ALL product pages but in a way that it would allow me to update it everywhere at once if I needed to in the future, without having to go back to every single listing and manually editing it in there.

4 Boxes.png


At first, I thought about using a Code Block to build a simple HTML table-ish layout so I could control the disposition and height of the four boxes.

The problem was that I would have to go inside each Code Block to change the text if I wanted to make an update to the information. No bueno.

The next thing I thought was to use the same table-ish code block but load the content dynamically through JS or Ajax, so I would only have to change it in one place and it would automatically change on all code blocks.

Close to what I wanted, but this would have meant overcomplicating things just for kicks.

So, after thinking about what I wanted to achieve and considering the blocks already available that would do that sort of "autopopulation" I decided to give it a shot with a Summary Block, but instead of linking it to a Blog page – since it would have been way too annoying to create individual blog posts for the text of each block – I decided to use a Gallery Page instead!

Bingo!

Basically, what I did was upload 4 little icons as the images for the gallery page, and then add the corresponding title and description/excerpt to each.

Gallery Page.png

Next, I loaded my Summary Block inside one of the product pages under the Additional Info tab and set it to Grid, around 300px wide for the items/boxes, 20px of gutter to have some distance between the content, and set it to display my 4 gallery items.

Summary Block.png


At first the result was not exactly what I had in mind since the icons were waaaaay too big, the boxes didn’t look like boxes and the text wasn’t styled… but there’s nothing a bit of CSS can’t fix!

Customizing the Summary Block with code

First, I took care of the size of the icons by setting a max-width to the container holding the image:

.summary-thumbnail-outer-container {
  max-width: 30px;
}

And then I made some adjustments to the image itself to set it in place to the left of the content:

.summary-thumbnail-outer-container {
  max-width: 30px;

  img {
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
}


Lastly, I went ahead and styled the boxes’ title and links, and added a nice background color with some padding!

//Title
.summary-title {
  color: #ff0099;
  font-family: montserrat;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
}

//Box
.summary-item {
  background: #fafafa;
  border: 1px solid #ebebeb;
  padding: 40px;
  
  //Links inside content
  .summary-excerpt a {
    color: #4f9ac7;
    text-decoration: underline;
  }
}

To finish things up, since I wanted to make sure all boxes stayed the same height if next to each other, I used my dear friend Flexbox to help me make it happen, by targeting the container that was holding my 4 boxes and setting it to display: flex and also to wrap:

.summary-item-list {
  display: flex;
  flex-wrap: wrap;
}

This wrapping means that whenever the browser screen hits a point where two of the ~300px wide boxes don’t fit on the same row, it wraps or stacks the second one under the previous box!

Responsive FTW!

Tablet.png
Phone.png

And that’s it!

All I had to do next was add a Summary Block with the same settings on each of my current listings, and then create a product template that already includes it to load the same info on all my products!

And, if at any point I decide to switch up the text, I can just do it inside the Gallery Page and it will automatically update on all listings!

This wasn’t exactly a tutorial but just an overview of my thought process when it comes to finding the best solution for a customization, so I really hope you found this workaround as helpful as I did and it serves as inspiration for your next design conundrum!

Until next time,

B.