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

# Content features theme integration

> Theme markup Depict needs on collection pages for content cards, image settings and product duplicates to work.

> [!NOTE]
>
> This page is aimed at a merchant's theme developer: the person editing the
> collection section and product card snippet of the Shopify theme.

Depict's script needs to know three things about your collection page:
where the product grid starts, where it ends, and which product each card
belongs to. It reads all of this from the DOM, so the integration is a few
small additions to your theme's collection section and product card snippet.

## 1. Mark the start of the grid

As the **first child** of the product grid element (the element whose direct
children are the product cards), add a `<depict-grid-start-beacon>` element.
It carries the pagination state of the current page so Depict can place
content cards and duplicates at the right positions.

```liquid theme={null}
<depict-grid-start-beacon
  {% liquid
    comment
      Set the defaults that apply when a theme loops over collection.products
      without pagination.
    endcomment

    assign depict_page_size = "50"
    if paginate.page_size
      assign depict_page_size = paginate.page_size
    endif

    assign depict_pagination_pages = "1"
    if paginate.pages
      assign depict_pagination_pages = paginate.pages
    endif

    assign depict_current_page = "0"
    if paginate.current_page
      comment
        Make depict_current_page 0-indexed; that is what the script expects.
      endcomment
      assign depict_current_page = paginate.current_page | minus: 1
    endif
  %}
  style="display:none;"
  data-paginate='
    {
      "page_size": {{ depict_page_size }},
      "pages": {{ depict_pagination_pages }},
      "current_page": {{ depict_current_page }}
    }
  '
></depict-grid-start-beacon>
```

Example rendered output:

```html theme={null}
<depict-grid-start-beacon
  style="display:none;"
  data-paginate='
    {
      "page_size": 16,
      "pages": 1,
      "current_page": 0
    }
  '
></depict-grid-start-beacon>
```

## 2. Mark the end of the grid

As the **last child** of the product grid element (more precisely, as any
element sibling that comes after the last product card), add:

```html theme={null}
<depict-grid-end-beacon style="display:none;"></depict-grid-end-beacon>
```

## 3. Tag each product card

On an element inside the product card (the top element or any child), add
the following data attributes.

| Attribute | Liquid | Purpose |
| - | - | - |
| `data-depict-product-id` | `{{ product.id }}` | Required. Lets Depict match the card to a product. |
| `data-depict-default-image` | `{{ product.featured_media.src }}` | Optional. The card's default image, used by image settings. |
| `data-depict-hover-image` | `{{ card_product.media[1].src }}` | Optional. The card's hover image, used by image settings. |

```liquid theme={null}
<div
  data-depict-product-id="{{ product.id }}"
  data-depict-default-image="{{ product.featured_media.src }}"
  data-depict-hover-image="{{ card_product.media[1].src }}"
>
  <!-- rest of product card -->
</div>
```

Example rendered output:

```html theme={null}
<div
  data-depict-product-id="15371075486078"
  data-depict-default-image="files/Main_b13ad453-477c-4ed1-9b43-81f3345adfd6.jpg"
  data-depict-hover-image="files/Main_0a40b01b-5021-48c1-80d1-aa8ab4876d3d.jpg"
>
  <!-- rest of product card -->
</div>
```

> [!TIP]
>
> The image attributes hold the media path exactly as Shopify returns it
> (for example `files/Main_….jpg`), not a full CDN URL. Use the variable name
> your card snippet already has for the product (`product`, `card_product`,
> and so on).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.