Customizing Shopify App Block Styles

Introduction

Retail Cloud Connect™ App Blocks include default storefront styles. Merchants, developers, and agencies can add small CSS overrides in the Shopify theme editor or a theme stylesheet to match storefront branding.

The Search Results and Product Grid collection App Blocks share most styling hooks because both use AI Commerce Search. Recommendations AI uses a different App Block container, but product cards share many of the same product-card class names.

Default Styles Available

The Retail Cloud Connect Shopify App includes default styles so merchants can get started with no code, or add custom CSS when needed. Nimstrata also works with Shopify agencies on custom storefront implementations. Schedule a call to learn more.

Custom Styling

Each App Block has CSS classes that follow the BEM, or Block Element Modifier methodology. Retail Cloud Connect classes use the rcc prefix, followed by the App Block type, component, and state.

Common Search Results and Product Grid collection selectors include:

Selector	Use
`.rcc-search`	Search and collection App Block root
`.rcc-search__grid`	Product grid container
`.rcc-search__product`	Product card
`.rcc-search__product__image`	Product card image frame
`.rcc-search__product__title`	Product card title
`.rcc-search__product__price`	Product card price
`.rcc-search__toolbar`	Search, filter, sort, and grid controls
`.rcc-search__facet`	Filter group
`.rcc-search__filter`	Filter option row
`.rcc-search__controls--drawer`	Mobile and drawer filter container

Shared CSS Classes

Collection pages and search results are powered by the same AI Commerce Search functionality, so Search Results and Product Grid Collection Page App Blocks share CSS class names.

Studio Theme Overrides

When an App Block uses the Studio style, override Studio CSS variables before writing component-specific selector rules. Variables keep colors, spacing, image treatments, loading placeholders, product cards, drawers, and modals aligned.

Studio Theme Variables

The Studio style exposes CSS custom properties on the App Block root. For Search Results and Product Grid collection App Blocks, the root selector is .rcc-search[data-theme='studio'].

Set variables on the App Block root when the change should apply across the full App Block, including loading placeholders and no-JavaScript fallback markup. Use direct class selectors only for component-specific changes that a Studio variable does not cover.

The CSS Wrapper Class App Block setting adds a class inside the App Block. It is useful for narrow product-grid or content styling, but Studio variables that should affect loading placeholders should be set on .rcc-search[data-theme='studio'] or another selector that reaches the App Block root.

Common Studio variables include:

Variable	Controls
`--rcc-studio-font-family`	App Block font stack
`--rcc-studio-color-text`	Primary text color
`--rcc-studio-color-muted`	Secondary text color
`--rcc-studio-color-subtle`	Low-emphasis text color
`--rcc-studio-color-accent`	Accent color for active states
`--rcc-studio-color-background`	Main App Block background
`--rcc-studio-color-surface`	Soft control and card surfaces
`--rcc-studio-color-surface-strong`	Stronger surface color
`--rcc-studio-color-border`	Default borders
`--rcc-studio-color-border-strong`	Hover, active, and high-emphasis borders
`--rcc-studio-color-focus`	Keyboard focus outline
`--rcc-studio-product-image-bg`	Product image frame background
`--rcc-studio-product-image-fit`	Product image `object-fit` value
`--rcc-studio-product-card-radius`	Product card corner radius
`--rcc-studio-product-image-radius`	Product image corner radius
`--rcc-studio-control-radius`	Search, sort, and button corner radius
`--rcc-studio-pill-radius`	Filter pill and option corner radius
`--rcc-studio-swatch-size`	Color swatch size
`--rcc-studio-grid-column-gap`	Product grid column gap
`--rcc-studio-grid-row-gap`	Product grid row gap
`--rcc-studio-page-inline-padding`	Left and right page padding
`--rcc-studio-page-block-padding`	Top App Block padding
`--rcc-studio-page-max-width`	App Block content width
`--rcc-studio-duration`	Standard transition duration
`--rcc-studio-ease`	Standard transition easing

The Product image aspect ratio App Block setting controls --rcc-studio-product-image-aspect-ratio. Prefer that setting for image ratio changes because the App Block writes the value on the root element for loading, fallback, and hydrated product cards.

Studio Theme Example

The example below customizes Search Results and Product Grid collection App Blocks that use the Studio style. Add the custom CSS after the Retail Cloud Connect App Block styles, such as in the theme stylesheet or Shopify custom CSS.

assets/rcc-custom.css
.rcc-search[data-theme='studio'] {
  --rcc-studio-font-family:
    var(--font-body-family, Inter), ui-sans-serif, system-ui, sans-serif;
  --rcc-studio-color-text: #1f1d1a;
  --rcc-studio-color-muted: #6b6259;
  --rcc-studio-color-subtle: #8c8178;
  --rcc-studio-color-accent: #7a4e2d;
  --rcc-studio-color-background: #fffdfa;
  --rcc-studio-color-surface: #f7f2ec;
  --rcc-studio-color-surface-strong: #eee3d7;
  --rcc-studio-color-border: #d8cbbf;
  --rcc-studio-color-border-strong: #1f1d1a;
  --rcc-studio-color-focus: #1f1d1a;
  --rcc-studio-product-image-bg: #f4eee6;
  --rcc-studio-product-image-fit: contain;
  --rcc-studio-product-card-radius: 6px;
  --rcc-studio-product-image-radius: 6px;
  --rcc-studio-control-radius: 4px;
  --rcc-studio-pill-radius: 999px;
  --rcc-studio-grid-column-gap: clamp(12px, 2vw, 24px);
  --rcc-studio-grid-row-gap: clamp(28px, 4vw, 48px);
  --rcc-studio-page-inline-padding: clamp(16px, 4vw, 64px);
  --rcc-studio-page-block-padding: clamp(20px, 3vw, 36px);
  --rcc-studio-page-max-width: 1500px;
  --rcc-studio-swatch-size: 28px;
}

.rcc-search[data-theme='studio'] .rcc-search__product__title {
  font-weight: 600;
}

.rcc-search[data-theme='studio'] .rcc-search__product__price {
  margin-top: 2px;
}

The first rule changes the Studio theme tokens for the whole App Block. The two component rules are intentionally small and scoped to Studio product cards because no Studio variable controls those exact text treatments.

For Recommendations AI App Blocks that use Studio, apply the same --rcc-studio-* variables on a scoped [data-theme='studio'] selector for the recommendation block.

Custom CSS Guidelines

Keep overrides scoped to .rcc-search[data-theme='studio'] or another App Block-specific selector.
Prefer Studio variables for colors, spacing, radii, typography, image fit, swatch sizing, and transitions.
Avoid copying the full Studio theme CSS into a storefront theme. Small overrides are easier to maintain when Retail Cloud Connect ships improvements.
Use the App Block Product image aspect ratio setting instead of overriding --rcc-studio-product-image-aspect-ratio in a stylesheet.
Test search, collection pages, loading states, filters, sorting, pagination, and mobile drawer filters after changing styles.

Inspecting Elements

The fastest way for most front-end developers to get started is to install an App Block, inspect each element, then edit a custom stylesheet.