> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fluid.app/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> For new direct REST integrations, use the v2026-04 surfaces. The @fluid-app FairShare SDK continues to use its own published public-v2025-06 contract.
> Authenticate with the header Authorization: Bearer <token>; public storefront read endpoints require no auth.
> Lists use cursor pagination via the page[cursor] and page[limit] query params; follow meta.pagination.next_cursor until it is null.
> Never use /api/company/v1 or /api/v1 paths, page/per_page params, or offset pagination — they are legacy.
> The OpenAPI specs under api-reference/ are the authoritative contracts; prefer them over prose when in doubt. api-reference/storefront-v2026-04.yaml covers the v2026-04 storefront surface (/api/v202604/... paths); api-reference/auth-v0.yaml covers the unversioned auth surface (/api/... paths — authentication, MFA, social auth, and token exchange); api-reference/checkout-v2026-04.yaml covers the v2026-04 checkout surface (/api/checkout/v2026-04/... paths — carts, cart auth, discounts, items, subscriptions, orders, enrollments, and store config); api-reference/public-v2025-06.yaml covers the Public SDK surface used by the @fluid-app FairShare SDK, including its parallel cart lifecycle, browser integrations, versioned payment callbacks, unversioned public utilities, and the cart price-override operation; api-reference/payment-v2026-04.yaml covers the v2026-04 payment gateway admin surface (/api/payment/v2026-04/... paths, bearer-authenticated — gateway CRUD, gateway purchase/authorize/$0-verify, transaction list/show and capture/void/credit, and merchant payment configuration); api-reference/payments-v2026-04.yaml covers the v2026-04 cart payment surface (/api/payments/v2026-04/carts/{cart_token}/... paths, authenticated by the cart token in the path with no bearer — payment-method selection, VGS card tokenization, 3D Secure verification, and PayPal/Braintree/Klarna/Apple Pay flows); api-reference/commerce-v2026-04.yaml covers the v2026-04 commerce order-editing surface (/api/v202604/orders/{order_id}/edits paths, bearer-authenticated — post-checkout order edits that atomically insert items and add adjustments/discounts, with an optional dry-run preview); api-reference/webhooks-v0.yaml covers the unversioned webhooks surface (/api/... paths — webhook registration, delivery payloads, callback registrations, company events, and webhook/callback schemas).
> Successful responses wrap the resource payload alongside a top-level integer status and a meta object.

# Transform theme images

> Resize, crop, and reformat ImageKit images with the image_url and img_url Liquid filters.

Use the `image_url` filter to request an ImageKit rendition that fits your
layout. The `img_url` filter is a legacy alias with the same transformation
behavior.

```liquid theme={null}
{{ section.settings.image | image_url: "w-600,c-at_max,f-auto,q-80" }}
```

Both filters accept a URL string, an image value, or a hash with a `url` or
`src` key. They return an empty string for an empty input.

## Choose a transformation syntax

Pass a comma-separated ImageKit transformation string when you need direct
control:

```liquid theme={null}
{{ section.settings.image | image_url: "w-600,f-auto,q-80" }}
{{ section.settings.image | image_url: "n-product_card" }}
```

Each raw token must use ImageKit's `code-value` form. Whitespace around commas
is ignored. You can also use named parameters for common operations:

| Parameter | ImageKit code | Example          |
| --------- | ------------- | ---------------- |
| `width`   | `w`           | `width: 600`     |
| `height`  | `h`           | `height: 400`    |
| `quality` | `q`           | `quality: 80`    |
| `format`  | `f`           | `format: "auto"` |
| `crop`    | `fo`          | `crop: "center"` |

```liquid theme={null}
{{ section.settings.image
  | image_url: width: 600, height: 400, quality: 80, format: "auto"
}}
```

This produces the transformation
`w-600,h-400,q-80,f-auto`. You can combine a raw string and named parameters:

```liquid theme={null}
{{ section.settings.image | image_url: "c-at_max,f-auto", width: 600, quality: 80 }}
```

`crop` accepts `top`, `bottom`, `left`, `right`, or `center`. It adds an
ImageKit focus token only when you also provide `width` or `height`.

For other operations, use the corresponding raw ImageKit token. See the
[ImageKit transformation reference](https://imagekit.io/docs/image-transformation)
for available codes and values.

## Understand URL handling

The filters transform only URLs on Fluid's configured ImageKit host. A
third-party URL, including a URL from another ImageKit account, remains
unchanged.

If an ImageKit URL already contains a path-based `tr:` segment, the new
transformation replaces it. Calling either filter without a valid
transformation returns the resolved URL unchanged.

## Replace Shopify size strings

The `img_url` alias preserves Shopify-style size strings such as `"800x800"`
and `"master"` for compatibility. It does not convert them into ImageKit
transformations.

Replace those strings when you want Fluid to resize an image:

| Preserved input                      | ImageKit replacement                                 |
| ------------------------------------ | ---------------------------------------------------- |
| `img_url: "300x200"`                 | `image_url: width: 300, height: 200`                 |
| `img_url: "300x300", crop: "center"` | `image_url: width: 300, height: 300, crop: "center"` |
| `img_url: "master"`                  | `image_url`                                          |

For responsive markup and sensible loading defaults, use the
[`media_tag` filter](/themes/media-tag). See the
[theme developer guide](/themes/developer-guide) for more Liquid examples.