Skip to content
SimplerSuite Recommendations

Widget Customization

Dashboard Settings

In the app dashboard under Widgets, each widget placement has customization options:

  • Title — The heading displayed above the recommendations (e.g., “You May Also Like”)
  • Layout — Grid or carousel
  • Products per row — 2, 3, 4, or 5
  • Show price — Toggle product price display
  • Show compare-at price — Show sale pricing with strikethrough
  • Show vendor — Toggle vendor/brand name

CSS Overrides

The widget uses BEM-style class names that you can override in your theme’s CSS:

/* Container */
.ssr-widget { }
.ssr-widget__title { }


/* Product grid */
.ssr-widget__grid { }
.ssr-widget__card { }
.ssr-widget__card-image { }
.ssr-widget__card-title { }
.ssr-widget__card-price { }
.ssr-widget__card-vendor { }


/* Carousel controls */
.ssr-widget__carousel-prev { }
.ssr-widget__carousel-next { }

Example: Custom Card Styling

.ssr-widget__card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 12px;
}


.ssr-widget__card-title {
  font-size: 14px;
  font-weight: 600;
}

Layout Options

Grid

Displays products in a responsive grid. The number of columns adjusts based on the container width and your “products per row” setting.

Displays products in a horizontally scrollable carousel with left/right navigation arrows. Supports touch swipe on mobile devices.