Adding Product Titles into Two Lines in Squarespace 7.1

Squarespace Tutorial
Written By Walid Hasan

If you're on Squarespace 7.1 and want to break product titles between two lines by e.g., place the product title on the first line and the brand on the second, you probably already know by now this type of line breaking is not supported out of the box.

Squarespace does not support writing HTML tags in product titles, e.g., and so there isn’t a default feature to let you control where there are line breaks in the collection items. Thanks to a straightforward JavaScript solution, you can quickly and indeed effectively get that layout going.

All Squarespace 7.1 sites with a Business Plan or higher (JavaScript injection is not available on Personal Plans).

Why the Limitation Exists

Squarespace’s platform is intended to encourage consistent, cleanly designed sites across templates. As such:

  • HTML tags are removed from custom collection titles (products, blog posts, and galleries).

  • The limitation means the line breaks, bold tags, or anything like to provide custom formatting by means of tags are not supported in the title fields.

  • Long product names or dual-line branding structures are forced into a single line, often breaking visual balance or flow.

The Smart Workaround

To get around this, we’ll:

  • Please Use The Dash (-) As A Delimiter When Separating The Title

  • Achieve this with these few lines of JavaScript:

    • Detect that dash

    • Replace it with two separate <div>s

    • Style each line with CSS.

This will give us a nice, clean, easy-to-control, 2 column layout without fiddling with the basic Squarespace setup.

Example Use Case

In your product title field:

Recycled Tote - Urban Tribe

On your live site, it will render as:

Recycled Tote  

Urban Tribe

This approach is ideal for:

  • Separating product types and brand names

  • Creating a hierarchical visual structure

  • Ensuring consistent spacing across grid layouts

Step-by-Step Implementation

Step 1: Format Product Titles Using a Dash

When naming products in Squarespace, use the following format:

Product Name - Secondary Label

Correct Example:

Recycled Tote - Urban Tribe

Make sure the dash has a space on either side: -
(No special characters, no en-dashes –, and no spacing issues.)

Step 2: Inject JavaScript in the Footer

Go to your Squarespace dashboard:
Settings → Advanced → Code Injection → Footer

Paste this script:

Copied!

<!-- Split Product Titles into Two Lines - Squarespace 7.1 -->
<script>
  const selector = '.products.collection-content-wrapper .grid-main-meta .grid-title, .collection-type-products .ProductItem-details h1.ProductItem-details-title, .product-block .product-title';

  window.addEventListener("DOMContentLoaded", () => {
    const titles = document.querySelectorAll(selector);
    titles.forEach(title => {
      const parts = title.innerText.split(" - ");
      if (parts.length === 2) {
        const lineOne = document.createElement("div");
        lineOne.className = "sko-p-title";
        lineOne.innerText = parts[0].trim();

        const lineTwo = document.createElement("div");
        lineTwo.className = "sko-title";
        lineTwo.innerText = parts[1].trim();

        title.innerHTML = "";
        title.appendChild(lineOne);
        title.appendChild(lineTwo);
      }
    });
  });
</script>

This script searches for titles containing -, splits them, and wraps each half in its own styled container.

Step 3: Add Custom Styling (Optional but Recommended)

To style each line independently, go to:
Pages → Custom code → Custom CSS and paste:

Copied!

/* First Line (typically product type or style) */
.sko-p-title {
  font-size: 0.75em;
  color: #666;
  font-weight: 400;
  line-height: 1.2em;
}
/* Second Line (main product name or brand) */
.sko-title {
  font-size: 1em;
  font-weight: 700;
  color: #000;
  line-height: 1.3em;
}

You can further adjust these values to match your site’s typography, including font family, spacing, or alignment.

Additional Notes

  • This approach only changes how titles appear visually on product list or detail pages.

  • The dash (-) will still be visible in areas like shopping cart, checkout, order emails, etc., because those elements use the original product title.

  • Want to conditionally remove or style the dash in those contexts? Let me know—more advanced customizations are possible.

Works Best For

  • Clothing and fashion stores with brand-model naming

  • Lifestyle and design retailers with descriptive sub-labels

  • Any eCommerce site seeking a better visual hierarchy in product lists

Final Result

After implementing this technique, your Squarespace 7.1 product titles will visually break into two lines wherever you place a dash (-) in the title field. For example:

Input Title (in Squarespace):
Recycled Tote - Urban Tribe

Output on the Live Site:
Recycled Tote
Urban Tribe

Each line is wrapped in its own <div> so you can style them independently — perfect for:

  • Separating product type and brand

  • Improving layout clarity in product grids

  • Creating a consistent, professional look across your catalog

This method works across:

  • Product list pages

  • Product detail pages

  • Product blocks

And it’s fully customizable via CSS for typography, spacing, and color control.

Frequently Asked Questions (FAQ)

1: Why can’t I just use a line break (<br>) in my product title field?
A: Squarespace strips HTML from product titles for consistency and security, so tags like <br> or <strong> won’t work. That’s why this JavaScript-based workaround is needed.

2: What exactly does this method change?
A: It only changes the visual display of product titles on your live site. The original title with the dash still exists in your backend, cart, and email confirmations unless further customized.

3: Will this break anything in my checkout or cart?
A: No. This approach doesn’t modify any backend product data. However, the full product title (with a dash) will still appear in checkout and cart views unless you use advanced scripting to modify those areas as well.

4: Does this work with every Squarespace 7.1 template?
A: Yes — the script targets standard product title containers used across Squarespace 7.1 templates. It will work on product list pages, detail pages, and product blocks, as long as the structure hasn’t been significantly altered.

5: Can I style the first and second lines differently?
A: Yes. The script wraps each line in a custom class (.sko-p-title and .sko-title), so you can use CSS to set different font sizes, colors, and spacing for each line.

6: Will this work on mobile devices?
A: Yes. The layout is fully responsive. You can even apply mobile-specific CSS styles if you want to adjust font size or spacing differently for smaller screens.