> ## 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.

# Styling recommendations with custom CSS

> Restyle the Depict Recommendations section with custom CSS: its classes, data attributes and CSS variables, where to put your CSS, and copy-paste examples.

The [section settings](/shopify-lite/recommendations#section-settings) cover
items per row, card spacing, arrows, color scheme, card and hover images, and
the heading. For anything beyond those, the **Depict Recommendations** section
exposes stable classes, data attributes and CSS variables you can target from
custom CSS.

<Tip>
  Try the section settings first: they need no CSS, and you see the result
  in the theme editor as you change them.
</Tip>

## How the section is built

```text theme={null}
section.depict-rec-section            ← the whole carousel
└─ div.depict-rec-section__inner      ← width-limited column
   ├─ h2.depict-rec-section__heading  ← only when a heading is set
   └─ div.depict-recs__viewport       ← positions the arrows
      ├─ button.depict-recs__nav-btn.depict-recs__nav-btn--prev
      │  └─ span.depict-recs__nav-icon
      ├─ div.depict-recs__grid        ← the scrolling row
      │  └─ div.depict-recs__item     ← one per product, wraps a product card
      └─ button.depict-recs__nav-btn.depict-recs__nav-btn--next
```

**The product cards are your theme's own cards.** Depict renders each product
with your theme's product card, so cards match the rest of your store. That
means the card's title, price, image and hover image carry your theme's class
names, not Depict's. See [Styling the product cards](#styling-the-product-cards).

When your theme's card can't be used, the section shows a simple card of its
own instead (`.depict-recs__card`, listed below).

## Classes

| Class | Element | Description |
| - | - | - |
| `.depict-rec-section` | `<section>` | The whole carousel. Holds the layout variables and the vertical padding (`2rem` top and bottom). Your theme's color-scheme classes are added here too. |
| `.depict-rec-section--align-left`, `--align-center`, `--align-right` | `<section>` | The **Heading alignment** setting. |
| `.depict-rec-section--arrow-none`, `--arrow-chevron`, `--arrow-arrow`, `--arrow-circle`, `--arrow-square` | `<section>` | The **Navigation arrows** setting. |
| `.depict-rec-section--arrows-overlay`, `--arrows-gutter` | `<section>` | The **Arrow placement** setting (`gutter` is **Sides**). |
| `.depict-rec-section__inner` | `<div>` | The content column. Follows your theme's page width and side margins. |
| `.depict-rec-section__heading` | `<h2>` | The heading. Uses your theme's heading font, weight and color. |
| `.depict-rec-section__block` | `<div>` | Wraps each block you add to the section in the theme editor. |
| `.depict-recs__viewport` | `<div>` | Holds the row and the arrows. |
| `.depict-recs__grid` | `<div>` | The scrolling row of cards (flexbox, horizontal scroll with snapping, hidden scrollbar). |
| `.depict-recs__item` | `<div>` | One product. Its width comes from the items-per-row and spacing settings; the product card sits inside it. |
| `.depict-recs__nav-btn` | `<button>` | Both arrow buttons. |
| `.depict-recs__nav-btn--prev`, `--next` | `<button>` | The previous or next arrow. |
| `.depict-recs__nav-icon` | `<span>` | The arrow icon, an SVG drawn in the text color. |
| `.depict-recs__card` | `<article>` | **Simple card only.** The card shown when your theme's card can't be used. |
| `.depict-recs__media` | `<a>` | **Simple card only.** The square image link. |
| `.depict-recs__meta` | `<div>` | **Simple card only.** Holds the title and price. |
| `.depict-recs__title` | `<a>` | **Simple card only.** The product title, clamped to two lines. |
| `.depict-recs__price` | `<span>` | **Simple card only.** The price. |

## Data attributes

| Attribute | Element | Description |
| - | - | - |
| `data-depict-recommendations-section` | `<section>` | On every recommendations section. |
| `data-depict-surface` | `<section>` | The [surface](/shopify-lite/recommendations#surfaces) the section shows, such as `pdp` or `cart`. Use it to style one carousel differently. |
| `data-depict-page` | `<section>` | The page template: `product`, `cart`, `index` (home page) or `collection`. |
| `data-depict-overflow` | `<section>` | Present while the row holds more cards than fit on screen. The arrows only show while it is set. |
| `data-depict-rec-card` | `.depict-recs__item` | On every card wrapper. |
| `data-depict-card-index` | `.depict-recs__item` | The card's position, counted from `0`. |
| `data-depict-product-id` | `.depict-recs__item` | The Shopify product ID. |

Other `data-depict-*` attributes are for diagnostics and may change; don't
style against them.

## CSS variables

Set these on `.depict-rec-section`, using the
[selector prefix](#specificity-beating-the-defaults):

| Variable | Default | Description |
| - | - | - |
| `--depict-max-width` | Your theme's page width | Maximum width of the content column. `100%` drops the page-width cap (your theme's side margins still apply); a value such as `1200px` narrows it. |
| `--depict-side` | `1rem` | Side inset of the content column, used when your theme sets no page margin of its own. |

The section settings write the following variables directly on the element.
Change the setting rather than the variable; overriding one from CSS needs
`!important`.

| Variable | Setting |
| - | - |
| `--depict-items-desktop` | Items per row (desktop) |
| `--depict-items-mobile` | Items per row (mobile) |
| `--depict-card-gap` | Space between cards |
| `--depict-heading-size` | Heading size |

Any other `--depict-*` variable is internal and may change.

## Where to put your CSS

Each of these survives Depict's updates to the section.

### The section's Custom CSS field — one carousel

In the theme editor, select the **Depict Recommendations** section. In
themes that support it, a **Custom CSS** field sits at the bottom of the
section's settings. Rules here apply to that one section only, and Shopify
scopes them to the section, which already outranks Depict's defaults.

### Theme settings → Custom CSS — every carousel

In the theme editor, open **Theme settings** (the gear icon) and expand
**Custom CSS**. Rules here apply across your whole store, so every
recommendations carousel picks them up.

### Your theme's stylesheet — larger changes

In Shopify admin go to **Online Store → Themes**, click **⋯ → Edit code**
on your theme, and add your rules to its main stylesheet (for example
`assets/base.css`). Updating your theme to a new version replaces its
files, so keep a copy of your rules.

Shopify limits the length of both Custom CSS fields and doesn't allow some
rules, such as `@import`. `@media` queries work.

<Warning>
  Don't edit `sections/depict-recommendations.liquid` in your theme's code.
  Depict replaces that file when it updates the section, and your changes are
  lost.
</Warning>

## Specificity: beating the defaults

Depict's own rules mostly use single-class selectors and can load after your
theme's CSS, so a rule with the same single class can lose to them. Start your
selectors with this prefix:

```css theme={null}
.depict-rec-section[data-depict-recommendations-section]
```

That's enough for every element except the arrow buttons, whose style rules
are more specific. For the arrows, also go through the viewport:

```css theme={null}
.depict-rec-section[data-depict-recommendations-section] .depict-recs__viewport .depict-recs__nav-btn {
  /* … */
}
```

Two cases need `!important`:

* **Hiding the whole section**, because Depict shows it with
  `display: block !important`.
* **Overriding a section setting's variable**, such as `--depict-card-gap`.

In a section's own Custom CSS field the prefix isn't needed, but it does no
harm there.

## Styling the product cards

Because the cards are your theme's own, find their class names with your
browser's **Inspect** tool: right-click a recommended product's title, price or
image and note its classes. Then scope those classes to the section, so the
change doesn't reach the rest of your store:

```css theme={null}
/* Your theme's card, but only inside Depict recommendations. */
.depict-rec-section[data-depict-recommendations-section] .your-card-title-class {
  /* … */
}
```

The examples below use the class names of Dawn and Dawn-based themes
(`.card__heading`, `.price`, `.media--hover-effect`); swap in your theme's
classes where they differ. If your store shows the simple card, use
`.depict-recs__title`, `.depict-recs__price` and `.depict-recs__media`.

## Examples

Each example is complete: paste it into one of the
[Custom CSS locations](#where-to-put-your-css) as it is.

### Card spacing

Prefer the **Space between cards** setting. To use a different spacing on
mobile:

```css theme={null}
/* 24px between cards on desktop, 8px on mobile. */
.depict-rec-section[data-depict-recommendations-section] {
  --depict-card-gap: 24px !important;
}
@media (max-width: 749px) {
  .depict-rec-section[data-depict-recommendations-section] {
    --depict-card-gap: 8px !important;
  }
}
```

With **Sides** arrow placement the spacing never shrinks below the room the
arrows need.

### Cards per row

Prefer the **Items per row** settings. To show a fraction of the next card, a
hint that the row scrolls:

```css theme={null}
/* 4.5 cards on desktop, 1.5 on mobile. */
.depict-rec-section[data-depict-recommendations-section] {
  --depict-items-desktop: 4.5 !important;
  --depict-items-mobile: 1.5 !important;
}
```

To lay all cards out as a wrapping grid instead of a scrolling row, let the
row wrap and drop the arrows. Each line holds the **Items per row** count; set
**Max products to show** to a multiple of it so the last line is full.

```css theme={null}
/* Wrapping grid instead of a carousel. */
.depict-rec-section[data-depict-recommendations-section] .depict-recs__grid {
  flex-wrap: wrap;
  overflow-x: visible;
  overflow-y: visible;
  row-gap: 32px;
}
.depict-rec-section[data-depict-recommendations-section] .depict-recs__viewport .depict-recs__nav-btn {
  display: none;
}
```

### Section width and padding

```css theme={null}
/* No page-width cap, and more space above and below. */
.depict-rec-section[data-depict-recommendations-section] {
  --depict-max-width: 100%;
  padding-block: 4rem;
}
```

### Heading typography

Size and alignment are section settings; font, weight and color come from your
theme's headings. To change those:

```css theme={null}
.depict-rec-section[data-depict-recommendations-section] .depict-rec-section__heading {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
```

### Product title and price

Dawn and Dawn-based themes:

```css theme={null}
/* Product title. */
.depict-rec-section[data-depict-recommendations-section] .card__heading {
  font-size: 1.4rem;
  font-weight: 600;
}
/* Price. */
.depict-rec-section[data-depict-recommendations-section] .price {
  font-size: 1.3rem;
  letter-spacing: 0;
}
```

Simple card:

```css theme={null}
.depict-rec-section[data-depict-recommendations-section] .depict-recs__title {
  font-weight: 600;
  -webkit-line-clamp: 1; /* one line instead of two */
}
.depict-rec-section[data-depict-recommendations-section] .depict-recs__price {
  opacity: 1;
  font-weight: 700;
}
```

### Hover image

To change which image shows on hover, use the **Hover image** setting. To turn
the hover image off, untick **Show secondary image on hover**, or switch it off
in your theme's own product card settings where the section doesn't offer it.

If neither is available, Dawn and Dawn-based themes can switch it off for
recommendations only:

```css theme={null}
/* Keep the first image on hover; never show the second. */
.depict-rec-section[data-depict-recommendations-section] .media--hover-effect > img + img {
  display: none;
}
.depict-rec-section[data-depict-recommendations-section] .media--hover-effect > img:first-child {
  opacity: 1 !important;
}
```

### Slider arrows

```css theme={null}
/* Dark round arrows. */
.depict-rec-section[data-depict-recommendations-section] .depict-recs__viewport .depict-recs__nav-btn {
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: #111;
  color: #fff;
  box-shadow: none;
}
/* Bigger icon. */
.depict-rec-section[data-depict-recommendations-section] .depict-recs__nav-icon svg {
  width: 20px;
  height: 20px;
}
/* Keep the arrow at the start or end of the row visible, but faded. */
.depict-rec-section[data-depict-recommendations-section] .depict-recs__viewport .depict-recs__nav-btn:disabled {
  opacity: 0.4;
}
```

Arrows only show while the row scrolls past one screenful, and never on touch
devices. To remove them, set **Navigation arrows** to **None**.

### Hiding an element

```css theme={null}
/* Hide the heading of the cart carousel only. */
.depict-rec-section[data-depict-recommendations-section][data-depict-surface="cart"] .depict-rec-section__heading {
  display: none;
}

/* Hide prices in recommendations (Dawn and Dawn-based themes). */
.depict-rec-section[data-depict-recommendations-section] .price {
  display: none;
}

/* Show only the first 4 products on mobile. */
@media (max-width: 749px) {
  .depict-rec-section[data-depict-recommendations-section] .depict-recs__item:nth-child(n + 5) {
    display: none;
  }
}

/* Hide the whole carousel on the home page. */
.depict-rec-section[data-depict-recommendations-section][data-depict-page="index"] {
  display: none !important;
}
```

To remove a carousel for good, remove the section in the theme editor instead.

### Mobile breakpoints

The section switches to its mobile layout at **749px** wide and below: the
mobile items-per-row, a smaller heading and tighter edges. Any touch screen is
swipe-only, with no arrows. Use the same breakpoint so your rules switch
together with the section's:

```css theme={null}
@media (max-width: 749px) {
  .depict-rec-section[data-depict-recommendations-section] {
    padding-block: 1.5rem;
  }
  .depict-rec-section[data-depict-recommendations-section] .depict-rec-section__heading {
    text-align: center;
  }
}

/* Tablets: 3 cards per row. */
@media (min-width: 750px) and (max-width: 989px) {
  .depict-rec-section[data-depict-recommendations-section] {
    --depict-items-desktop: 3 !important;
  }
}
```