Chainbox Webshop is an extension for Umbraco CMS, designed for online shopping purposes. It comes with an integrated product information management system, and is equipped with seamless integration to multiple ERP systems.

You can easily configure all aspects of the shopping system, and utilize the built-in standard templates & features to run a fully functional webshop out-of-the-box.

Alternatively, Chainbox webshop can be customized and extended to serve as a foundation for a even more personalized Umbraco webshop.

In the following you can read about the Umbraco backoffice extension, the fully functional webshop front-end, the worker process handling background tasks aswell as integration to Chainbox.io - product infomation system and the ready-to-go integrations to widely used ERP systems.

Umbraco is the Content Management System (CMS) for the webshop and constitutes the platform for creating and managing the ditigal content for your webshop.

How to find my Umbraco site

Two ways for locating the link to your local Umbraco site:

• Log into chainbox.io - choose Webshop Management, and "Visit CMS"

• Go to your webshop, and replace the language node ("en" or "da") with "umbraco".

Log in with username (usually email) and password.

If you've forgotten your password or require user creation, reach out to your internal Umbraco administrator. Should such an administrator not be in place, please contact support@chainbox.dk for assistance.

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.

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.

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.

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 opening hours are displayed on the shopping cart page. These hours are showcased alongside the selected trust pages during the checkout process.

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 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 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.

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)

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 company information you enter here, will be displayed in the footer of your webshop.

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.

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

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.

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.

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.

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.

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.

In this section, you can configure what is required for a customer to see prices, and how they should be presented.

1 Logged in customers:

By enabling/disabling the sliders you control if logged in customer should see prices, if VAT should be included, if duties are included, and if purchase is allowed.

2 Not logged in customers:

By enabling/disabling the sliders you control if logged in customer should see prices, if VAT should be included, if duties are included, and if purchase is allowed. In addition, if you enabled the "Access requires login" all other options become unavailable. This is typically for pure B2B webshops.

3 Enable customer profiles

If enabled, the customer will be prompted when entering the webshop, to choose if shopping as a B2B or B2C customer. If B2B, VAT will not be included in the displayed prices, if B2C VAT will be included.

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.

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.

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.

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.

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.

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:

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.

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.

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

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

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

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

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

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

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.

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.

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.

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.

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.

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.

Content extensions refers to everything content related in Umbraco, from documenttypes down to the individual elements that makes out a specific landingpage.

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

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

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.

In this section we will go through all the elements that are available to add as content out-of-the-box, and how they work. Apart from the extensions listed under "Umbraco standard", these have been create by Chainbox, to give you flexible tools that corresponds well with the document templates available in Umbraco.

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

Content relations in Umbraco enables you to structure, organize, and associate content items within each language node.

It allows you to create relationship between content making your website interconnected.

In this section we will cover the grids that make up your pages, as well as all the extensions optional to add as content (slideshows, buttons, images, contactforms etc)

Reorder rows or columns

Press Reorder to rearrange your rows on a page, click a row or a content within a row and drag and drop, click "I am done reordering" and "Save and publish"

When setting up a new page with rows you can choose from the following rows consisting of:

• 1 column

• 2 columns

• 2 columns (left column 2/3 in size - right column 1/3 in size

• 2 columns (left column 1/3 in size - right column 2/3 in size

• 3 columns

• 4 columns

Each row can be defined individually with the following settings

Class

Setting a CSS class will enable you to define a group of HTML elements in order to apply unique styling and formatting. This does require some knowledge of CSS, that this guide does not cover.

Restriction

Restrict row visibility allows you to controle if this row is visible with or without logging into your webshop

Animate

Choose if animation should be enabled for this row

Repeat animation

If disabled, the animation will only occur once

Animation delay (ms)

Enter value in milliseconds

Visibility

Specify if this row only should be visible on small devices, large or both

Add spacing

Define spacing around the row, choose between defined in pixels, percentage etc.

Set a minimum height

Define the minimum height of your row in pixels, percentage etc.

Full width

The webshop is default disabled from full width, so unless you are looking for a different expression for this row, keep it disabled

Disable stacking

When enabled keeps column setup on smaller devices

Set a background image

Upload image for the entire row

Set a background color

Define background color by choosing from the palette, or entering hex-code

Set a text color

Define text color by choosing from the palette, or entering hex-code

The Anchor extension can be used to provide navigation to a page heavy with text.

The function requires two parts:

• A text/word created as link with an anchor-word related, that sets off the navigation

• An Anchor with same anchor-word related, that functions as the destination for the navigation

Adding link with anchor-word to a text/word.

Mark a word/text and click the link icon. Enter a name for your anchor and click "Submit".

Add Anchor

Now click "Add" on the column you wish to be the destination, choose "Anchor" and add same name as above. Click "Save and publish"

Add more anchor links to text and match with Anchor extension destinations as needed.

A Content slider will provide your webshop with life and movement, and a visual navigation option, leading to the relevant content of your choice.

Choose where to apply your content slider and click "Add content", choose "Content Slider". Click "Add your first slide"

Image

Click to upload image

Headline

Headline text showing on image

Description

Descriptive text showing below headline

Link text

Text to which a link can be attached

Position texts

If the textbox with the above textlines should be positioned, options are left bottom, centered or right bottom

Animate text on slide

Will have the text slide onto the image

Link to

Product Id

Link to a specific product. Find the Id on the webshop or in your Product Information Management (PIM) system

Category Id

Link to a specific category root. Find the Id in your Product Information Management (PIM) system

Content

Add navigation to a specific webpage by clicking "Add"

Open in new window

If enabled the link will activate a new browser tab

Activating the switch between slides

For the slides to switch between each other, choose column settings, and activate animation

Content Slider setup

Settings

Class

Setting a CSS class will enable you to define a group of HTML elements in order to apply unique styling and formating. This does require some knowledge of CSS, that this guide does not cover

Height

Set height of slider in pixels. Default is 300 if no height is added.

Pausable

If enabled it activates a pause-button on your slider

Interval

Set the interval between sliding in milliseconds. Default is 10000 ms

Each row can consist of 1 - 4 columns. Each column can have its own individual setting.

Class

Setting a CSS class will enable you to define a group of HTML elements in order to apply unique styling and formatting. This does require some knowledge of CSS, that this guide does not cover.

Animate

Choose if animation should be enabled for this column

Repeat animation

If disabled, the animation will only occur once

Animation delay (ms)

Enter value in milliseconds

Visibility

Specify if this column only should be visible on small devices, large or both

Add spacing

Define spacing around the column, choose between defined in pixels, percentage etc.

Position content

Choose the placement of your content within the column from the shown options

Set a maximum width

Enter the value in pixels, percentage etc.

Set a minimum height

Enter value in pixels, percentage etc.

Set a background image

Upload image as background to column

Set a background color

Choose from the palette appearing when clicked, or enter hex-code

Set a text color

Choose from the palette appearing when clicked, or enter hex-code

Picture height fix - using 2 columns (1x2) or (2x1)

In cases where you enter 2 pictures in 2 columns options where 1 column is 1/3 of the width and the order 2/3 (1x2 or 2x1) you will encounter this issue when same spacing is added all around each picture. If no spacing = no problem. For this example we have added 15 pixel spacing all around each picture.

As you can see in the below, though each picture is 450 in height, the smaller picture appears shorter.

How to fix this, is to ensure, that the picture ratio is repeated in the spacing.

The large picture is ratio 2x1 - meaning we set spacing with same ration, using 30 pixels left and right, and 15 pixels top and bottom. Same ratio between 900x450 as between 30x15.

If the pre-created row-templates are not sufficient for your content, it is optional to create additional.

To create a new row grid, go to Umbraco settings - datatype - Grid and click "Add row configuration".

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

The contact form offers a variety of options to interact with your customers, with free choice of mandatory and voluntary fields, Productnumbers and qty, file uploads etc.

Choose the column and click "Add content". Choose "Contact form"

Setting up the Contact form

Click "Please setup contact form". Fill out the standard fields listed, and start Adding fields depending on your needs. See example below

Title

The headline text in your contact form

Description

Text under headline

Button label

Text on your submit button

Success message

The message displayed, after a customer succesfully submitted a contact form

Send e-mail to

The receiver the contact-form emails. If left blank the contact-form will be emailed to the shop email

Email subject

Subject of the email sent from the contact form

Send a copy to customer

If enabled the customer will receive a copy of his submitted contact form by email

Fieldtypes

Text

A textfield for the customer to fill out, e.g. name/customer no./orderno

Email

For entering the customers email

Phone

For entering the customers phone number

Textarea

The free-text message entered by the customer

Number

A numeric field of your choice, for the customer to fill out

True/false

Box for the customer to tick, enter text to clarify e.g. Do you wish to receive our newsletter?/Are you a member? etc.

Upload

Option to upload pdf to contact form. In Chainbox versions newer than 5.2.18, it is possible to add additional files after the initial upload.

KeyValue pair

2 fields interconnected, entered text describes purpose. Could be as in example below: Field 1: Product, Field 2: Qty

Checklist

Create a checklist for clear communication with your customer.

Choose the placement of your button and click "Add content". Choose the button-icon, and click "Please setup button"

Completing the button

Label

Text on button

Type

Choose between Default or full width of the column the button is placed in

Size

Choose between small, default or large

Position

Choose to have your button the the left, centered or to the right in column

Text color

Choose from palette when clicking, or insert hex code

Background color

Choose from palette when clicking, or insert hex code

Border radius

Round corners of button with chosen radius of pixels

Link to

Custom url

Insert specific URL

Product ID

Enter the product ID (find it in Product Information Management (PIM) system or in your webshop

Category ID

Link to a specific category on your shop. To identify the ID, go to your Product Information Management (PIM) system, click "Categories), navigate to the category you wish to link to, find the Id under the category name

Content

To link to content, click "Add" and navigate and choose the page you want linked to

Open in new window

If enabled the navigation will open in a second browser tab

To create a headline, click "Add Content" in the chosen column. Choose the Headline column.

Enter your chosen text, and then press the settings icon for the headline, to customize your text

Settings

Class

Setting a CSS class will enable you to define a group of HTML elements in order to apply unique styling and formatting. This does require some knowledge of CSS, that this guide does not cover.

Header size

Choose between 3 sizes. Default is H1

SEO neutral header

If enabled, the text will not be wrapped by a H-tag

Center text

If enabled, the text will be center-aligned

Click "Add content" in your column of choice, choose the "Newsletter subscription" icon, Click "Please setup newsletter subscription"

Edit Newsletter subscription

Title

Enter your Title for your newsletter form

Description

Enter a description to be shown below the title

List id

If empty, the list id from Newsletter provider setup will be used

Settings

Class

The newsletter form is preset in fonts and colors. If you wish to customize this, it is done Setting a CSS class. This guide does not cover CSS.

Will allow you to create links to URL's, a page, media or anchor/querystring.

Click "Add content" in the column of your choice, and choose the "Image" icon, and "Click to Insert Image"

Choose "Click to Insert Image". If your image is not visible here, press Upload to browse and upload you image - then mark and "Select"

Settings

Class

Setting a CSS class will enable you to define a group of HTML elements in order to apply unique styling and formating. This does require some knowledge of CSS, that this guide does not cover

Center Image

If enabled the Image is centered instead of stretched

Edit image link

Link

Enter relevant URL

Anchor / querystring

Enter a value or keyvalue to link to either on pages

Link title

Enter link title for internal use

Target

If enabled, the linked document will open in a new window or tab

Link to page

Navigate to the page on your website you wish to link to

Link to media

Upload and select media

Click "Add content" in a column. Choose the "Product List" icon, click "Please setup product list".

Choose your Selected fields, selected presets and content relations and click "Submit"

Use Filters

Choose what value you wish to appear as a filter button on the Webshop for the customer to interact with.

The selection of fields available stems from the Product Information Management (PIM) system, examples of fields shown below:

Select preset

Settings will determine where in the category tree the selection starts. Multiple can be added using "and"/ "or" rules. Add the category code as preset.

By selecting preset, the products appearing on the product list can be selected very specifically by combining the multiple fields and their content with "and"/"or" rules.

Below example is simply by category:

The fields available in the drop down menu are indexed fields, which means either selected attributes from category filters, sorting options or popularity.

Next example displays only products within a specific range of popularity - if aslo a specific product type - from a specific Brand:

Content relations

Instead of adding the category as preset as done above, you can enable the slider "Use content relations as preset". This will give you a selection of products that have related content elsewhere in your webshop, by brand, categories, products or tags.

Adding "Product" extention to your page, will present a product-selection based on any field and related value in PIM, sorted on any product field from PIM, and with a maximum of products shown decided by you. The view can be with or without the slider function.

Click "Add content" on your selected column, choose the "Product" icon

Edit product collection

Type

Manual selection will allow you to search and select one product at a time

Query Selection will allow you choose fields with connected values eg Brand/Xerox, Category/Laserprinters.

Show as slider

If enabled products are shown in a slider

Headline

Insert your text - not mandatory

Description

Insert your text - not mandatory

Field

This is the Query selection - choose your preference with connected value. You can add multiple. In this example: Brand = HP, Category = Blæk og toner, and narrow the selection further down using "And"/"Or" rules.

The Query selections corresponds with your Product Information Management (PIM) system, and must exist there for the function to work:

Limit

Max number of items showing, default max is 100

Sorting

Choose from the dropdown menu your preferred parameter to sort on. Apart from "Popularity" all other fields in the drop down menu are fields from the Product Information Management (PIM) system, either imported from your ERP-system (starts with "erp-") or fields existing only in PIM, specific to your business.

"Popularity" will fetch most sold qty-information from your ERP-system.

Settings

Class

Setting a CSS class will enable you to define a group of HTML elements in order to apply unique stiling and formating. This does require some knowledge of CSS, that this guide does not cover.

Find below a description of the elements that only works with the Product template.

Template items are the elements that your Category list template and Product template consists of. As opposed to landing page elements (images, headlines, text etc.) these elements are generic and will change depending on what Category list og Product you are looking at.

Creating a slideshow is a powerfull tool for your webshop and can be enriched with relevant url's.

Choose the column you wish your slideshow to appear in, click "Add content" and choose "Slideshow" from the options available

Click "Add your first slide" and choose "Upload" to browse for pictures. When uploaded, it can be selected from the Media Library

Click "Add" to upload additional pictures that totals the slideshow

Re-arranging sequence in slideshow

To re-arrange the sequence, use the arrows shown on the pictures when the slideshow function is activated.

Erasing pictures from slideshow

Use the "X" to delete pictures from the slideshow. The "X" will appear when you hover over the relevant picture

Adding page link to slideshow picture

Click the link icon in the picture. Navigate to the page you wish to link to - click "Select". Click "Submit"

Adding url link to slideshow picture

Click the link icon in the picture. Insert the URL and "Submit"

Target

If enabled, it opens the linked document in a new window or tab

Adding pictures for small devices

Click the mobile icon in the picture to add small-device-friendly pictures

The magic tile is.. well, just that: magic! Therefor this will only be briefly touched upon below due to the extend of use and options.

Click "Add content" in the column chosen, choose the Magic Tile icon from the appearing list. Click "Please select a preset"

Choose a filter if needed or just choose your preset tile and submit. Check out the variety of settings applicable to these tiles, both from the Magic Tile settings and the "Edit content" and "More"

Find below a desciption of the 3 elements that only works with a Category list template

The Category list will present the categories with category picture and name of the category OR the name translated if such exists, as setup in PIM.

Product Image will display the main and secundary images connected to the product in the Product Information Management (PIM) system.

Product listing will display the available products in the hierarchy below the category chosen on the webshop.

Product documents, typically PDF's are uploaded in the Product Information Management (PIM) system same way as product pictures.

There are two ways of having the documents presented on the webshop

Showing documents with Product documents

Choosing this template will show only the documents

Showing documents with Product information template

When adding the element "Product information" template it includes 3 types of information:

• Information (long description field in PIM)

• Specifications

• Documents

Content relations will link to any content related through Brand, Category, Product or tags.

Below are examples of relation through Brand, and through Category.

Category navigation will dispay the categories as a list. The name of each category will come from the label name in PIM or from the specific translation if such exist.

Recommended products are products that your customers bought together, so if a printer is on occasion bought with a specific toner, this toner will appear as recommended product when the next customer looks at the same printer. This happens "behind the scenes" through a worker that is setup and can be seen here in Chainbox.io:

A parallax image offers options to add text to picture, link to specific products, category or a specific page, and to set focalpoint to control how the picture will appear if seen from a small device

Click "Add content" to the column of choice. Click the "Parallax Image" icon.

Click "Please select Image" and "Configure parallax image" opens. Upload image.

Configure parallax image

Height

Specify height of the image eg in pixels

Link to

Custom url

Insert specific URL

Product ID

Link to a specific product. Find the ID on the webshop or in your Product Information Management (PIM) system

Category ID

Link to a specific category root. Find the ID in your Product Information Management (PIM) system

Content

Press "Add" to navigate and choose the page you wish to link to

Add text to parallax image

There are 5 preset areas for adding text. Click on "Add text" and Configure text, click "Submit".

Configure text

Headline

Insert your headline text

Description

Insert to appear underneath headline in smaller font

Text color

Choose color from palette or enter the hex code

Background color

Choose color from palette or enter the hex code

Set focal point on image

Click "Edit", hover over the picture to see and click the editing tool. Find the dot on your image and place it where you wish focus to be if image is resized while using a small device. Click "Save and close", and "Submit"

Product information will present 3 types of information if available;

• Information

• Documents

• Specifications

It will also enable the "More information" link. If pressed the page will scroll down to "Information".

Related products are defined on the product-page in the Product Information Management (PIM) system, on the product in question. Multiple items can be listed here.

Product specifications are chosen fields from the Product Information Management system (PIM) that are listed as Product specifications in Umbraco. Only a field that has a value will be displayed as a specification on the webshop.

Specifications in PIM usually come from the set "Specifications" but there is no restriction when it comes to choosing other fields too.

Showing specifications with Product specs

Using the Product specs template, the specifications will be listed on their own as shown below

Showing specifications with Product information

When adding the element "Product information" template it includes 3 types of information:

• Information (long description field in PIM)

• Specifications

• Documents

The following Template item elements can be added both to the Category list template and the Product template.

A Header will in a Category list template display the name of the category, and in a Product template, the name of the product

Header in Category list template

The category name is displayed. If a translation exists then that will be displayed instead.

Header in Product template

The Product name is displayed. If a translation exists then that will be displayed instead.

Product purchase will add the necessary fields for buying on the webshop, including price with and without VAT (if enabled in the initial setup of the shop) stock-information, and delivery-information if existing in the Product Information Management (PIM) system.

Addons

Addons are one or more products defined in PIM, prompting the customer to consider buying those too when presented with them in the product detail page.

For more information on the Addons functionality, see below pagelink:

Image on category list template

Attach an image to the template, and choose what image-field in PIM that should feed this. Remember to ensure that all categories affected by this template has content in the chosen PIM-field

Image on product template

Attach an image to the template, and choose what image-field in PIM should feed this, on each product that uses this template. Please note, the field "Image" you see below, is not a default field, but one created for this particular example.

Text on Category list template

Attach text to the template and choose what text-field in PIM should feed the content. Remember to ensure that all categories affected by this template has content in the chosen PIM-field.

Text on product template

Attach text to the template and choose what text-field in PIM should feed the content.

Click "Add" in a chosen column. Click the Video icon

Click "Please setup video" and Edit settings and click "Submit"

Provider

Choose between YouTube or Vimeo

Video ID

Enter your video ID, see below how to find Id for Vimeo and YouTube

Video settings

Enable the below settings as you prefer.

As background.

If enabled the options "Loop video", "Autoplay" and "Mute" can not be chosen. "As background" will cause controls to be disabled on video, video muted and loop disabled, but customer can press play for rerun of video.

Loop video

The video will be presented in a continuous loop.

Autoplay

Note that some browsers will prevent this, if audio is enabled.

Mute

Audio disabled.

Adding USP will allow you to highlight page-links, information, external urls, social media-links etc. that you consider your unique selling points.

Click "Add content" in your selected column. Choose the "USP" icon.

Click "Add your first unique selling Point"

Icon

Choose the icon to be shown. You can find default icons on below site

Label

Main text following icon

Sub label

Secondary text following icon

Link to

Custom url

Insert the url you wish to link to here

Product ID

Insert a specific product ID, to create navigation directly to this product

Category ID

Insert a specific Category ID, to create navigation directly to this product category in your webshop

Content

Navigate and choose the page you wish the customer to navigate to when clicking the icon

Open in new window

If enabled the link will activate a new browser tab.

Click "Add content" in your selected column. Choose the "Trustpilot widget" icon

Click "Please setup widget". Choose type and Theme for your widget. "Submit"

The following 4 grid editor extensions - Embed, Macro, Quote and Richtext editor are all standard extensions for Umbraco

This template can be added both to the Category list template or the Product template. In the example below, it is added to product template.

When adding the Video template to a page, you choose what field in Product Information Management system (PIM) this field should correspond with, and who the provider is:

A BrandList will supply you with a simple list of Brands sorted alphabetically presenting the brands by images or by name.

Click "Add content" and choose "Macro"

Choose "BrandList", and enable slider if you wish your brands to be presented with logo pictures. Click "Submit".

The result on the webshop with 3 brands:

Where are these brands coming from?

In order for the webshop to produce a Brandlist, a landingpage or child item needs to exist where Relations Brand is defined, this will also be the page you are taken to when clicking on a specific Brand on the BrandList. The Brand ALSO needs to correspond with the field Brand in the Product Information Management (PIM) system.

Defining a Brand in the Webshop

Create a landingpage/child item for one or more Brands. Click "Relations", "Brands" and enter your brand in the searchtext. Click "+" to select the Brand, and then Save

Click back on "Content" and "Meta information" and "Meta Image" to add a Brand logo. Choose the brand logo from your media gallery, or click Upload to browse your computer to upload picture. Select picture.

Now your Brand has a logo attached.

The logo on your BrandList will automatically take you to the specific Brand page, if clicked.

Only Brands defined in your Product Information Management (PIM) system, can be found and used when searching in the "Search brands" field on a brand-page:

Predefined macro's enables you to connect and present all sorts of content on your pages, using complex filters with minimum effort.

This extention will embed a video, it is standard Umbraco, but you will find better functionality in our Chainbox extention "Video". See instructions for this below.

Click "Add" in your chosen column, Click the "Embed" icon.

Insert URL and press "Retrieve". Set with and height if default needs to change. Click "Submit"

URL

Insert URL

Retrieve

Click to integrate and open for further settings

Width / height

Adjust the size of the video-area on the Webshop

Constrain

Choose if video should be constrained or not.

With ContentLinks you can link to any of your pages on the webshop from anywhere else in a discreet way.

Click "Add Content" and click "Macro".

Click "ContentLinks" and click "Add"

Navigate and click an the page or pages you wish to create links to - for this example 2 pages. Click "Submit".

This is the result on your Webshop:

You can add a CategoryMap anywhere in your webshop, by adding this Macro.

Click "Add content" on a column, and click "Macro"

Click "CategoryMap", click "Save and publish".

The CategoryMap automatically provides link to the shop category you click on. The CategoryMap feeds of the Category structure as defined in your Product Information Management (PIM) system

A ContentList is an element that works especially well with a Landingpage (Collection) because it presents itself with the Meta Images per childitem automatically. For this example we have created a Landingpage (Collection) called "Tutorials" with 3 Child Items, that are each a tutorial video of a specific product.

Click "Add content", and choose "Macro"

Choose "ContentList"

Content parent

If you are on a Landingpage (Collection) you need not choose a parent, it will automatically list the Child items that belong to this page. If on a regular Landingpage, press "Add" and navigate to the page that is the parent to your content

Limit

If you only wish the latest to be visible, you can limit the number of pages/Child items shown by defining the quantity here.

Highlighted positions (1,2,..)

A highlighted postion will appear larger. In the below example page/child item number 1 is highlighted, the rest are not. All can be highligted (1,2,3,4,5) or none

To decide what products are popular there is a worker setup that behind the scenes keeps an eye on how many times a product is sold (sold count as opposed to qty sold), within the latest 3 months.

The calculated popularity is not visible on the product in PIM and can therefor not visually be verified.

This popularity field in PIM can be manually overwritten by entering a numeric value, that will influence result in lists and sorting by popularity. If you wish to lower the popularity rate on a specific product, enter a low value, or enter a high value for products you wish to appear as top of popular product. Products with a manually entered value will then not be influenced by the calculation of the worker.

This manual overwrite is performed in PIM on product details, field "Popularity".

The popular products present on the product-page as a slider, will be the bestselling products within the same category as the product-page we are on, based on sale within the latest 3 months.