Presets, icons & CSS

Pro's design extras: one-click design presets, your own SVG cart icons and custom CSS. Colors, panel text and styling are free settings on the Appearance, General and Floating Cart tabs.

ProAppearance · Advanced

Design presets

Pro adds Quick Presets to the top of the free Appearance tab (shown while your license is active). Click one to fill in that tab's colors, font size, corners and shadow; then fine-tune and Save Changes. Nothing is saved until you click Save Changes.

PresetPrimaryStyle
Clean#2563eb blueThe plugin's default look; 10 px corners
Modern#0369a1 skySoft tint, 14 px corners
Minimal#374151 graphiteNeutral, 4 px corners
Compact#0f766e tealSmaller text, 6 px corners
Premium#1d2b53 navyStrong shadow, 12 px corners
Elegant#8b6a3f bronzeWarm, 16 px corners
Bold#c0264b crimsonLarger text, strong shadow

A preset sets Primary, Secondary, Button Text, Text, Muted Text, Background and Border Color, Close & Remove Icon Color, Panel Tint Color, Panel Opacity (100%), Base Font Size, Corner Radius and Shadow Style. It leaves the rest of the tab (image size, variation details, quantity and animation) alone. The floating button follows the new Primary and Secondary Color unless you set its own colors on the Floating Cart tab.

A preset also sets Cart Goal → Progress Bar Color to its primary color. That field is saved with the Pro tabs, not with the Appearance tab: to keep it, also click Save Changes on a Pro tab such as Cart Goal before leaving the page.
  • The Quick Presets buttons with their color swatches at the top of the Appearance tab
  • The Colors fields below them, with the Live Preview

Custom SVG icons

Mini Cart Custom Icon (SVG)
Advanced → Mini/Side Cart

Your own icon for the Mini Cart button, also used for the replaced header cart icon. Needs Enable Mini/Side Cart Style on. Leave it blank to use the Cart Icon chosen in General → Mini Cart.

Enable Floating Cart Custom Icon
Default OffAdvanced → Floating Cart

Turns on the field below. The button's size, colors and shape are set on the free Floating Cart tab.

Floating Cart Custom Icon (SVG)

Your own icon for the floating button. Leave it blank to use the Icon chosen on the Floating Cart tab.

Upload simple, single-color SVGs. For safety, styles, classes, gradients and embedded images are removed, so complex icons may show blank. While Pro is active, Shop Managers and Administrators can upload SVG files.

Custom CSS

Advanced → Custom CSS: your own CSS, loaded after the plugin's styles on pages where a cart appears. Saving it needs the "edit CSS" permission (Administrators). The characters < and > are removed, so use descendant selectors instead of >.

#siteryn-mcsc-side-cart .siteryn-mcsc-item { padding-block: 14px; }
#siteryn-mcsc-side-cart-trigger { box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }