1. Shopify App Carousels
  2. Customizing Carousels with CSS

Shopify App Carousels

Customizing Carousels with CSS

Introduction

The Shopbox carousels use a minimal, utility-focused set of CSS classes, making it easy to override or extend styles as needed.


Where to Add Your Styles

We recommend placing them in the Custom CSS section of the "Apps" block within your theme editor.

If you'd like the styles to be shared across multiple templates, pages, or carousels, consider adding them to a global CSS file in your theme.

To apply custom styles to a single carousel instance, use the unique Shopify section ID as a parent selector. For example:

#shopify-section-{{ section.id }} .sb-product-card {
  background-color: #f9f9f9;
}

Below are the classes you can target:

Class Description
.sb-product-carousel-section Outer container for the entire carousel section
.sb-carousel-title Styles for the carousel title
.sb-product-card Wrapper for each product card
.sb-product-card__image-wrapper Container for the product image
.sb-product-card__image Main product image
.sb-product-card__secondary-image Secondary image shown on hover
.sb-product-card__title Product title styling
.sb-product-card__price Product price styling
.sb-product-card__button Button inside the product card
.sb-button--primary Primary button style
.sb-button--secondary Secondary button style
.sb-button--outline Outline button style
.sb-carousel__arrow Carousel navigation arrows
.sb-carousel__bullets Pagination bullet container