Custom CSS Reference

The gallery's class names, and a few tested recipes to paste into Additional CSS when the built-in options don't go quite far enough.

Paste your CSS at FluentCart → Product Gallery → Advanced → Additional CSS (details). It loads after the plugin's own styles, so your rules win when both target the same thing. Because it only loads where the gallery appears, it can't leak into the rest of your site. Your theme's Customizer → Additional CSS works too, if you'd rather keep all your CSS in one place.

Use the settings first

Most colors, borders, sizes and spacing already have a setting. Settings survive plugin updates and are easier for the next person to find. Reach for CSS when there's no option for what you need.

The structure

Every gallery (automatic, shortcode or block) produces the same markup. The outer element always carries the layout's key, so you can target one layout:

.sp-fcpg-wrapper.fcg_horizontal              ← the whole gallery; second class = layout key
└─ .sp-fcpg-swiper-container
   ├─ .sp-fcpg-main-swiper                   ← main image slider (slider layouts)
   │  ├─ .swiper-wrapper > .swiper-slide
   │  │  └─ .sp-fcpg-slider-image            ← one image's frame
   │  │     ├─ a.sp-fcpg-slider-lightbox     ← lightbox link (when the lightbox is on)
   │  │     │  └─ img.sp-fcpg-main-image
   │  │     └─ .sp-fcpg-slider-image-caption ← caption (when Gallery Image Caption is on)
   │  ├─ .swiper-button-prev / .swiper-button-next (.swiper-arrow)
   │  └─ .swiper-pagination
   └─ .gallery-navigation-carousel-wrapper   ← thumbnail strip area
      ├─ .sp-fcpg-thumbs-swiper
      │  └─ .sp-fcpg-thumb                   ← one thumbnail (.swiper-slide-thumb-active when selected)
      │     └─ img.sp-fcpg-thumb-image
      └─ .swiper-button-prev / .swiper-button-next

Grid layouts (Tiles, Hierarchy Grid, Modern Grid, Anchor Nav, Vertical Scroll) replace the slider with a grid:

.sp-fcpg-grid-template-container            (+ .scroll-enabled when Gallery Expansion is Scroll)
└─ .sp-fcpg-grid-template
   └─ .sp-fcpg-grid-template-slide           ← one grid item (.sp-fcpg-hidden-item until "Show More")
      └─ .sp-fcpg-slider-image.sp-fcpg-grid-image
.sp-fcpg-toggle-btn-container > .sp-fcpg-toggle-btn   ← the Show More button

Layout keys

Layout	Class on .sp-fcpg-wrapper
Thumbs Bottom	fcg_horizontal
Thumbs Top	fcg_horizontal_top
Thumbs Left	fcg_vertical
Thumbs Right	fcg_vertical_right
Multi-row Thumbs	fcg_multi_row_thumb
Slider	fcg_hide_thumb
Tiles	fcg_grid
Hierarchy Grid	fcg_modern
Modern Grid	fcg_modern_grid
Anchor Nav	fcg_anchor_navigation
Vertical Scroll	fcg_vertical_scroll

Other useful classes

Class	Where
.sp-fcpg-lightbox-enabled	On .sp-fcpg-wrapper when the lightbox is on
.sp-fcpg-fixed-height	On .sp-fcpg-wrapper when Gallery Height is Fixed Height
.swiper-pagination-bullet, .swiper-pagination-bullet-active	The pagination dots
.sp-fcpg_xzoom-lens, .sp-fcpg_xzoom-preview	The zoom lens and the zoom window/preview
.sp-fcpg-fancybox-wrapper	The lightbox. It sits outside the gallery, at the end of the page. Inside it are the Fancybox classes such as .fancybox__caption and .fancybox__toolbar
.sp-fcpg-no-images	The "No images found for this product." message

Recipes

Each recipe uses selectors from the plugin's own markup and stylesheet. Paste one, save, and reload a product page.

Hide the thumbnail strip on phones

On small screens a thumbnail strip can push the price and buy button a long way down. This keeps the main image, with its swipe and dots, and drops the strip below 768px:

@media (max-width: 767px) {
  .sp-fcpg-wrapper .gallery-navigation-carousel-wrapper {
    display: none;
  }
}

Give the main-image arrows a soft shadow

The settings cover arrow color, size and corner radius, but not a shadow. This one lifts the arrows off busy photos:

.sp-fcpg-main-swiper .swiper-arrow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

Put a light backdrop behind product images

Transparent PNG cut-outs can look like they're floating. A soft background frames them:

.sp-fcpg-wrapper .sp-fcpg-slider-image {
  background: #f5f5f5;
}

Style the on-page caption

When Gallery Image Caption is on, captions sit over the image. To make them smaller and italic:

.sp-fcpg-wrapper .sp-fcpg-slider-image-caption span {
  font-size: 13px;
  font-style: italic;
}

Make the Show More button full width

.sp-fcpg-toggle-btn-container .sp-fcpg-toggle-btn {
  width: 100%;
  justify-content: center;
}

Only on one layout

Prefix any rule with the layout class to scope it. For example, rounded thumbnails on Thumbs Left only:

.sp-fcpg-wrapper.fcg_vertical .sp-fcpg-thumb,
.sp-fcpg-wrapper.fcg_vertical .sp-fcpg-thumb-image {
  border-radius: 50%;
}

Class names can change

These classes come from the plugin's current markup. They're stable in practice, but they aren't a formal API. After a major update, give your product pages a quick look. If a rule has stopped working, use your browser's Inspect tool on the gallery to find the new class.

Where to go next

• Advanced → Additional CSS: where to paste these.
• Shortcode: the same markup on any page.
• Troubleshooting: when the gallery looks broken rather than just unstyled.