This guide explains how to customize and configure the online store module of Site Creator.

Setting up an online store on Site Creator

Prerequisites

• Access Site Creator:
  1. Click here to access the management of your product on the Infomaniak Manager (need help?).
  2. Click directly on the name assigned to the relevant product.
  3. Click on Customize my site:
     

To manage the general preferences of the e-commerce system (currency, taxes, etc.) once the module has been added:

1. Hover over the online store module added to your page.
2. Click on Configuration.
    

Once on Configuration, several sub-menus appear on the left allowing you to configure other parameters:

Payment methods

• PayPal
• Credit card & Twint (via Stripe or Mollie)
• Custom payment
• at delivery

To use the services of Stripe and Mollie, you must have a SIRET number in France or an IDE in Switzerland. Additionally, it is necessary to have a valid company registered with the commercial registry of your country to use the services of Stripe and Mollie.

Shipping methods

You can create multiple shipping methods:

These will then be offered when the buyer's cart is validated:

Among the parameters for creating a shipping method:

• rates (+ free shipping from a certain amount)
• allowed countries
• shipping fees based on weight
• delivery times
  
  

Messaging

Four messages are predefined and cannot be deleted. They cover all email communication around an order, both for the customer and the store manager.

It is possible to customize existing messages and add new ones (and delete these additional messages if necessary):

1. Choose when the email should be sent (or simply disable the message to keep it without using it)
   1. new order email (to notify you)
   2. processed order e-mail (customizable)
   3. delivery note in PDF format (customizable)
   4. invoice is also generated and available in PDF format on your Stripe/Paypal/Mollie account
2. Variables can be inserted into each field to maximize text customization using the elements that make up the order and the information provided by the buyer:

Homepage of the store

• Display of product categories if any
• Random product presentation
• etc.

Product management

To manage products, add or remove them:

1. Hover over the module at the top left.
2. Click on Products.

Find the first three example products:

Reorganize your products by dragging them with the mouse.

Click on a product to set its details as well as the category in which it should be found (read below). You can notably:

• create attributes (color, for example) to offer the same product in several versions/prices
• define whether the product should be dematerialized (virtual), for example a PDF, a ZIP or an MP3, and therefore downloadable after purchase

At the bottom of your product sheet edit, search for other products from your list in order to link and offer them to the visitor.

At the bottom of the product editing window, choose to hide the product from your visitors if necessary.

To finish and return to the product list, save the changes using the button at the very bottom.

Delete or duplicate a product

On the product edit page, click at the bottom on the action menu next to the save button to choose whether to delete the product or duplicate it.

Inventory management

In the same action menu, manage stock directly on the list of your products (to edit stock in bulk).

But each product sheet allows you to edit the stock and also enter the SKU (stock management unit) and its barcode (ISBN).

Product Categories

Your products can be organized into Categories and Subcategories which will then be displayed according to the design of your site.

Click in the sub-menu Categories on the left of the shop administration panel, under Products.

Set an image to illustrate your category.

Hide a category if necessary (this does not hide the products it contains).

Promo code

A promo code allows you to grant a discount (in % or currency) on an order.

Click in the sub-menu Promo Code on the left of the shop administration panel, under Products.

You can specify:

• its expiration date
• its possible minimum amount
• its name ("Special Christmas Discount" for example)
• its format ("JOYEUXNOEL")

Export the list of your products

Export your product list (CSV format) using the action menu located at the top right of your product list.

Order management

To manage past and current orders:

1. Hover over the module at the top left.
2. Click on Configuration.
3. Click in the sub-menu Orders on the left of the shop administration panel.

Export your order list

Export the list of your orders (CSV format) using the Download button located to the right of the order search bar.

Customer management

To manage clients (a client provides personal information during their order):

1. Hover over the module at the top left.
2. Click on Configuration.
3. Click in the Clients sub-menu on the left of the shop's administration panel.

Export your customer list

Export your customer list into a CSV file (format .csv) using the Download button located to the right of the customer search bar.

This guide concerns content blocks, which are one of the most important elements of Site Creator Infomaniak.

Introduction

• These are the content blocks that will allow you to easily create content on your pages.
• There are all sorts, separator, price list, site map, simple text or image blocks, etc.
• They are generally preconfigured to make it easier for you to get started with them.

Add a content block

Prerequisites

• Access Site Creator:
  1. Click here to access the management of your product on the Infomaniak Manager (need help?).
  2. Click directly on the name assigned to the relevant product.
  3. Click on Customize my site:
     

Once in Site Creator:

1. Click on the Content button in the left sidebar: the list of blocks appears.
2. Choose the desired category on the left, then the desired content on the right.

By clicking on the desired content, you make it appear on the page you were editing.

Another option: go directly to the page and hover over the space above or below an existing block:

Delete a content block

Hover over the block to delete on your page and click on the trash can that appears on hover:

Confirm the deletion and it will disappear. You can cancel this type of operation.

Duplicate a block

Hover over the block you want to duplicate on your page and click on the gear icon that appears on hover. Then choose the desired location for its duplication:

Edit a content block

Each editable element of the content block will be highlighted when you move your mouse over it. Simply click on one of these elements to start editing.

Additionally, you can edit the HTML code (recommended for advanced users only) if you need more control over any content block; this allows you, for example, to insert HTML code for subscribing to the Infomaniak Newsletter.

You can also delete certain elements from your content blocks: when editing text, there is the "right arrow" button that displays more options and the Delete button:

To edit an image, click on it and a new window appears. At the bottom, there is the Save button on the right and the red Delete button on the left.

Create a content block type

In the left sidebar, under the contents that can be added to your page, you will find a button to Design a content block:

All the elements that make up the blocks are arranged on the left. You can drag them to your template block to design your ideal block. This will be inserted into your page by clicking on Apply changes at the bottom of the page.

Modify the block margins

Hover over the content block you want to modify and click on the gear icon:

 

Scroll through the settings until you reach Default block spacing and click on it to set your own parameters:

The gear icon in settings also allows you to change the color or background image of the block.

Moving a block up or down

The content of your page is divided into "blocks". You can add more blocks and rearrange them.

Hover over the content block you want to move, then click on the dotted area at the top left; hold down to move the block:

Create a space between two blocks

To create horizontal space between content blocks, manually add a separator:

You will then be able to define its color and size.

You can also "decorate" the top and bottom of a block in a more automatic way, by activating the Decoration option from the block's edit menu:

This guide is intended for users of the tool Site Creator who want to go further in editing their pages.

Prerequisites

• Access Site Creator:
  1. Click here to access your product management on the Infomaniak Manager (need help?).
  2. Click directly on the name assigned to the relevant product.
  3. Click on Customize my site:
     

Open the HTML editor

Once in Site Creator, you can edit the HTML code (recommended for advanced users only) if you need more control over any content block:

1. Hover over the block you want to edit on your page and click on the gear icon that appears on hover:
   
2. Click on the HTML element in the left sidebar to edit the block's HTML code:
   

Add an HTML block

To start from scratch with a blank HTML block, you can insert the **Custom HTML Code** module on your page from the list of Apps:

The text is editable via the CODE button, which opens the HTML editor:

‍
You can also add code outside of the blocks.

This guide explains how to add and configure a contact form on your site created with Site Creator Infomaniak.

Create a custom contact form

Prerequisites

• Go to Site Creator:
  1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
  2. Click directly on the nameallocated to the product concerned.
  3. Click on Customize my site:
     

You can create one or more forms allowing your visitors to write a message, register for an activity, in short, fill in any kind of online form with or without attachment:

1. Click on the button Content in the left side menu.
2. Click on Applications at the bottom of the list then on Form Creator.

Once the first form is created it will appear on your page:

 

Contact form settings

You can customize the thank you message, the possible forwarding page after submission, the email address used, add a captcha (recommended), etc.

To do this, fly over the module to access its settings and if necessary click on the form you want to edit, then click the button at the bottom next to the change recording button. Choose Form properties.

It is recommended that: modify the method of sending default.

This guide details the creation of navigation menus for your site made with Site Creator Infomaniak, as well as their composition, styles and settings.

Prerequisites

• Go to Site Creator:
  1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
  2. Click directly on the nameallocated to the product concerned.
  3. Click on Customize my site:
     

The different navigation menus

The different pages that make up your site may be accessible within one or more menus navigational equipment:

1. Click on the button Adjustments in the left side menu.
2. By default the list of your pages appears, classified under 2 main headings: MAIN MENU and LEGAL.

But you can add more.

These menus with the pages they contain are then taken up in different places on your site according to the theme chosen in particular.

You will often find the main menu at the top of the page:

and other menus will be automatically offered in the footer:

 

Manage menu

You will be able to manage its presence in the Site map or delete it (he and all his pages):

1. Click on the button Adjustments in the left side menu.
2. Fly over a menu title in the existing tree.
3. Click on the toothed wheel icon that appears on the fly-over.

Be aware of this other guide for do not make a menu appear at all.
 

Create a sub-element in a menu

To this end:

1. Click on the button Adjustments in the left side menu.
   • The list of your pages appears.
2. With the mouse move a page slightly to the right under another page:
   
   
    
   • It will become a subpage and your menu on the site will be able to display the tree thus created.
      

Title of non-clickable menu

Choose if necessary do not make the very first element clickable of such a menu:

1. Click on the button Adjustments in the left side menu.
2. Click on General parameters in order to change this setting under Submenu options:
   

Menu item containing a link to another website

To this end:

1. Click on the button Adjustments in the left side menu.
   • The list of your pages appears.
2. Click on the button Add Page below the existing tree:
   
3. Choose a page name and Show more options.
4. Choose URL redirection to specify the destination when clicking:
   

Add New Menu

To this end:

1. Click on the button Adjustments in the left side menu.
2. Fly over a menu title in the existing tree.
3. Click on the "+" icon that appears on the fly-over:
   

Additional top menu

To display a "menu bar" at the top of your page:

1. Click on the button Design in the left side menu.
2. Click on More Settings.
3. Enable Header menu bar:
   
   • Once enabled you can customize it with the link Adjustments In the same place.

Menu Styles

To manage the different menu styles:

1. Click on the button Design in the left side menu.

2. Click on Menu Editor:
   
   

   ‍‍

In particular, you can decide on the location of your menus (on the left of the page or placed at the top, fixed or mobile, type "menu hamburger " to the right or normal, etc.).
 

Change the color of the "burger" menu

If it appears e.g. white on white on a mobile device:

1. Click on Menu title / logo (always under Design, then Menu Editor).
2. Adjust the text color:
   

Adopt a new menu theme

Change completely predefined style with the themes at the top of the submenu:

1. Click on Menu templates (always under Design, then Menu Editor):
   

Fixed menu

Most of the menus are going to move with the content of the page. The menu disappears If you go down to the page:

You can set a menu that will always be fixed on the upper edge (with different visual options):

To enable or disable the fixed menu:

1. Click on Design.
2. Click on Menu Editor:
   
3. Click on Main configuration.
4. Choose In the headerin the box Type of menu.
5. The toggle switch Fixed at the top displays below and you can activate it.
6. Click on Save:
   

Some menu templates (such as the #3 and #16) directly apply the optimal settings for a fixed menu:

Insert your menus in the body of the page

One module Subpage menu allows the insertion of your menus and submenus at any place on your page.

The module Site map displays all your menus and pages in one block.

Set page URL

By default if your page name is Contact then the URL to reach it will be www.domain.xyz/contact.

If later you change the page name to Contactez-nous then the URL will be www.domain.xyz/contactez-nous.

To set the custom URL of the page on which you are located:

1. Click on the button Adjustments in the left side menu.
2. Click on SEO & Metadata (under Parameters of this subpage):
   

The first field at the top defines the address of the page. Any space will be transformed into a hyphen and special characters, accents, symbols, etc. should be avoided.

If URL changes are saved while creating a site while a menu already contains a link to the page in question, it will be dynamically adapted.

This guide explains how to add and configure a blog module on your site created with Site Creator Infomaniak.

Preamble

• There is no feature to manage multiple users on the Blog section (or Site Creator).
• Several users of the same Organization with access to Site Creator (through their permission to access web hosting) will be able to post on the blog, but the identity of the author will remain the same for all.
• It is possible to be helped by artificial intelligence as is the case on the the rest of the pages of Site Creator.
  • Be aware of this other guide about the template used by the editorial assistant and the responsibilities of each.

Start a blog on Site Creator

Prerequisites

• Go to Site Creator:
  1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
  2. Click directly on the name assigned to the product concerned.
  3. Click Customize My Site:
     

Once in Site Creator, on the page where you want to insert your future blog articles:

1. Click on the button + located below an already inserted block:
   
2. Click on Applications (on the tab Content which opened when you clicked to add the visual block).
3. Click on the module Blog:
   
   1. If this is the first insertion of this module, then you get the next visual block with an example of the first published article (go to point 4 below):
      
   2. If you have already tested the Blog module before and have removed it from your pages, you get this:
      
      1. Press the top to insert the main block.
      2. Press the second choice to display a block with the last 3 published articles Only if you already have a main block inserted elsewhere on the site.
4. Once the module Blog inserted, overfly the block and click on Blog then on ‍ New article to insert a blank article:
   

Publish content by exploiting artificial intelligence

To write content and if necessary improve your writings:

1. Choose an image for the banner, enter a title, optional subtitle, body of the article with different formatting.
2. Press the sign + on the text of the article or the tab key on your keyboard.
3. Select the content and click on it to make appear a text formatting toolbar.
4. From this toolbar, access the possibilities offered by AI (translation, reformulation, correction, etc.):
   
   
    
5. Publish by clicking on the button Publish (or save the draft for later):
   

Edit Blog

To enable comments, email notifications, list layout and sorting, etc.:

1. Click on Applications in the left side menu.
2. Click on Blog.
3. Click on Parameters and set your preferences without forgetting to save at the bottom of the page:
   

Edit blog articles

No matter where you are when editing your site, just go to the menu Applications at the bottom left, then click on Blog:

 

To edit the content of your article, click on Browse Articles in the left side menu, fly over and click on the pencil icon ✎:

 

To set (read below) one of the articles, fly over and click on the toothed wheel:


 

Labeling, archiving or exhaling an item

A blog article may disappear from your list of articles, either by giving it an expiry date or by archiving it immediately. It is also possible to add a tag (label) that will be clickable for the visitor and thus facilitate browsing within posts:

 

Date of articles

By default, new blog posts will be added with the date "today" but it is possible to modify it:

1. Fly over and click on the date link (directly on the article).
2. Choose a new date.

This guide helps you customize a website created with Site Creator Infomaniak.

Prerequisites

• Access Site Creator:
  1. Click here to access the management of your product on the Infomaniak Manager (need help?).
  2. Click directly on the name assigned to the relevant product.
  3. Click on Customize my site:
     

Change the site's colors

To manage themes, colors, and fonts in Site Creator:

1. Click on the Design button in the left sidebar.
2. Click on Site Colors.

You can choose from the available color palettes or create your own custom color set.

Below there are more specific settings, where you can specify which elements a color should be applied to.

Manage the background (image/color) of blocks

On your site's editing page:

1. Hover over a block and click on the gear to access the settings:
   
   

Load a website template

You can completely change the design of your website by changing its theme, and deciding what should or should not be overwritten on the current site during the change:

1. Click on the Design button in the left sidebar.
2. Click on Theme Selection:
   

This is where you can choose from the available website themes.

Once you have found your new theme, click on Install and then you can choose which parts of the new template you want to import (by default, only colors, fonts, or menu style) to avoid overwriting the content of your website.

If your website is new, you can choose more options during import.

Change the fonts of the website

For this:

1. Click on the Design button in the left sidebar.
2. Click on Fonts:
   

You can easily change the main fonts of the website, the first font being used for headings and the second font for content.

Below there are more specific settings, where you can specify which elements a font should be applied to.

It is not possible to import or add a custom font but you can change the provider (the list of fonts will be the same) for privacy reasons, for example:

1. Click on Settings in the left sidebar.
2. Click on General settings
3. Choose the font provider:
   

Solving an issue with missing/invisible text

If you think your text block has disappeared or is invisible

then select all the content of the website (ctrl + a or cmd + a on Mac); if you see that your content is there, this probably means that the block settings are set for a dark background:

In this case, go to the block settings and make sure that the "Dark Background" option is not checked. This should solve this problem:

This guide explains how to manage the logo, header, and footer (footer) section in Site Creator Infomaniak.

Prerequisites

• Access Site Creator:
  1. Click here to access the management of your product on the Infomaniak Manager (need help?).
  2. Click directly on the name assigned to the relevant product.
  3. Click on Customize my site:
     

Add a website logo

Once in Site Creator:

1. Click on the Settings button, then Logo in the left sidebar.‍‍
2. Upload an image and choose whether the site name should also be displayed next to it.
   ‍

Logo settings

1. Click on the Design button in the left sidebar.
2. Click on Menu Designer‍ then Title/logo to adjust spacing and colors.

Center the logo display

In the same place as above, activate the option to display the logo on a separate line, which will center the site's logo:

Hide the logo (+ header and footer)

To create a page without a logo that will have neither a header (so no menu displayed) nor a footer, you need to define it as a Homepage (that is, a "Landing page"; note that this does not change the order of the pages) using a button that is located here:

1. Click on the Settings button in the left sidebar.
2. Click on Page List.
3. Hover over a page in the existing tree and click on the gear icon that appears on hover.
4. ‍Enable the "Homepage" option at the bottom to hide headers and footers:
   

This guide explains how to create galleries with your photos in Site Creator Infomaniak.

Create a photo gallery

Prerequisites

• Access Site Creator:
  1. Click here to access the management of your product on the Infomaniak Manager (need help?).
  2. Click directly on the name assigned to the relevant product.
  3. Click on Customize my site:
     

Once in Site Creator:

1. Click on the Settings button in the left sidebar, your list of pages will appear.
2. Click on the Add a page button below the existing tree structure.
3. Enable Show more options to select the page type PHOTO GALLERY:
    
   
    
4. Choose a page name.
5. Validate.

The new page with the photo gallery module appears on the screen.

Setting up the photo gallery

To do this:

1. Hover over the module to access the gallery settings.
2. Click on Edit:
   

Photo albums

You can create additional photo galleries for your various albums:
‍
‍

Change the order of the photos

When your gallery is created, each new photo you upload from your computer is added to the end of the photo list; you can easily change this order by dragging the photos with the mouse when you edit a gallery:

 

Additionally, you can add a description to any of your photos. Under each image, you will notice the "Image Description" field. Start typing your description there and press the green button to save the changes:

Add an image slider widget

To configure one or more dynamic Slider widgets, on which one or more photos will slide laterally (with no connection to the photo galleries described above):

1. Click on the Applications button in the left sidebar.
2. Click on Slider:
   
3. Configure the widget according to your preferences.
4. Insert the configured widget in the desired location by clicking on Content then Apps and choose Slider: