Skip to main content
The 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.
Try the section settings first: they need no CSS, and you see the result in the theme editor as you change them.

​
How the section is built

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

​
Data attributes

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: The section settings write the following variables directly on the element. Change the setting rather than the variable; overriding one from CSS needs !important. Any other --depict-* variable is internal and may change.

​
Where to put your CSS

Each of these survives Depict’s updates to the section. 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. 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.
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. The same goes for snippets/depict-rec-item.liquid and the files Personalized surfaces use: sections/depict-rec-card.liquid and the product.depict-rec-card, product.depict-rec-card-all and collection.depict-rec-fallback templates. Don’t delete them either.
Sections showing a Personalized surface use the same markup, so the same CSS applies to them.

​
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:
That’s enough for every element except the arrow buttons, whose style rules are more specific. For the arrows, also go through the viewport:
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:
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 as it is.

​
Card spacing

Prefer the Space between cards setting. To use a different spacing on mobile:
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:
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.

​
Section width and padding

​
Heading typography

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

​
Product title and price

Dawn and Dawn-based themes:
Simple card:

​
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:

​
Slider arrows

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

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: