# Collection Page Compliance Settings Embed

This embed controls how compliance indicators appear on your collection pages — the pages where customers browse multiple products at once. It adds visual badges to product thumbnails so customers can instantly see which wines are available for their state.

***

### What This Embed Does

When enabled, this embed adds a **compliance indicator badge** to each product thumbnail on collection pages. The badge visually signals whether the product is available for shipping to the customer's selected state.

This gives customers a quick scan of availability without needing to click into each product page individually.

***

### Customization Options

| Setting                     | What It Controls                                    | Options             |
| --------------------------- | --------------------------------------------------- | ------------------- |
| **Cannot Purchase Message** | Text on the indicator when a product is unavailable | Customizable text   |
| **Indicator Color**         | Color of the compliance badge                       | Any hex color       |
| **Indicator Size**          | Size of the badge on the thumbnail                  | Adjustable          |
| **Indicator Position**      | Where the badge appears on the product thumbnail    | See positions below |

#### Indicator Position Options

* **Top Left**
* **Top Center**
* **Top Right**
* **Bottom Left**
* **Bottom Center**
* **Bottom Right**

***

### How to Enable and Customize

1. In your **Shopify Admin**, click **Online Store** → **Themes** → **Customize**.
2. Click the **App Embeds icon** (third icon on the left navigation bar).
3. Find **"CS Collection"** (or "Collection Page Compliance") and toggle it **on**.
4. Click on the embed to expand its settings:
   * Edit the **Cannot Purchase Message**
   * Choose your **Indicator Color** to match your branding
   * Adjust the **Indicator Size**
   * Select the **Indicator Position** on the product thumbnail
5. **Navigate to a collection page** within the customizer to preview your changes.
6. Click **Save**.

<figure><img src="/files/tPAdSlLw6R2fdKGpghEo" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Preview on a collection page.** To see your changes, navigate to an actual collection page using the page selector at the top of the customizer. The indicators won't appear on the homepage (unless you're using a featured collection — see below).
{% endhint %}

***

### Featured Collections on Your Homepage

If you feature collections on your homepage (common for showcasing popular wines or seasonal selections), you'll want the compliance badges to appear there too. This requires an additional step — see Configuring a Featured Collection with Compliance for the full setup guide.

***

### Best Practices

* **Match your brand colors.** The indicator color should complement your theme, not clash with it. Subtle colors work better than bright red or green.
* **Position consistently.** Pick one position (we recommend top-right) and keep it the same across all collections.
* **Keep the message short.** On collection thumbnails, space is limited. A brief message like "Unavailable" or "Can't ship to \[state]" works better than a long explanation.
* **Use this with the Product Page embed.** Collection badges give the quick overview; the product page embed provides the detailed explanation. Together they create a clear, layered experience.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://crushsuite.gitbook.io/docs/compliance/storefront-and-checkout/collection-page-compliance-settings-embed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.