Custom CSS Examples and Selectors

The GG Product Page Slider supports full CSS customization. You can override any visual aspect of the gallery — from rounded corners and arrow styling to adding custom sale badges. Apply your own CSS rules directly in your Shopify theme or contact our support team for help. New to the app? Start with the Getting Started guide.

Here are some examples of what you can change:

/* Main container border radius (round corners) */
.pmslider-own--slides-wrapper {
  border-radius: 15px;
}

/* Thumbnails border radius (round corners) */
.pmslider-dots--type-thumbs .pmslider-dots_dot {
  border-radius: 5px;
}

/* Arrows thickness */
.pmslider-arrows_area svg {
  stroke-width: 32px;
}

/* Arrows size 80% of the original */
.pmslider-arrows_arrow {
  transform: scale(0.8)
}

Adding a Custom Sale Badge

.pmslider-own--slides-wrapper:after {
    content: 'Sale';
    background: #cae6a7;
    color: #035703;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 12px;
    width: fit-content;
    margin: 16px 20px;
}