# Customizing Shopify App Block Styles

## Introduction

You can use Nimstrata's pre-defined CSS classes within the Shopify theme editor or your existing stylesheets to customize the look and feel of the Search Results, Collection Pages, and Recommendations AI App Blocks.

Nimstrata's App Blocks are designed to be very flexible, offering Shopify merchants, developers, or marketing agencies the ability to quickly customize them to match style or branding requirements.

!!!success Default Styles Available
The Shopify app includes default styles so you can get started with no code, or, you can add your own **custom CSS**.
Nimstrata has also partnered with best-in-class Shopify agencies to design and build pixel-perfect pages. [Schedule a call](https://calendly.com/nimstrata/better-search) to learn more.
!!!

<br/>

## Custom Styling

Each App Block has several CSS classes that match the _BEM_, or _Block-Editor-Modifier_ [methodology](https://getbem.com/introduction/), beginning with **rcc** for "Retail Cloud Connect™", followed by the App Block type, component, and state.

!!!light Shared CSS Classes
Collection pages and search results are powered by the same Google Cloud Discovery AI functionality, so **Search Results** and **Product Grid** Collection Page App Blocks share CSS class names.
!!!

<br/>

## 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.
![](/static/images/inspect-elements.png)
