plugin installation guide

  1. Add Code to Footer

Steps

  1. Copy the code below

  2. Log in to your Squarespace account.

  3. From the left-hand menu, click Pages.

  4. When you’re in Pages, check the bottom of the left panel, click Custom Code

  5. Select and click Code Injection.

  6. Locate the Footer field.

  7. Paste the code directly into the Footer section.

  8. Click Save.

<!-- Before–After Slider Gallery Section by Studio Sunsette -->
<script>
// Assign a unique ID to each gallery section you want to enable
// Add one or more gallery IDs separated with comma to the galleryIds array
// const galleryIDs=[“ba-gallery”] or const galleryIDs=[“ba-gallery”, “ba-gallery-2”]
  
const galleryIds=[""];

 //DO NOT EDIT 
document.addEventListener("DOMContentLoaded",function(){const e={square:1,"three-four-vertical":.75,standard:1.5,"standard-vertical":.6667,"four-three":1.3333,widescreen:1.7778,"anamorphic-widescreen":.4878};galleryIds.forEach(t=>{document.querySelectorAll(`#${t} .gallery-grid`).forEach(t=>{let n={};try{n=JSON.parse(t.getAttribute("data-props"))}catch(e){}const a=e[n.aspectRatio||"square"]||1,r=[...t.querySelectorAll("figure.gallery-grid-item")];if(r.length<2)return;for(let e=0;e<r.length;e+=2){const t=r[e],n=r[e+1];if(!n)break;const i=t.querySelector("img").cloneNode(!0),l=n.querySelector("img").cloneNode(!0),o=document.createElement("div");o.className="studiosunsette-ba-slider",o.style.aspectRatio=a,t.replaceWith(o),n.remove(),i.classList.add("studiosunsette-ba-before"),l.classList.add("studiosunsette-ba-after"),o.appendChild(i),o.appendChild(l);const d=document.createElement("div");d.className="studiosunsette-ba-line";const c=document.createElement("div");c.className="studiosunsette-ba-handle",o.appendChild(d),o.appendChild(c);const s=document.createElement("div");s.className="studiosunsette-ba-label studiosunsette-ba-left",s.textContent="Before";const p=document.createElement("div");p.className="studiosunsette-ba-label studiosunsette-ba-right",p.textContent="After",o.appendChild(s),o.appendChild(p);const u=50;l.style.clipPath=`inset(0 0 0 ${u}%)`,d.style.left=u+"%",c.style.left=u+"%";let m=!0,f=!1;const v=e=>{const t=o.getBoundingClientRect();let n=Math.min(Math.max(0,e-t.left),t.width),a=n/t.width*100;window.requestAnimationFrame(()=>{l.style.clipPath=`inset(0 0 0 ${a}%)`,d.style.left=a+"%",c.style.left=a+"%"}),m&&(s.style.opacity=0,p.style.opacity=0,m=!1)};c.addEventListener("mousedown",e=>{e.preventDefault(),f=!0}),document.addEventListener("mousemove",e=>{f&&v(e.clientX)}),document.addEventListener("mouseup",()=>{f&&(f=!1,m=!0,s.style.opacity=1,p.style.opacity=1)}),c.addEventListener("touchstart",e=>{f=!0,e.preventDefault()});let g=0,h=0,y=!1;o.addEventListener("touchstart",e=>{g=e.touches[0].clientX,h=e.touches[0].clientY,y=!1}),o.addEventListener("touchmove",e=>{const t=Math.abs(e.touches[0].clientX-g),n=Math.abs(e.touches[0].clientY-h);t>n&&t>5&&(e.preventDefault(),y=!0,v(e.touches[0].clientX))},{passive:!1}),o.addEventListener("touchend",()=>{f=!1,y&&(m=!0,s.style.opacity=1,p.style.opacity=1)})}})})});
</script>
 <!-- Before–After Slider Gallery ENDS HERE -->

2.Add Code to Custom CSS

Steps

  1. Copy the code below

  2. Log in to your Squarespace account.

  3. From the left-hand menu, click Pages.

  4. When you’re in Pages, check the bottom of the left panel, click Custom Code

  5. Select Custom CSS.

  6. A CSS editor panel will open.

  7. Paste the code into the Custom CSS editor.

  8. Click Save.

/* Before & After Slider Gallery Starts */

.studiosunsette-ba-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: default;
}

.studiosunsette-ba-after {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0s ease;
}

/* Divider Line */
.studiosunsette-ba-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: rgb(255, 255, 255);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Labels */
.studiosunsette-ba-label {
  position: absolute;
  top: 50%;
  font-size: 13.5px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 2px 10px;
  z-index: 15;
  pointer-events: none;
  opacity: 0 !important;
  transition: opacity 0.3s;
}

.studiosunsette-ba-left {
  left: 10px;
}

.studiosunsette-ba-right {
  right: 10px;
}

/* Handle */
.studiosunsette-ba-handle {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  border: 3px solid #fff;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 6;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.studiosunsette-ba-handle::before,
.studiosunsette-ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
}

.studiosunsette-ba-handle::before {
  left: 5px;
  border-width: 8px 9px 8px 0;
  border-color: transparent #fff transparent transparent;
}

.studiosunsette-ba-handle::after {
  right: 5px;
  border-width: 8px 0 8px 9px;
  border-color: transparent transparent transparent #fff;
}
  
/* Show labels on hover of the slider container */
.studiosunsette-ba-slider:hover .studiosunsette-ba-label {
  opacity: 1 !important;
}

/* Hide labels while handle is active (dragging) */
.studiosunsette-ba-handle:active ~ .studiosunsette-ba-label {
  opacity: 0 !important;
}

/* Before & After Slider Gallery Ends */

Follow the steps below to create a Before & After image gallery using a standard Squarespace Image Gallery. The custom code will automatically convert each image pair into a before/after image slider.

3.Create the Image Gallery Section

1. Add an Image Gallery Section

  1. Edit the page where you want the Before & After gallery to appear.

  2. Click Add Section.

  3. Choose Image Gallery as the section type and add the section to your page.

  4. Click Edit Section.

  5. Select Grid Simple.

  6. Choose any image size or dimension you prefer except:

    • ❌ Anamorphic Widescreen (2:4:1)

  7. Save your gallery settings.

2. Upload Your Images in Pairs

  1. Click the Edit Gallery.

  2. Upload your images in pairs, in the following order:

    • Images 1–2 → Before / After

    • Images 3–4 → Before / After

    • Images 5–6 → Before / After

    • Images 7–8 → Before / After

  3. The Before image must always come first, followed by the After image.

Important Rules:

  • The total number of images must be an even number:

    • 2, 4, 6, 8, 10, etc.

  • You can add as many image pairs as you like.

  • The custom code will automatically turn each image pair into a slider.

4. Assign a Section ID (Anchor Link)

  1. Hover over the gallery section.

  2. Click Edit Section (the pencil icon).

  3. Open the Advanced tab.

  4. In the Anchor Link / Section ID field, enter any ID eg, "ba-gallery”:

  5. Save the section.

5. Connect the Section ID in Code Injection

  1. Go to Code Injection.

  2. Locate the code you previously added.

  3. Find the galleryIDs setting.

  4. Add the section ID exactly as shown: const galleryIDs=[“ba-gallery”] or const galleryIDs=[“ba-gallery”, “ba-gallery-2”]

  5. Save your changes.

Once saved, refresh the page. Each image pair will now display as a Before & After image slider automatically. You can repeat this process for additional galleries by using unique section IDs.