BigCartel技术咨询：如何为首页单个Collection添加专属自定义文本

Perfect question—this is a common need on Big Cartel, and there’s a clean, targeted solution using Liquid templating (Big Cartel’s native template language) plus a little CSS for safety. Let’s walk through it step by step:

First, you’ll need to find where your theme renders the collection grid on the homepage. Most themes keep this in either:

• The home.html template file, or
• A reusable snippet like collection-grid.liquid (which gets included in home.html)

Look for a block of code starting with {% for collection in collections %}—that’s the loop you’ll modify.

Inside that loop, right after the collection name (or wherever you want the custom text to appear), add a conditional check that only runs on the homepage, and targets specific collections by their unique handle (you can find each collection’s handle in your Big Cartel admin under the collection’s settings—it’s the last part of the collection’s URL).

Here’s an example of how this looks:

{% for collection in collections %}
  <div class="collection-item">
    <!-- Existing collection name/link code -->
    <h2><a href="{{ collection.url }}">{{ collection.name }}</a></h2>

    <!-- Add this conditional custom text block -->
    {% if page.url == '/' %}
      {% case collection.handle %}
        {% when 'summer-sale' %}
          <p class="home-only-collection-text">Limited time summer discounts—don’t miss out!</p>
        {% when 'new-arrivals' %}
          <p class="home-only-collection-text">Fresh off the shelf, just for you!</p>
        {% when 'best-sellers' %}
          <p class="home-only-collection-text">Customer favorites, always in stock!</p>
        <!-- Add more when clauses for other collections as needed -->
      {% endcase %}
    {% endif %}

    <!-- Existing collection image/other elements -->
    <img src="{{ collection.image | product_image_url: 'medium' }}" alt="{{ collection.name }}">
  </div>
{% endfor %}

This code does two key things:

• {% if page.url == '/' %} ensures the text only loads on the homepage, not on collection detail pages or other parts of your site.
• The case statement lets you assign unique, custom text to each specific collection using its handle—no duplicate text across collections.

To add a double layer of protection (in case your theme’s page URL logic behaves unexpectedly), add this CSS to your theme’s styles.css file:

/* Hide custom text by default */
.home-only-collection-text {
  display: none;
}

/* Show custom text only on the homepage */
body.home .home-only-collection-text {
  display: block;
  /* Add your own styling here (color, font size, margins, etc.) */
  color: #e63946;
  margin-top: 8px;
  font-style: italic;
}

Big Cartel automatically adds a home class to the <body> tag on your homepage, so this CSS will only show the text there.

Quick Tips #

• Replace the example handles (summer-sale, new-arrivals) with your actual collection handles from the Big Cartel admin.
• Style the .home-only-collection-text class to match your theme’s design—adjust colors, fonts, spacing, etc., as needed.
• If you need to add text to more collections, just add another {% when 'your-collection-handle' %} line with your custom text inside the case statement.

This approach avoids the pitfalls you mentioned: no duplicate text across collections, no text showing up on non-homepage pages, and full control over each collection’s unique message.

内容的提问来源于stack exchange，提问作者Valerie Thompson