Skip to main content

Styling

Fast Simon Upsell & Cross-Sell uses a [shadow dom] node to render out app without any css conflicts from site theme or apps, meaning:

  1. Upsell & Cross-Sell will only inherit fonts from the site <body>.
  2. Adding css via a global stylesheet will not take effect.

For Many Upsell widgets at one site​

Put your attention that each Upsell widget has its own id. In order to affect only one widget style use the widget id selector before your CSS code. (example below)

How to add custom style​

Put your attention that each Upsell widget has its own id. In order to affect only one widget style use the widget id selector before your CSS code. (example below) There are 2 ways adding CSS:

  1. adding style element to the code (example below).
  2. Add the CSS to the CSS section at the no-code editor (Write your widget id instead of 'widget_id'). The generated script of the widget will already be included with the CSS.
<style id="fast-simon-upsell-cross-sell-css">

    #fast-simon-new-upsell-{widget_id} .title-wrapper
    {
        color:red !important;
    }
    /* will affect just the Upsell widget with id=fast-simon-upsell-widget1 */

    /* your additional CSS code comes here */

</style>