{"id":12376,"date":"2026-10-15T08:30:42","date_gmt":"2026-10-15T07:30:42","guid":{"rendered":"https:\/\/help.cirrus-shield.com\/?post_type=docs&p=12376"},"modified":"2026-10-15T11:11:10","modified_gmt":"2026-10-15T10:11:10","slug":"ecommerce-website-builder","status":"publish","type":"docs","link":"https:\/\/help.cirrus-shield.com\/en\/docs\/admin-guide\/ecommerce-website-builder\/","title":{"rendered":"Ecommerce Website Builder"},"content":{"rendered":"\n

This guide explains, step by step, how a Cirrus Shield organization administrator creates and publishes their e-commerce site with the CS-Ecommerce extension.<\/p>\n\n\n\n

Overview<\/h2>\n\n\n\n

CS-Ecommerce turns the data of a Cirrus Shield object of your choice (e.g. \u00ab Product \u00bb) into a public online store, with no code required. Cirrus Shield remains the single source of truth for your product data: this extension only manages the presentation (site identity, field mapping, catalog and product-sheet layout, action buttons).<\/p>\n\n\n\n

This guide follows the 4 steps of the configurator (the \u00ab Builder \u00bb), in the order they appear:<\/p>\n\n\n\n

    \n
  1. Identity<\/strong> \u2014 site name, logo, colors and font<\/li>\n\n\n\n
  2. Mapping<\/strong> \u2014 which Cirrus Shield object and which fields feed the site<\/li>\n\n\n\n
  3. List<\/strong> \u2014 the appearance of the product catalog<\/li>\n\n\n\n
  4. Product Sheet<\/strong> \u2014 the appearance of a product’s page, and its action buttons<\/li>\n<\/ol>\n\n\n\n

    then publishing the site and its day-to-day management.<\/p>\n\n\n\n

    Prerequisites<\/strong> \u2014 you must be an administrator of your Cirrus Shield organization to access the Setup page.<\/p>\n\n\n\n

    Accessing the Builder<\/h2>\n\n\n\n
      \n
    1. In your organization, open Setup<\/strong> (profile menu, top right).<\/li>\n\n\n\n
    2. In the configuration menu, click Extensions<\/strong>.<\/li>\n\n\n\n
    3. In the extensions list, find Ecommerce Website<\/strong> and click Details<\/strong>. If you did not find it, install it without changing anything in its settings. <\/li>\n\n\n\n
    4. The first time, the organization connects to Cirrus Shield automatically. Click Go to Builder<\/strong> to open the site configurator.<\/li>\n<\/ol>\n\n\n\n
      \"Cirrus<\/figure>\n\n\n\n

      The Builder opens embedded in this same page (as an iframe) and shows the 4 configuration steps at the top.<\/p>\n\n\n\n

      Step 1 \u2014 Site Identity<\/h2>\n\n\n\n

      At the top of the Builder, a step bar (Identity \u2192 Mapping \u2192 List \u2192 Product Sheet) lets you navigate freely between the 4 steps at any time \u2014 you don’t need to finish them in order to revisit them.<\/p>\n\n\n\n

      Element<\/th>Meaning<\/th><\/tr><\/thead>
      Draft<\/strong> \/ Published<\/strong> badge<\/td>Shows whether a version of the site has already been published. See the Publishing section below.<\/td><\/tr>
      Active \/ Inactive<\/strong> switch<\/td>Visible only after a first publish. Turns the public site’s display on or off without unpublishing the configuration.<\/td><\/tr>
      Save draft<\/strong><\/td>Saves your changes without making them visible on the public site.<\/td><\/tr>
      Publish draft<\/strong><\/td>Makes your changes visible on the public site.<\/td><\/tr>
      Live preview<\/strong><\/td>On the right, updates instantly with every change \u2014 no save needed to see the result. The icons at the top right of the preview switch between desktop, tablet and mobile views.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      \"Step<\/figure>\n\n\n\n

      The form above lets you configure:<\/p>\n\n\n\n

      Field<\/th>Meaning<\/th><\/tr><\/thead>
      Site name<\/strong><\/td>Name shown in the header and browser tabs of the public site.<\/td><\/tr>
      Site address<\/strong><\/td>The public URL’s final slug (ecommerce.cirrus-shield.net\/your-slug<\/strong>). Auto-generated from the name (lowercase letters, digits and hyphens), editable.<\/td><\/tr>
      Logo<\/strong><\/td>Drag and drop an image, or click to choose one. Shown next to the site name, never in its place.<\/td><\/tr>
      Brand colors<\/strong><\/td>Primary color (header, main buttons) and secondary color (accents, hovers). Reused automatically across the whole public site.<\/td><\/tr>
      Font<\/strong><\/td>Typeface used across the whole public site.<\/td><\/tr>
      Show the header on the public site<\/strong><\/td>Uncheck to completely hide the header band (logo + name) on the public site.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Once you’re happy with it, click Next: Mapping<\/strong> at the bottom left to move to step 2.<\/p>\n\n\n\n

      Step 2 \u2014 Field Mapping<\/h2>\n\n\n\n

      This step connects your site to real Cirrus Shield data: which object represents a \u00ab product \u00bb, and which fields of that object feed each part of the site.<\/p>\n\n\n\n

      Source object<\/h3>\n\n\n\n

      At the top of the page, Source object<\/strong> shows the Cirrus Shield object currently used (here, \u00ab Price List Item \u00bb). The Change object<\/strong> link opens a search across every object in your organization \u2014 careful: changing object resets the whole existing mapping.<\/p>\n\n\n\n

      Field mapping<\/h3>\n\n\n\n
      \"Field<\/figure>\n\n\n\n

      For each role, click + Choose a field<\/strong> and select the matching Cirrus Shield field (a lookup-type field, like \u00ab Product \u2192 Produit Nom \u00bb above, lets you pull a field from a related object).<\/p>\n\n\n\n

      Role<\/th>Required<\/th>Used where on the site<\/th><\/tr><\/thead>
      Product name<\/strong><\/td>Yes<\/td>Title shown on the product card and product sheet.<\/td><\/tr>
      Description<\/strong><\/td>Yes<\/td>Descriptive text shown on the product sheet.<\/td><\/tr>
      Price<\/strong><\/td>Yes<\/td>Amount shown, automatically filterable by price range in the catalog.<\/td><\/tr>
      Image<\/strong><\/td>No<\/td>Photo shown at the top of the product card and product sheet.<\/td><\/tr>
      Show on the site<\/strong><\/td>No<\/td>Cirrus Shield boolean field deciding whether a record appears on the public site. Not mapped = every record is visible.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Additional fields<\/strong>: any other field you need elsewhere on the site (list, product sheet, action button, display condition) is mapped with + Add a field<\/strong>, at the bottom of this section.<\/p>\n\n\n\n

      \"Additional<\/figure>\n\n\n\n

      Related lists and display conditions<\/h3>\n\n\n\n
        \n
      • Related lists<\/strong> \u2014 shows records from a related object (e.g. \u00ab Session \u00bb) directly on the product sheet. + Add a related list<\/strong> opens a 2-step wizard: choose the relationship, then the fields to display. Edit filters<\/strong> then restricts which records are shown.<\/li>\n\n\n\n
      • Display conditions<\/strong> \u2014 only products meeting all<\/strong> conditions defined here appear on the public site (e.g. \u00ab Status = Active \u00bb). The fields offered are only those already mapped above.<\/li>\n<\/ul>\n\n\n\n
        \n

        Important:<\/strong> every field used in a display condition must first be added to the mapping with + Add a field<\/strong> (\u00ab Additional fields \u00bb section). A field that isn’t mapped won’t be offered when you build a condition.<\/p>\n<\/blockquote>\n\n\n\n

        How display conditions work<\/strong><\/p>\n\n\n\n

        A display condition is a filtering rule: only records that satisfy it appear on the public site \u2014 catalog and<\/strong> product sheet (a filtered-out product is never reachable, even by direct URL). Each condition has three parts:<\/p>\n\n\n\n

        Part<\/th>Role<\/th><\/tr><\/thead>
        Field<\/strong><\/td>The field to test \u2014 only among fields already mapped in step 2 (Mapping).<\/td><\/tr>
        Operator<\/strong><\/td>=<\/code> (equals), \u2260<\/code> (not equal), ><\/code> (greater than), <<\/code> (less than), or \u00ab contains \u00bb (text only \u2014 unavailable on a Date\/DateTime field).<\/td><\/tr>
        Value type<\/strong><\/td>See below.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

        The 3 possible value types:<\/strong><\/p>\n\n\n\n

          \n
        • Fixed value<\/strong> \u2014 you type the value to compare against (e.g. Status = \u00ab Active \u00bb). The most common case.<\/li>\n\n\n\n
        • Parameter (GET\/POST)<\/strong> \u2014 the expected value comes from the visitor’s request rather than fixed text you type (e.g. a parameter carried in the link that brought the visitor to the site). Advanced usage. If the expected parameter is missing from the request, only that condition fails \u2014 the rest of the expression still evaluates normally. This lets you filter price list items by price list, or by the visitor’s region, by passing that information in the request.<\/li>\n\n\n\n
        • Relative date<\/strong> \u2014 only available on a Date\/DateTime field: compares to \u00ab today \u00bb, \u00ab this week \u00bb, \u00ab N days ago \u00bb, etc. instead of a fixed date you’d have to update yourself \u2014 the result recalculates automatically every day.<\/li>\n<\/ul>\n\n\n\n
          \n

          Worth knowing for your own testing:<\/strong> if you open the public site yourself by typing the address directly in the browser (rather than clicking a real link), any Parameter-type condition won’t have the value a real link would normally carry in the URL \u2014 you’ll then see fewer products (or none) than a real visitor would. That’s not a bug: it’s expected whenever a URL is tested by hand without the parameters a real visit would have added.<\/p>\n<\/blockquote>\n\n\n\n

          Combining multiple conditions \u2014 AND \/ OR<\/strong><\/p>\n\n\n\n

          Each condition added after the first shows an AND<\/strong> \/ OR<\/strong> connector linking it to everything before it. Important: there’s no grouping or parentheses \u2014 evaluation is strictly left to right. With 3 conditions A, B, C linked by AND then OR, the result is (A AND B) OR C<\/strong>, never A AND (B OR C). If your conditions aren’t giving the expected result, try reordering them rather than changing the connectors.<\/p>\n\n\n\n

          Concrete example:<\/em> say a boolean field named Active<\/code> is mapped as an additional field. A simple display condition \u2014 Field = Active<\/code>, Operator = =<\/code> (equals), Value type = Fixed value, Fixed value = True<\/code> \u2014 means only records where Active = True<\/code> appear on the public catalog and product sheet; anything marked inactive (discontinued, not yet launched) stays invisible to visitors even though it still exists in Cirrus Shield. Adding a second condition linked by AND<\/strong> \u2014 Active = True<\/code> AND<\/strong> Category = \"Featured\"<\/code> \u2014 narrows this further to active records that are also in the chosen category.<\/p>\n\n\n\n

          Click Next: List<\/strong> to move on to the catalog layout.<\/p>\n\n\n\n

          Step 3 \u2014 Catalog Layout<\/h2>\n\n\n\n

          This step defines the appearance of the public catalog, the page that lists all your products.<\/p>\n\n\n\n

          \"List<\/figure>\n\n\n\n
          Section<\/th>Meaning<\/th><\/tr><\/thead>
          Fields on the product card<\/strong><\/td>Checks the fields (among those mapped in step 2) shown on each product card in the catalog. Name and Price are typically checked by default.<\/td><\/tr>
          Display style \u2014 Grid<\/strong><\/td>Product cards aligned in a grid, classic catalog layout.<\/td><\/tr>
          Display style \u2014 List<\/strong><\/td>One row per product, more compact.<\/td><\/tr>
          Items per page<\/strong><\/td>Number of products shown before pagination.<\/td><\/tr>
          Divide the catalog into categories<\/strong><\/td>Splits the catalog into tabs by a chosen field (e.g. Category of product), rather than one flat list.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

          The field mapped to the Price<\/strong> role automatically becomes a price-range filter on the public catalog; no extra configuration is needed here.<\/p>\n\n\n\n

          Click Next: Product Sheet<\/strong> to move to the last step.<\/p>\n\n\n\n

          Step 4 \u2014 Product Sheet<\/h2>\n\n\n\n

          This last step organizes a product’s detail page (its \u00ab sheet \u00bb) and its action buttons.<\/p>\n\n\n\n

          Fields and lists to place<\/h3>\n\n\n\n

          Any field or related list mapped in step 2 but not yet placed appears here, marked Unplaced<\/strong>. The product sheet has 3 fixed zones: Header<\/strong>, Description<\/strong>, Characteristics<\/strong>. Two ways to place an item:<\/p>\n\n\n\n

            \n
          1. Drag and drop<\/strong> the item directly in the live preview, into the zone you want.<\/li>\n\n\n\n
          2. Or choose the zone from the dropdown next to its name (as in the screenshot above) \u2014 the keyboard-accessible equivalent.<\/li>\n<\/ol>\n\n\n\n
            \"Fields<\/figure>\n\n\n\n

            Action buttons<\/h3>\n\n\n\n

            + Add a button<\/strong> creates a new action button on the product sheet, with:<\/p>\n\n\n\n

            Field<\/th>Meaning<\/th><\/tr><\/thead>
            Button label<\/strong><\/td>Text shown on the button (e.g. \u00ab Request a quote \u00bb).<\/td><\/tr>
            Position<\/strong><\/td>Top of sheet, Below description, or Bottom of sheet.<\/td><\/tr>
            Style<\/strong><\/td>Primary, Secondary or Subtle \u2014 reuses the brand colors set in step 1.<\/td><\/tr>
            Destination type \u2014 Cirrus Shield field<\/strong><\/td>The button points to the value of a mapped product field (e.g. a link stored in Cirrus Shield).<\/td><\/tr>
            Destination type \u2014 Manual URL<\/strong><\/td>A fixed URL you type, which can include merge tokens like {!RecordId}<\/code> or {!FieldName}<\/code> \u2014 replaced by the real value of the product shown on the public site (e.g. https:\/\/my-form.com\/{!RecordId}<\/code>). The \u00ab Insert token \u00bb menu adds these tokens without retyping them.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
            \"Header,<\/figure>\n\n\n\n

            Once every step is configured the way you want, move on to the next section to publish your site.<\/p>\n\n\n\n

            Publishing Your Site<\/h2>\n\n\n\n

            Editing a Builder step changes nothing on the public site until you publish. Two distinct actions, visible at the top of every step:<\/p>\n\n\n\n