Logo PIXEL CREEK
 
Add simply-styled coupon code blocks to your Squarespace store (or any website builder that allows custom HTML and CSS). Each block has a link to copy its code to the clipboard.

Coupon Codes

Add simply-styled coupon code blocks to your Squarespace store (or any website builder that allows custom HTML and CSS). Each block has a link to copy its code to the clipboard.

You can use this generator to create your own coupon code boxes! Follow the instructions to add the necessary CSS and HTML to your website — no extra code for this one, so it should work on Personal plans. I’ve tested it on Squarespace 7.1 and it should work on 7.0 as well.

Questions? Comments? I’d love to hear from you.

Step 1. Add the following to your global Custom CSS:

/* Pixel Creek Coupon Codes v1.0
 * pixelcreek.dev/plugins/coupon-codes
 */
.pxcr-coupon-container {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  height: 100%;
}
.pxcr-coupon {
  background-color: white;
  border: 1px dashed;
  padding: 8px;
  line-height: 1.15;
  display: flex;
  gap: 8px;
  flex-direction: row;
  align-items: center;
}
.pxcr-coupon-offer {
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: bold;
  flex: none;
  width: 30%;
  text-align: center;
}
.pxcr-coupon-details {
  flex-grow: 1;
  line-height: 1.6;
}
.pxcr-coupon-terms {
  font-size: 0.9rem;
}
.pxcr-coupon-code {
  font-size: 1.1rem;
  font-weight: bold;
}
.pxcr-coupon-copy {
  font-size: 0.9rem;
  font-style: italic;
}
@media (min-width: 700px) {
  .pxcr-coupon-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
  }
}
@media (min-width: 1024px) {
  .pxcr-coupon-offer {
    font-size: 2.2rem;
  }
}
/* End Pixel Creek Coupon Codes */

That’s it!

You can use this generator again if you need to change your coupon boxes in the future. Or, if you are comfortable with code, you can modify the HTML/CSS directly.