Skip to main content

Styling

Fast Simon PLP uses a shadow dom node to render out app without any css conflicts from site theme or apps, meaning:

  1. PLP will only inherit fonts from the site <body>.
  2. Adding css via a global stylesheet will not take effect.

How to add custom style:​

Go to Apps > Fast Simon Dashboard > No-code Editor > CSS Editor

Option 2: Use a global <style> element with a specific id​

<style id="fast-simon-serp-css">
    /* CSS code here */
</style>
danger

Only one <style id="fast-simon-serp-css"> element is allowed per page. If multiple elements with the same ID exist, only the first one will be picked up and applied — any additional ones will be ignored and may cause unexpected styling behavior.

Special Sized Products​

When a product is configured with special sizing in the Fast Simon Merchandising Editor, it receives a CSS class on its grid cell that you can use for custom styling:

ClassSizeGrid footprint
fs-product-sp-largeLarge2×2 — twice as wide and twice as tall
fs-product-sp-horizontalHorizontal2×1 — twice as wide

The grid spanning is applied automatically. Use these classes to adjust the product card's internal styling (image aspect ratio, font sizes, etc.) to match the larger tile:

/* Adjust image aspect ratio for horizontal tiles */
.fs-product-sp-horizontal .product-image {
    aspect-ratio: 2 / 1;
}

/* Adjust image aspect ratio for large tiles */
.fs-product-sp-large .product-image {
    aspect-ratio: 1 / 1;
}

The sp_s field is also available on the Product object for use in custom hooks if you need to apply additional logic based on the sizing.