EXAMPLES.md•8.17 kB
# Shopify Liquid MCP Server - Usage Examples
This document shows practical examples of using the Shopify Liquid MCP server with Claude.
## Example 1: Learning About Tags
**You ask Claude:**
> "What is the for tag in Shopify Liquid and how do I use it?"
**Claude will use:** `get_liquid_tag("for")`
**You'll receive:** Complete documentation for the `for` tag including:
- Syntax and usage
- Parameters (limit, offset, reversed)
- The forloop object
- Code examples
- Common use cases
## Example 2: Finding the Right Filter
**You ask Claude:**
> "I need to convert a string to uppercase in Liquid"
**Claude will use:** `search_liquid_docs(["uppercase", "string"])`
**You'll receive:** Results showing the `upcase` filter with examples.
## Example 3: Understanding Objects
**You ask Claude:**
> "What properties are available on the product object?"
**Claude will use:** `get_liquid_object("product")`
**You'll receive:** Complete product object documentation with all properties:
- product.title
- product.price
- product.images
- product.variants
- And 50+ more properties
## Example 4: Browsing Available Tools
**You ask Claude:**
> "What iteration tags are available in Liquid?"
**Claude will use:** `list_liquid_tags()`
**You'll receive:** Organized list showing:
- **Iteration Tags:** for, break, continue, cycle, tablerow, paginate
- **Control Flow Tags:** if, unless, case
- **Variable Tags:** assign, capture
- And more...
## Example 5: Building a Product Display
**You ask Claude:**
> "How do I display all products in a collection with their prices?"
**Claude will use multiple tools:**
1. `get_liquid_object("collection")` - To understand collections
2. `get_liquid_tag("for")` - To learn about loops
3. `get_liquid_object("product")` - To see product properties
4. `get_liquid_filter("money")` - To format prices
**You'll receive:** A complete solution with code example:
```liquid
{% for product in collection.products %}
<div class="product">
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
</div>
{% endfor %}
```
## Example 6: Working with Cart
**You ask Claude:**
> "Show me how to display cart items with their quantities"
**Claude will use:**
1. `get_liquid_object("cart")` - Cart object documentation
2. `get_liquid_object("line_item")` - Line item properties
3. `get_liquid_tag("for")` - Iteration syntax
**You'll receive:** Working code example:
```liquid
<h2>Your Cart</h2>
{% for item in cart.items %}
<div class="cart-item">
<p>{{ item.title }} - Quantity: {{ item.quantity }}</p>
<p>{{ item.line_price | money }}</p>
</div>
{% endfor %}
<p>Total: {{ cart.total_price | money }}</p>
```
## Example 7: Conditional Display
**You ask Claude:**
> "How do I show content only if a product is available?"
**Claude will use:**
1. `get_liquid_tag("if")` - Conditional logic
2. `get_liquid_object("product")` - To see the available property
**You'll receive:**
```liquid
{% if product.available %}
<button>Add to Cart</button>
<p>Price: {{ product.price | money }}</p>
{% else %}
<p>Sold Out</p>
{% endif %}
```
## Example 8: Date Formatting
**You ask Claude:**
> "How can I format dates in Shopify Liquid?"
**Claude will use:** `get_liquid_filter("date")`
**You'll receive:** Complete date filter documentation with format options:
```liquid
{{ article.published_at | date: "%B %d, %Y" }}
Output: November 22, 2025
{{ "now" | date: "%Y-%m-%d" }}
Output: 2025-11-22
```
## Example 9: Working with Collections
**You ask Claude:**
> "How do I filter a collection by tag?"
**Claude will use:**
1. `get_liquid_object("collection")` - Collection properties
2. `search_liquid_docs(["filter", "tag"])` - Find filtering methods
3. `get_liquid_tag("for")` - Loop syntax
**You'll receive:** Solution with tagged collection handling:
```liquid
{% for product in collections.all.products %}
{% if product.tags contains 'featured' %}
<div class="featured-product">
{{ product.title }}
</div>
{% endif %}
{% endfor %}
```
## Example 10: String Manipulation
**You ask Claude:**
> "I need to truncate product descriptions to 100 characters"
**Claude will use:** `search_liquid_docs(["truncate", "string"])`
**You'll receive:**
```liquid
{{ product.description | strip_html | truncate: 100 }}
```
## Example 11: Array Operations
**You ask Claude:**
> "How do I get the first 3 products from a collection?"
**Claude will use:**
1. `get_liquid_tag("for")` - Loop with limit parameter
2. `get_liquid_filter("first")` - Array filter options
**You'll receive:**
```liquid
{% for product in collection.products limit:3 %}
{{ product.title }}
{% endfor %}
```
## Example 12: Working with Images
**You ask Claude:**
> "How do I display product images at different sizes?"
**Claude will use:**
1. `get_liquid_object("image")` - Image object properties
2. `search_liquid_docs(["image", "size"])` - Image filters
**You'll receive:**
```liquid
<!-- Small thumbnail -->
<img src="{{ product.featured_image | img_url: 'small' }}" />
<!-- Medium size -->
<img src="{{ product.featured_image | img_url: 'medium' }}" />
<!-- Large size -->
<img src="{{ product.featured_image | img_url: 'large' }}" />
```
## Real-World Scenarios
### Scenario 1: Building a Product Grid
**Question:** "Create a responsive product grid showing 4 products per row"
**Claude uses multiple tools and provides:**
```liquid
<div class="product-grid">
{% for product in collection.products %}
<div class="product-card">
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
{% if product.available %}
<button>Add to Cart</button>
{% else %}
<span class="sold-out">Sold Out</span>
{% endif %}
</div>
{% endfor %}
</div>
```
### Scenario 2: Customer Account Page
**Question:** "Show customer order history"
**Claude provides:**
```liquid
{% if customer %}
<h2>Welcome, {{ customer.first_name }}!</h2>
<h3>Your Orders</h3>
{% for order in customer.orders %}
<div class="order">
<p>Order #{{ order.order_number }}</p>
<p>Date: {{ order.created_at | date: "%B %d, %Y" }}</p>
<p>Total: {{ order.total_price | money }}</p>
</div>
{% endfor %}
{% else %}
<p>Please log in to view your orders.</p>
{% endif %}
```
### Scenario 3: Blog Article List
**Question:** "Display recent blog articles with excerpts"
**Claude provides:**
```liquid
{% for article in blog.articles limit:5 %}
<article>
<h2>{{ article.title }}</h2>
<p class="meta">
By {{ article.author }} on {{ article.published_at | date: "%b %d, %Y" }}
</p>
<div class="excerpt">
{{ article.excerpt | strip_html | truncate: 200 }}
</div>
<a href="{{ article.url }}">Read more</a>
</article>
{% endfor %}
```
## Tips for Best Results
1. **Be specific** - Ask about specific tags, filters, or objects by name
2. **Describe your goal** - Claude can find the right tools for your use case
3. **Ask for examples** - Request code examples for practical implementation
4. **Combine concepts** - Ask about multiple features together (loops + filters + objects)
5. **Check availability** - Ask Claude to list available options when exploring
## Common Questions
**"What's the difference between assign and capture?"**
Claude will retrieve both tag docs and explain the differences.
**"How do I work with metafields?"**
Claude will get the metafield object documentation.
**"What filters are available for arrays?"**
Claude will list all array filters with descriptions.
**"How do I create a search results page?"**
Claude will retrieve search object, pagination, and loop documentation.
## Getting Help
Within Claude, you can always ask:
- "What tools do you have for Shopify Liquid?"
- "List all available Liquid tags"
- "Search for documentation about [topic]"
- "Show me examples of [feature]"
The MCP server gives Claude instant access to all 198 pages of Shopify Liquid documentation!