How to Change the Size of Product Title and Price in Squarespace 7.1

In Squarespace 7.1, your online store’s visual hierarchy plays a huge role in user engagement and conversion rates. Unfortunately, the default styles for product titles and prices can be at odds with custom branding or layout aspirations, especially for minimalist stores, mobile-first designs, or premium product ranges.

Whether you want to make the title a focal point, tone down prices and give pricing a modern edge, or, with the font sizing function in this module, ensure your typographic elements display well on all screen sizes, this module allows you to customize these elements to your liking.

The good news? You don’t want plugins, developer mode, or code editing. A few lines of well-placed CSS in your Custom CSS panel will allow you to take control of how your product titles and prices are displayed throughout your store.

Step-by-Step: How to Style Product Title & Price with Custom CSS

Step 1: Identify the CSS Classes

Use the following built-in Squarespace class names:

Item	CSS Class
Product Title	.ProductItem-details-title
Product Price	.ProductItem-details-price

These are template-agnostic — they work across all Squarespace 7.1 templates, from Brine to Mojave.

Step 2: Add Custom CSS to Style Title and Price

Go to:
Design → Custom CSS → Paste the code below

Example 1: Change Product Title Size

Copy

Copied!

/* Change Product Title Size */
.ProductItem-details-title {
  font-size: 28px; /* You can adjust: 24px, 32px, etc. */
  font-weight: 700; /* Makes the title bold */
  line-height: 1.2;
  margin-bottom: 10px;
}
  

Example 2: Change Product Price Size

Copy

Copied!

/* Change Product Price Size */
.ProductItem-details-price {
  font-size: 22px; /* Adjust as needed */
  font-weight: 500; /* Semi-bold */
  color: #333; /* Dark gray text for better design */
  margin-top: 5px;
}
  

Step 3: Preview and Fine-Tune

After pasting the CSS:

1. Click Save

2. Refresh your product page

3. View it on desktop, tablet, and mobile

4. Tweak values like font-size or margin for perfect alignment with your brand

Optional: Make It Responsive on Mobile

Mobile visitors make up over 60% of online shoppers — your typography must adapt accordingly.

Here’s a quick media query you can add to scale down text size on smaller screens:

Copy

Copied!

@media only screen and (max-width: 767px) {
  .ProductItem-details-title {
    font-size: 20px; /* Smaller title on mobile */
  }
  .ProductItem-details-price {
    font-size: 18px; /* Smaller price on mobile */
  }
}
  

This ensures:

• Titles remain visible but not overpowering

• Prices stay readable without overwhelming the layout

Pro Tips for Better Typography Control

Tip	Details
Font-size best practices	Keep product titles between 24px–36px on desktop for clarity
Color accessibility	Use high-contrast color codes (like #333 or darker) for better legibility
Font family consistency	Match fonts with your global styles to maintain brand cohesion
Mobile-first testing	Always check responsiveness using Squarespace’s mobile preview tools

Conclusion: Better Typography = Better Conversions

With just a few lines of custom CSS, you can take full control of how your product titles and prices appear in Squarespace 7.1, giving your shop a professional, high-converting edge.

After applying this guide, your site will have:

• Bold, beautiful product titles that demand attention

• Elegant and readable price tags tailored to your brand

• A layout that feels more premium and user-friendly across all devices

This small design change can make a big difference in buyer trust, brand perception, and sales. Whether you're a designer, a DIY shop owner, or a marketer refining UX, this simple tweak is a must-have in your Squarespace customization toolkit.

FAQ: Customizing Product Titles and Prices in Squarespace 7.1

1. Why should I customize the product title and price sizes?

The default font sizes in Squarespace 7.1 may not align with your brand voice, visual hierarchy, or target audience’s expectations. Customizing these styles helps:

• Improve scanability and focus on product pages

• Align with luxury, minimalist, or bold design intentions

• Optimize mobile readability and UX across devices

2. Which CSS classes target the product title and price?

Squarespace uses consistent class names for product elements:

• Product Title →.ProductItem-details-title

• Product Price →.ProductItem-details-price

These work on all Squarespace 7.1 templates, including Brine, Hayden, Mojave, and others.

3. Do I need Developer Mode or any plugins?

No. This customization works using the built-in Custom CSS panel found at:
Design → Custom CSS
No Developer Mode, code injections, or third-party apps required.

4. What’s the best desktop font size for product titles?

For readability and modern UI balance:

• Recommended Range: 24px to 36px

• Bolder weights (600–700) help titles stand out in grid views
  Adjust based on your store’s font family and line spacing.

5. Can I reduce the title and price size just on mobile?

Yes! Use a mobile-specific media query like this:

Copy

Copied!

@media only screen and (max-width: 767px) {
  .ProductItem-details-title {
    font-size: 20px;
  }
  .ProductItem-details-price {
    font-size: 18px;
  }
}
  

This ensures optimal legibility and layout integrity on smaller screens.

6. Will this affect the product detail page as well?

Yes — these class names apply to both collection (grid) views and individual product pages. If you want to isolate styling for one or the other, you may need to use additional parent selectors.

7.  How do I test changes on mobile and tablet?

In Squarespace:

• Use the mobile preview toggle (top of page editor)

• Or test live changes by resizing your browser window

• For full testing, use browser DevTools → Mobile Simulation tab

8. Can I also change font color, weight, or spacing?

Absolutely! You can add properties like:

color: #333;  

font-weight: 500;  

margin-top: 5px;  

letter-spacing: 0.5px;

This allows you to create a more distinct typographic rhythm that suits your brand.