In the following subsections you will be guided through the necessary setup and configuration steps to ensure your webshop is properly configured and ready for operation.

The Chainbox module contains all the essential setting selections required for configuring the webshop per language node.

If your website requires multiple language nodes, we recommend you finalize one first, and then create the additional nodes as copies. This approach will save time compared to setting up each node individually, and ensure they are identical.

In the three sections shown below, you can configure your company information, shared customer settings, and language and price/date format for each language node. This example demonstrates the setup for the language node "DA" under the site selector.

The language setting consists of two values: a language code and a country code. The language codes adhere to the ISO 639-1 standard, while the country codes follow the ISO 3166-1 Alpha-2 codes.

You can enter any language/country combination, however, it is necessary that the combination exists in the Product Management Information (PIM) system. This ensures that your webshop can pull localized information such as product category names, category descriptions, product names, and product long descriptions in the selected language, provided they have been translated in the PIM system.

Shared customer

The shared customer in your webshop serves as a non-login customer and provides information such as currency, product prices and account number. Typically, this shared customer is a generic customer defined in your ERP-system.

The value entered here must match the customer ID in your ERP-system.

Shop name

The shop name will be utilized in email communication from the webshop, such as the "Forgot password" or "Order receipt" function on the site. This ensures that the emails sent to users regarding password recovery or other related notifications will display your shop name as the sender. It will also be used in meta titles and meta descriptions.

Shop e-mail

This email address serves as the sender's email address for various communications, including order receipts, forgotten password notifications, and more.

The company information you enter here, will be displayed in the footer of your webshop.

Layout Colors

Primary

The primary color is the theme color of your webshop. This could match your company's main color

Black & Global

These two colors control the black and grey's of the theme.

Please be aware that the black color is being used to accommodate various shades of black. Altering the black color to a lighter shade may result in diminished visibility of text and checkboxes.

Success

This is the color used to display positive messages, e.g. products in stock

Notice

This is the color used to display messages that requires your attention

Warning

This is the color used to display messages that requires your attention

Danger

This is the color used to display messages when something has failed.

Favicon

The favicon is a small icon that appears on a browser's tab alongside the title of the current page or when you save the page as a bookmark. It serves as a visual representation of your webshop.

The favicon can be created using your logo or any other distinctive symbol that helps users easily recognize your store. By having a unique favicon, your webshop becomes more visually identifiable.

Create a favicon

It is recommended to use icons with transparency for your favicon, such as .png images. The ideal size for the favicon is 64x64 pixels.

To create your favicon, there are free online services available. Search for "favicon generator" in your browser to find tool options available.

The opening hours are displayed on the shopping cart page. These hours are showcased alongside the selected trust pages during the checkout process.

Through the Content section, we can further customize the layout choices for each language node, configure our navigation according to our preferences, determine which elements should be displayed in our webshop, incorporate our company logo, and set up occasional notifications.

The global header notification can be activated for announcements or sharing seasonal information with your customer. When active it is visible on all pages of your webshop.

The text can be enriched using HTML formatting. Option also to choose the background color and text color.

You control when the message is displayed by selecting a date range for the visibility.

Edit global header notification

Navigate as shown below, and click "Edit". Enter your text, choose text- and background color and date range for the notification to be active. Click "Submit" and then "Save".

The top navigation items consists default of content links, TrustTextWithIcon (phone number) and the site selector, if more than one language node exists.

These can be removed, new can be added, and the placing be changed to left, right or center.

Editing ContentLinks

Click Edit to remove individual items. Press "Add" and navigate and choose the page you wish added, click "Submit" then "Close"

Click "Save" and your change will be visual on your home page

Editing TrustTextWithIcon

Change icon or change what field under "Company Information" to show.

Editing SiteSelector

Option only to be visible or not. If visible it will show the published language nodes.

Adding other Top navigation items

Additional items can be added, but only limited to the macros listed below:

• TrustTextWithIcon

• Trustrating

• A collection of content pages

• A siteselector (language)

Upload your logo here. We recommend any whitespace be removed around the logo.

If your logo does not provide a precise description of what your visitors can expect, you can add a tag line. Option to leave blank.

The navigation menu typically displays categories up to the first level. However, you have the option to enhance the navigation by enabling the slider labeled "Show an additional level of categories." When this slider is activated, the second level of categories will be permanently visible in the navigation menu.

Main navigation if only "Show categories in main navigation" is enabled.

"Show an additional level of categories" is relevant if the number of sub-categories under each category varies. This gives a cleaner look, and the customer can click "Show more" to navigate to a new view containing all sub-categories.

Customizing Main navigation

By customizing main navigation you can create navigation for categories, as well as content, products or a custom url.

Text

Type the name the navigation should show as in webshop

Icon SVG

Insert SVG-code of image

Place icon after text

Places the SVG icon to the right of name

Colors

Choose color of background and text by moving color slider, or enter HEX code

Type

Choose type of navigation from dropdown menu (category, content, product, custom url)

Open in new window

When clicked the navigation will open in a new browser window

Disable subnavigation

No subnavigation visible if enabled.

Number of child items to show

Choose number of levels to show. If more exist the "show more" option will appear.

Customization

Option to use CSS

The default footer is configured with commonly used content pages. These pages typically include sections as About Us, Contact, Terms and Delivery.

Additionally, the default footer is designed to accommodate social media links, specifically for Facebook and LinkedIn.

To make changes to the content of the footer, click "Edit", "Remove" or "Add" to modify.

Newsletter form

If you wish to activate the "Show newsletter subscription in footer" feature, a newsletter provider required. To set up and configure the necessary settings, please refer to below guide "Newsletter provider setup".

Once the provider is setup, enable the "Show newsletter subscription in footer", click "Save"

Guide for Newsletter provider setup below:

Content pages

To add additional content pages to your webshop, it is essential that these pages already exist within the language node you are working with.

Click "Add" and navigate to relevant sub-page, click "Submit" and then "Save"

Social media links

Press "Add", choose your social media from the drop-down menu, name it and enter your social media link. Click "Submit" and then "Save"

"The custom footer is like a CMS page, sticking to the foot of your website".

The custom footer is like a CMS page, in the sense that you have to create it from scratch, just like content and landing pages. See more on the below link:

This also means that there are multiple options for designing your website footer, which is built via our "Type of content" selection.

This section offers a wide range of settings that determines how your products are presented, how search functionalities operate, and how prices and stock values are displayed.

Root category

The root category serves as the starting point in the category hierarchy within the Product Information Management (PIM) system. It determines from which category the catalog should begin.

The children of this root category will form the content of your main navigation.

Show empty categories

By default, this function is disabled, which means that if products within a specific category are discontinued or no longer available, the corresponding category will automatically be removed from your website.

Product restriction enables you to limit access to certain products for certain customers/users based on a rule-set.

The rules are defined in Umbraco based on a match/no match criteria.

An example could be:

For customers with country code value "DK" versus a specified Product field in the PIM system containing "DK" - a match-rule says they can buy the product.

Multiple rules can exists - watch out for overlaps though - and often creating such rules requires creating of new attributes in the PIM system.

To learn more on how to manage, please refer to below tutorial.

The product restriction is disabled per default.

Filter engine

When the filter engine is enabled, product lists in your webshop will include filtering options provided they are defined on your categories in the Product Information Management (PIM) system.

These attributes will then appear as filters on the product list pages for the respective category and all its descendant categories.

To learn how to add filter fields to a category in your PIM system, please refer to the link provided below:

See below guide on how to change valuetype on an indexed field:

Advanced search

The advanced search functionality enhances the search capabilities, by providing a search overlay (separate search page opens) and includes content pages and categories, as well as spelling suggestions.

Indexed fields

Though very rarely needed, option exist to add additional attributes to the index.

Click "Add" and choose the attribute to be used for indexing the products. Click "Submit"

Price fields

With update per January 2024 arrived the option for Pricesorting and Priceslider.

The following needs to be setup by Chainbox:

For each product their price in relevant currency ex. vat and ex customer-specific discounts most be displayed.

If the price ex.vat needs to be be calculated through the priceengine, another attribute filter field most be created per currency, where the calculated price for the specific customer can be displayed. Chainbox will setup a worker up to contact API for calculations of customer prices, discounts and vat-settings.

The end result will be a price-slider / price sorting option based on the individual salesprice for the specific customer.

Searchable fields, Text/Identifier

Option to add more attributes as searchable fields as text or identifier. Click "Add" and choose the attribute-field you wish as either searchable text or identifier. Click "Submit".

Searchable textfields will return results if in the vicinity of the search performed, where as searchable identifier fields will require an exact match to give a search result.

Show stock values

If enabled the current stock value is shown below the "Add to cart" button. If disabled a message will appear instead:

• In stock (success color/green)

• Low stock (notice color/yellow)

• Out of stock (danger color/red)

Maximum visible stock

If show stock values are enabled and stock is above maximum entered stock value, the value will be displayed as 100+ (or any other appropriate number) to indicate that the stock is abundant. If you wish to show the actual stock value regardless how high, set the stock value to 0.

Low stock limit

When a product is in stock but its quantity falls below a certain threshold, a stock message will be displayed in the webshop. By default, the stock message will be highlighted with the notice color (yellow) to draw attention to the limited availability. If you do not wish to draw attention to low stock, set this value to 0

Show delivery information on lists

If enabled it will show the estimated deliverytime. The text appearing comes from a label maintained on the webshop front end.

Allow purchase when out of stock

If disabled, products that are out of stock cannot be purchased. This is enabled default.

Display options

Secondary image on list

When hovering over an image on the product list, the second image (if such exists) associated with the product will be displayed.

Purchase from lists

When the "add to cart" functionality is disabled, it will only be available on the product detail pages and not on product lists, sliders, or other product display elements. This could be relevant if your products are variants under parent, such as clothing items with different sizes or colors. By disabling the "add to cart" functionality on lists, customers will need to view the product details to make a specific variant selection before adding it to their cart.

Added to cart modal

When the "add to cart" popup is enabled, a popup window will appear in the center of the screen after adding a product to the cart. This popup displays the cart content and allows customers to view their selections. However, if the popup functionality is disabled, the cart content will instead be briefly displayed below the shopping cart icon in the upper right corner of the screen.

Best sellers

By default, a product slider of bestsellers related to the current category is enabled on product details pages. This feature allows customers to easily navigate through and discover popular products within the same category.

The bestsellers displayed in the product slider are determined based on the value in the "Popularity" field in the Product Information Management (PIM) system. By default, this value is derived from sales statistics obtained from the ERP-system. However, it is possible to manually override the "Popularity" value in the PIM if necessary. Note that the calculate popularity qty is not visible in PIM, so if a quantity is visible, it means it has been entered manually as an overwrite.

Placeholder image

In cases where a category or product does not have an associated image, a placeholder image is used instead.

Product paging options

Configure the number of products to be displayed on the product lists.

Product sorting options

You can choose from a collection of attributes to sort the product list. By default, the sorting options are set to alphabetical order, both ascending (A-Z) and descending (Z-A).

To add more options, click the "Add" button, enter the name for the sorting option, and choose what product attribute field from the Product Information Management (PIM) system should be used. Click "Submit" and "Save".

Product sorting by sortorder

If sorting filter is set to sort by the attribute "sortorder", there are a few things to be aware of.

Sortorder is an attribute under the set "Webshop Configuration", in the PIM system. Fill in a numeric value on each product. The product category list will sort from lowest to highest.

Index field as number

Index the sortorder field in webshop frontend as type "number". If not, the sorting will be by the first digit (e.g. 5 would be grouped with 50, 500, 5000).

Log into the webshop with Supervisor user rights. Click the settings-icon and choose Index info. Click "sortorder" in the section "Fields" and choose datatype "number". Click "Save" and then click "Rebuild Index".

Sortorder is a global sorting

Note that sortorder on products is not limited to a certain category. It is a global sortorder that will affect product listing however they are viewed.

Parents and variants

Unless variants/child items have categories assigned to them, and therefor are visible on the category product list, only the parent product needs to be assigned a sortorder value in PIM.

If the variants wish to be sorted on the product detail page of the parent, then set up sorting on the lookup list items instead.

Trust page

By default, the trust page is set to the delivery page.

Display options

Wish list

The purchase list feature enables customers to create lists of items they are interested in purchasing and save them for future reference. By default, this feature is enabled. However, in order to use this feature, customers need to be logged in to their account.

Enable recommended products

Chainbox.io monitors the content of orders placed, and can thereby present a list of what others bought together with items your customer is currently looking at.

Variant display options

If your products are variants under a parent, choose how you wish them presented in the product detail page in the webshop.

Default is enabled "Show images", causing each variant to show with its image. If disabled, they will be presented by their variant description only. Four different display options are available.

Bulk ordering

For products with variants, the bulk ordering gives the ability to open a matrix of all combinations and type in quantities for easy ordering.

This function is default disabled.

Bulk ordering is useful when many variants exists under same parent-product. An example could be clothing sold in 5 colors each in 10 sizes. It provides an immediate overview of what variants are available at what price.

When bulk ordering is enabled, the "Reverse bulk layout" appears. With this you can toggle if a variant should show horizontally or vertically.

Product specifications

By specifying the product attributes from your PIM system as "Product specifications", you can create a specification matrix for the product detail list. This matrix will display the relevant attributes as specifications for each product. Only the fields that are populated with a value will be included in the matrix.

These are informations that search engines read and use in searchresults.

In the Product Information Management (PIM) system, meta title, description and keywords can be added per product and category. Should they not contain anything, the information here in Umbraco will be used instead.

Under this section you will find all settings relevant for checkout and thereby determining the experience you wish your customer to have.

Aside from the must-haves such as paymentterms and deliverytypes, there are optional features to add, like vouchers, gifts, and fees.

Cart retention

Cart retention is a feature that stores the last known shopping cart of a logged-in customer, enabling them to resume shopping from where they left off.

Upon logging in again with products in the cart, the customer will be prompt to choose to use the cart from last session, or start a new one by choosing "Do nothing".

If "Do nothing" is chosen, the products will not be deleted from the cart, but presented to the customer each time, until bought or deleted from the cart.

Price recalculation in the cart

Please be aware: if the price of a product is updated in the ERP-system whilke left in the cart on the webshop, the price will not update unless the product is erased and readded to the cart, the quantity is changed or otherwise updated.

CSV import

The CSV import feature allows your logged-in customers to import a CSV file containing item numbers and quantities, making the ordering process more efficient.

By default, the CSV import feature is disabled.

Trustpages

Per default 3 trust pages are added to the checkout. Additional can be added, or existing removed.

Vouchers

Enabling vouchers provides customers with the option to enter voucher codes during the shopping cart or checkout process, allowing them to redeem special offers, discounts, or promotional codes. By default, this feature is disabled.

Orderfees

This function enables you to setup a specific fee based on:

• Customer with- or without login

• Order total

• Weight

• Product attribute (setting on product ID in PIM)

• Delivery type

No fees are setup default.

Setting up Orderfee

Press "Add" in the section Order fees - enter the product ID to be added. Choose from the options if the order fee should by limited by certain parameters. See image below. Enter a text to explain the fee - click "Submit" - click "Save". The fee is now added to the cart when shopping

The price and VAT-setting of the fee is determined by the setting of the product in your ERP-system.

Free gifts

This function allows you to automatically include free gifts in the customer's checkout.

Setting up Free gifts

In this example; A product is added free of charge IF purchase is above 1000 DKK ex. VAT for all customers, with or without login. Press "Add" to choose your order total range.

Additional options to narrow down when adding free gift:

• only for logged in/non logged in customers

• only when specific products are in the cart (define what field in PIM should have what value)

• only when specific customers places an order (define customer field and value)

• only when specific users places an order (define user field and value)

Now we are choosing the product ID that should be added for free when order total is reached. Click "Product" - click "Add" - enter the product id - choose the item description from the dropdown menu - click "Submit" twice - "Click" Save

When placing an order above the entered amount you will receive a notification in the cart modal, and in the cart itself

Delivery countries

Define a country whitelist to control the list of countries you wish to offer delivery to. Multiple can be added.

Adding delivery countries

Click "Add" under the "Delivery countries" section - enter country ID as from your ERP-system - enter the country name to be displayed in the webshop - click "Submit" - click "Save".

Delivery types

Available options are:

• Pickup at location

• Package shop

• Home delivery

Available limitations are

• Hide from login or not logged in

• Limit by weight

• Limit by country

Delivery fee

When a designated "Delivery fee" product ID from the ERP system is provided, you have the option to use its current price as the delivery fee for an order.

Free delivery limit

Setting a free delivery fee limit allows you to encourage customers to reach a certain order total to qualify for free delivery.

Preferred delivery date

If enabled, the customer can delay the delivery up to the maximum days set. Default set to 30 days.

Payment types

Available options are:

• Payment gateway (Currently QuickPay is supported)

• No payment gateway needed, typically for invoice payments

Available limits are:

• Hide from login or not logged in

Adding payment type

Click "Add" in the section Payment types, enter payment ID - enter a title (payment type display name in webshop).

If multiple payment methods are added, the customer can choose between them in the checkout flow.

Setting up Integration fields from Quickpay in Umbraco payment type

Open your Quickpay installation and choose Settings and Integration:

Under Integration are the 4 data fields that are required in Umbraco paymenttype. Enter the data as indicated below.

Test mode activation

In both Quickpay and on the specific Umbraco payment type, it is possible to activate test mode.

this is only used in test-sites. If still active in live-sites, Quickpay will accept orders from customers placed with a testcard.

Please find testcards with various responses on below Quickpay site:

Test data

Payment fee

When a product ID is provided, this will add the products price to the order as the payment fee. Enter your fee by editing existing payment types, or upon creating new ones.

Free payment limit

When order total is above the entered limit, no fee is added.

The "Terms" page is linked default to the shipping and billing page, where the customer accepts terms and conditions.

This is where you can customize the email-communication from your webshop to your customers, create and adapt email templates, and add logo and theme colors.

Logo

Hover over the logo and press the pen to change or do alterations in settings. Click "Save" or "Save and Publish" depending on your wishes. Click "Save" again when back to original Email theme page

Email templates are used by the system to create and send emails. Generally it is only the fields described below, that should be changed

Subject

Insert the email-subject you wish the email to have when send to the customer.

To

Leave empty if the customer is to receive the email. It will derive from the checkout information if the email is an order confirmation, or from the entered email if for template "Reset password".

If the email is the product of a contact form on the webshop, then the To-email should be the the receiver of the contact form such as a backoffice.

BCC

If you wish to receive a bcc-copy of the customer email, enter the email adresse here.

From

Insert the sender email. If left blank, the shop-email from the information tab is used in stead.

BCC subject

Subject for email sent via BCC. Insert a subject to override the one provided by the system.

Header content

This content is displayed above the current content of the email. This field can contain html.

Orderconfirmation specific

Enter the greeting for your customer, and use the ###CUSTOMERNAME### to personalize the email if an orderconfirmation. The line with "If you have trouble reading this email.." is default and not editable. A link to read the confirmation in an online version is provided automatically.

Footer content

This content is displayed below the current content of the email. This field can contain html.

Insert "Best Regards" and other relevant information regarding the specific email template.

Email footer

The email footer is standard as is. Company information and opening hours derives from the company information setup in Umbraco, and the Trustpages links from the Checkout setup in Umbraco.

Attachments

Choose files that you want to attach when sending the email, this could be a copy of your terms, return policy or an RMA-form.

Built-in templates

receipt

Template used when sending order receipt.

Header content field has the following fields being substituted:

• ###CUSTOMERNAME###: Name of the customer

resetpasswordrequest

Template used when customer requests a password reset

• ###SHOPNAME###: Name of the webshop (from Shop name)

• ###LINK###: The link the customer should click to reset their password

The Service section offers a range of options to set up integrations with various providers, including Newsletter providers, Trustpilot, and tracking services.

In order for the newsletter plugin or newsletter form in footer to work, a provider must be setup.

Currently these providers are available

• MailChimp

• Campaign Monitor

• Klaviyo

In order to track your customers, you must obtain their consent.

Currently these consent providers are available:

• CookieBot

• CookieInformation

CookieBot

You should get the Domain Group ID value from CookieBot control panel for use in the Key field in Umbraco. It it not the API Key.

Enable the auto-blocking mode in CookieBot integration to make CookieBot automatically block cookies on your website until the user provides consent. This option is not available for sites with Chainbox version 5.2.18 or older.

CookieInformation

For Chainbox versions 5.2.18 and older, it is required to disable the Content Security Policy for CookieInformation to work. Please contact Chainbox to assist with this if needed.

For versions newer, CookieInformation and the Content Security Policy works together, but with security lowered for all pages.

To set up tracking insert your Google- and Facebook-keys here

GA4 ready for Google Consent Mode v2

With Chainbox versions newer than 5.2.18, GA4 supports the Google Consent Mode v2, with consent default denied.

By integrating GA4 with both Google Consent Mode v2 and a consent provider, website owners ensure that they're collecting data in compliance with privacy regulations and respecting user preferences regarding data collection and processing.

To setup Trustpilot, click the setup button, and enter your Trustpilot ID and review url. Then choose your icon-settings.

What is Content Security Policy

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware.

Very simplified, you can consider CSP a kind of "firewall" for frontend scripts etc.

For more info on CSP in general you can look at some of these links:

• https://web.dev/articles/csp

• https://blog.sucuri.net/2023/12/what-is-content-security-policy.html

Third party services included with your webshop

Services included have already rules setup if they support it. If they do not, you will be informed with a message where these are setup.

Third party services added by you

If you add a service youself, you should check their faqs on how to setup the correct rules in order for the service to work with the security enabled.

If you require to have the current content security policy disabled, please contact Chainbox.

Adding a security service

Click "Add" - choose service and enter approved host - click "Submit" - click "Save" on Security page.

Debug mode is default disabled.

When enabled it will list you all the settings made anywhere in Umbraco for the particular language node you have marked (in this example DA). This can be very helpful in finding errors.

This section manages the overall layout settings for your webshop across all language nodes under the Site Selector.

Theme

Enables you to change the general theme of objects on the website. The default setting is "Squared", but you can choose "Rounded" and click "Save".

Header

Choose between the left-centered header-layout or the centered:

Centered layout

Header customizations

Color background

Click the logo - click in background and choose a color, "Submit" and "Save" on the Header Layout page

Picture background

If you prefer to have a picture as the background of your webshop, click the logo and Backgroound image in the new window opening. Choose picture and click "Select"

Click "Submit" to save your picture and "Save"

Inverse text and elements

If your background is dark you can use the Inverse text and elements-button, and the header will adapt to the dark background and navigation turn white.

Color theme for navigations

Choose colors for text, background and borders individually for Top Navigation and Main Navigation. Choose the colors, click "Submit" and then "Save".

Mobile navigation

When you select a color scheme for the Main Navigation of the webshop, it will automatically be inherited by the mobile navigation.

However, if you wish to customize the mobile navigation separately and choose different colors, you can activate the "Customize Mobile Navigation" option. This allows you to override the inherited color scheme and set individual colors specifically for the mobile navigation.

Customized layout, left or centered

By enabling "Customized layout, you can choose the positioning for Logo, Search-bar and main navigation

Footer

The footer-section does not have any pre-selections default and appears with a black background. The text showing is managed from Site profile setting - Information.

Footer Customized

Customize your footer by adding a picture as background, and/or Borders and Background

Result after alteration

Custom styles

A custom style refers to a personalized or unique set of CSS rules and declarations that are applied to specific elements or the overall design of a web page.

They are typically implemented using CSS and can be applied inline within HTML elements, embedded within the HTML document using the <style> tag, or linked externally through separate CSS files.

Custom scripts

Custom scripts on a website refer to pieces of code that are written specifically for that website to extend its functionality, add interactive features, or modify its behavior. These scripts are typically written in programming languages such as JavaScript, which is widely supported by web browsers.

It's important to note that when adding custom scripts to a website, care should be taken to ensure security, compatibility with different browsers, and efficient code execution to prevent performance issues.

The robots.txt file allows communication with web robots, specifying which parts of the website they are allowed or disallowed to access. It helps control crawling behavior, safeguard sensitive content, and influence how search engines index a website's pages.

Robots.txt disallow

This robots.txt will prevent access from the web robots