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