Crowd Cow Liquid Reference
Complete guide to Liquid templating in Contentful longText sections. Liquid docs
Setup
Create a Contentful longText entry with format: html and newStyle: true. Add it to any page's sections array. HTML containing {% or {{ is automatically processed as Liquid.
Tailwind CSS classes work inside shadow DOM islands. Any class used must be in app/assets/tailwind/.safelist.
Global Objects
collections
Access product collections by token. Returns a collection object with .products, .title, and .url.
{% assign products = collections["TOKEN"].products %}
{% for product in products limit:6 %}
{{ product.title }} — {{ product.price }}
{% endfor %}
{{ collections["TOKEN"].title }}
{{ collections["TOKEN"].url }}
Products are filtered by visitor's FC (only shippable items) and exclude out-of-stock. Max 24 per collection. Use limit and offset on the for loop.
customer
Current visitor context. Use for personalization.
| Field | Type | Description |
|---|---|---|
customer.logged_in | boolean | True if authenticated customer (not placeholder) |
customer.subscriber | boolean | True if active subscription |
customer.first_name | string | First name (empty if unknown) |
customer.email | string | Email (empty for placeholder/guest users) |
{% if customer.subscriber %}
Welcome back, {{ customer.first_name }}! Subscriber pricing applied.
{% elsif customer.logged_in %}
Hey {{ customer.first_name }}, subscribe and save 5%!
{% else %}
Sign up for exclusive deals.
{% endif %}
Product Fields
Each product in a collection loop exposes these fields. All text fields are HTML-escaped. Fields are lazy — only computed when accessed.
Display
| Field | Type | Example |
|---|---|---|
title | string | "Wagyu Ribeye" |
description | HTML | Rich text from admin (unescaped) |
permalink | string | /products/wagyu-ribeye?offer=xxx |
farm_name | string | "Snake River Farms" |
weight_text | string | "1.5 lbs" |
highlight_text | string | "20% Off" |
why_we_sourced_it | string | Plain text (HTML stripped from admin content) |
Images
| Field | Description |
|---|---|
image_raw | Base URL — use with imgix filter for custom sizes |
image_url | Pre-sized 720x720 |
image_url_small | Pre-sized 300x300 |
Pricing
| Field | Type | Notes |
|---|---|---|
price | string | Formatted for current user: "$89.99" |
price_cents | integer | Use with money filter: {{ product.price_cents | money }} |
member_price / member_price_cents | string / int | Subscriber price |
non_member_price / non_member_price_cents | string / int | Non-subscriber price |
list_price / list_price_cents | string / int | MSRP / strikethrough price |
discount_percent | integer | e.g. 20 for 20% off |
member_benefit_eligible | boolean | Whether subscriber pricing applies |
Stock & Ratings
| Field | Type |
|---|---|
in_stock / sold_out | boolean |
stock_quantity | integer |
rating | float (e.g. 4.5) |
rating_count | integer |
Rendered Components
| Field | Description |
|---|---|
add_to_cart_button | Full working ATC form with CSRF, loading state, turbo |
price_component | Member/non-member price display component |
star_rating | Star SVGs with numeric rating |
Tokens
| Field | Description |
|---|---|
token | Bid item token (for cart operations) |
product_token | Product token |
Custom Filters
imgix
Resize any image URL via imgix CDN. Auto-compresses and formats.
{{ product.image_raw | imgix: 800, 600 }} width, height (default crop)
{{ product.image_raw | imgix: 400, 400, "fill" }} custom fit mode
{{ "https://example.com/img.jpg" | imgix: 1200 }} works on any URL
image_tag
Generate a full <img> tag with imgix src, lazy loading, dimensions, and alt text.
{{ product.image_raw | image_tag: 480, 480, "Product photo", "w-full rounded-xs" }}
Outputs:
<img src="[imgix url]" alt="Product photo" loading="lazy" width="480" height="480" class="w-full rounded-xs" />
money
Format cents as dollars.
{{ 8999 | money }} → $89.99
{{ product.price_cents | money }} → $129.99
experiment
Check A/B test variant for current visitor. Returns "experimental", "control", or nil.
{% assign variant = "exp-cc-my-test" | experiment %}
{% if variant == "experimental" %}
Show new design
{% else %}
Show control
{% endif %}
Special Collection Tokens
Besides regular collection tokens (find in admin at /admin/product_collections), these special tokens are available:
| Token | Description |
|---|---|
purchase_history | Personalized — based on visitor's past orders |
best_sellers | Site-wide best sellers |
weekly_deals | Current weekly deals |
beef, chicken, etc. | Protein category feeds |
Tailwind CSS
Only safelisted Tailwind classes work in Liquid templates. The safelist is at app/assets/tailwind/.safelist.
If a class doesn't render: add it to the safelist and rebuild with bundle exec rake tailwind:build.
Responsive prefixes (e.g. md:flex-row-reverse) each need their own safelist entry — they're separate CSS rules.
Customer Context
Hand-selected cuts from independent farms. Subscribe and save 5% on every order.
Start Your SubscriptionMoney Filter
image_tag Filter
Generates a full <img> with lazy loading, dimensions, and alt text.
imgix Filter — Custom Sizes
Collection Metadata
Experiment / A/B Test
Use the experiment filter to check which variant a user is in:
{% assign variant = "exp-cc-my-test" | experiment %}
{% if variant == "experimental" %}
Show new design
{% else %}
Show control
{% endif %}
Returns the user's variant ("experimental", "control") or nil if not in the experiment.
Full Product Cards