Squarespace Display List Of Products As Text​

Squarespace display list of products as text​ easily with built-in features or custom code. Learn how to show product names without images for a clean layout. Squarespace is a powerful platform for building websites. It is user-friendly and packed with features. However, displaying a list of products as text instead of images can be tricky. Many users want a simple text-based product list for better readability, SEO, or minimalist design.

In this guide, we will show you how to do this step by step. Besides that, we will discuss why this can be useful and how to optimize it for search engines.

Why Display a List of Products as Text?

By default, Squarespace showcases products with images, titles, and prices. This works well for eCommerce sites. However, there are situations where a text-only product list is more effective.

1. Improves Readability

Some users prefer a simple, clean layout. A text list removes distractions and keeps visitors focused.

2. Better SEO Performance

Search engines rely on text to understand your page. A text-based product list makes it easier for Google to crawl and rank your page.

3. Faster Page Load Speed

Images slow down websites. A text list loads instantly, providing a better user experience.

4. Easier Printing and Copying

Text is easy to copy and paste. Visitors can quickly take notes or share product information.

5. Minimalist Design Appeal

A plain text list aligns with minimalist web design, which is a growing trend.

Methods For Squarespace Display List Of Products As Text​

Now, let’s look at different ways to create a text-only product list in Squarespace.

Method 1: Use a Summary Block

A Summary Block is a built-in feature that allows you to display product lists. Follow these steps:

1. Go to the Page Editor
   • Log into Squarespace.
   • Navigate to the page where you want to display the product list.
2. Add a Summary Block
   • Click the “+” icon to add a block.
   • Choose Summary Block from the options.
3. Select Product Collection
   • In the Summary Block settings, select Products as the content source.
4. Customize the Display
   • Under the Layout tab, select List View to show text instead of images.
   • Hide the thumbnails by toggling off Show Thumbnail.
   • Hide descriptions if not needed.
5. Save and Publish
   • Click Apply and Save your changes.

Method 2: Use Code to Create a Custom Product List

If you want more control, you can manually create a text-only product list using custom HTML & CSS.

1. Go to the Page Editor
   • Open the page where you want to add the list.
2. Add a Code Block
   • Click the “+” icon and choose Code Block.
3. Insert HTML Code
   <ul> <li>Product 1 - $19.99</li> <li>Product 2 - $24.99</li> <li>Product 3 - $29.99</li> </ul>
4. Save and Publish
   • Click Apply and Save to see the changes.

This method gives you full control over formatting. However, it does not pull data dynamically from your product store. You will need to update it manually.

Method 3: Use Custom CSS to Hide Product Images

Instead of removing images manually, you can hide them with CSS.

1. Go to Design > Custom CSS
   • In Squarespace, navigate to Website > Design > Custom CSS.
2. Add This CSS Code
   .sqs-gallery-design-carousel img, .summary-item img { display: none; }
3. Save Changes
   • Click Save and check your product page.

This method works well if you want to remove images but keep product data intact.

Optimizing Your Text-Based Product List for SEO

Now that you have displayed your product list as text, let’s make it SEO-friendly.

1. Use Keyword-Rich Product Names

Include important keywords in product titles. For example:
Instead of: “Shoes Model X”
Use: “Men’s Running Shoes – Model X – Lightweight & Comfortable”

2. Add Internal Links

Internal links improve navigation. For example, link products to their full description pages.

3. Use Schema Markup

Schema markup helps search engines understand your list better. Add JSON-LD schema using a Code Block:

jsonCopyEdit<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "itemListElement": [
    {
      "@type": "Product",
      "name": "Product 1",
      "url": "https://yourstore.com/product-1"
    },
    {
      "@type": "Product",
      "name": "Product 2",
      "url": "https://yourstore.com/product-2"
    }
  ]
}
</script>

4. Keep URLs Short and Descriptive

Instead of:
yourstore.com/product12345
Use:
yourstore.com/mens-running-shoes

5. Use Bullet Points for Readability

Search engines and users prefer lists. Instead of long paragraphs, use:

• Product Name
• Price
• Features

6. Ensure Mobile-Friendliness

Most users browse on mobile. A text-only product list should be responsive.

Final Thoughts

Displaying a list of products as text in Squarespace can improve readability, speed, and SEO. Despite the platform’s image-based default, you can achieve a clean, text-only look using Summary Blocks, custom HTML, or CSS.

Certainly, choosing the best method depends on your needs. If you want full control, coding a custom list is best. However, for ease of use, Summary Blocks are a great option.

Ready to Optimize Your Squarespace Site?

Displaying products as text is just one way to enhance your site. If you want to explore more options, check out our guide on Squarespace vs WordPress to see which platform suits your business best.

Need help optimizing your website? Contact us today for expert guidance! 🚀