You build your eCom (E-Series) Instant Site with customizable content sections such as customer reviews, company info, delivery & payment, contact information, and so on. You can add, edit, reorganize, and delete sections to arrange your content.

Adding sections

You can add new sections to any page of your website. For instance, position the Delivery & Payment section at the page dedicated to shipping, or add a section with video to showcase your products. When you have a lot of sections on one page, you can rename them to make it easier to organize content in the editor.

To add a section to your Instant Site:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. Click + Add Section.
3. On the opened page, click the preview of the section you need. For example, add the Video section to embed video on the site.
4. Once you click on the section, it will be opened for editing and added to your list of sections.

5. (optional) To rename a section, click on it in the left-hand side menu in the editor, then click on its name to enter a custom name:

   

You can edit section design and content to your liking and change its position on your website. If you have duplicating sections (e.g., you have added a new Cover section with the layout that appeals to you more), you can delete the ones that are extra.

If you want to add a section with custom design or functionality to your Instant Site (for example, a design image carousel tailored to your needs or a booking widget), you can do that with a bit of coding. You can develop a section yourself, hire a third-party developer, or order help from eCom (E-Series) customization team. See development guidelines for Instant Site sections.

Editing sections

Your website can have the texts, colors, and images that suit your business needs. You can edit the content and design for each of the page sections in the Instant Site editor.

To edit the content of the section:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. Сlick the section.
3. Switch between the Content and Design tabs to make corresponding changes:
   
4. On the Content tab, make changes to the content: write your copy, upload a new image, set up buttons, etc.
5. On the Design tab, choose how the section looks: set the section layout – it defines positions of elements in relation to one another, change font/style/color for the elements of this section, set up the background, choose which elements to display, etc.
6. (optional) You can rename the section by clicking its title.
7. Once you are done editing your website, click the Publish button in the top right corner of the editor.

Here are some tips on editing sections:

• You can upload images in JPG, PNG, JPEG2000, GIF, WEBP, and TIFF format that are under 20 MB each. The recommended size is 1500-2000px. As the website layout adapts to the screen size of a customer's device, try to crop your images so that the most important information is in the center. If you want to add text to your images, you can add it in the Instant Site editor (instead of a photo editor).
• To avoid clipping, you can add borders to your images – black, white, or transparent.
• You can always go back to the previously saved version of your website by clicking the Discard button at the top of the editor.
• To discard changes made on the Design tab, you can use the Restore section defaults button at the bottom of the tab. Please, note that this link brings back the initial settings of the design template for this block.

Hiding sections

To temporarily stop a section from appearing on your website, you can hide it. For example, if you have a section to advertise a recurring sale that is currently over, you can hide this section for now.

To hide an Instant Site section:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. Сlick the section.
3. Click the three dots in the menu on the left, then click Hide Section:
   

You can always start showing the section again by clicking the three dots > Show Section for it.

Duplicating and moving sections

To speed up setting up your website, you can duplicate sections and move them to other Instant Site pages (if you have them).

To duplicate or move an Instant Site section:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. Сlick the section.
3. Click the three dots in the menu on the left, then click Duplicate Section or Move to Page:
   
4. (for multipage websites) Select the site page where you want to place the section that you duplicate or move.

Changing the order of sections

The sections on your site are displayed in the order they go in the Sections list of the Instant Site editor (Online tab > Webstore (or Website) > Edit Site.). You can change the order of all the sections except for Header, Announcement, and Footer – these are always the first and the last sections of your website.

To change the sections order, simply drag and drop your Instant Site sections in the left-hand side of the editor:

Adding buttons to sections

You can add buttons or clickable text to some sections of your Instant Site like the Cover, Special Offers, Customer Reviews sections, and so on. When a visitor clicks the button a certain action is performed. For example, you can specify a product URL that will open upon click or scroll customers to a specific section of your website.

To set up a button:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. Сlick a section, or add a new section from the library.
3. On the Content tab, click Button or Add Button. The Cover section has Primary button and Secondary button instead.
4. In the Title field, enter the text that appears on the button.
5. Choose Action on click.
6. Choose the site section, enter email, phone number, or a link. You can enter a link to a specific page of your site.
7. (optional) Click Back to change the appearance, font, size, shape, and color of the button on the Design tab.
8. Click Publish.

To remove an existing button from a section if you no longer need it, delete the button name from the Title field, then publish the changes.

Translating sections

You can translate section content to another language, therefore creating a multilingual site. The site’s content includes header menu, footer, customer reviews, new arrivals, delivery and payment info, special offers, company info, locations, and site’s SEO title and description.

Each new language appears in the language switcher so customers will be able to choose their preferred language.

Learn how to translate Instant Site content →

Deleting sections

You can delete a section if you don’t need it on your site anymore. For example, you have just begun to set up your store and don’t have customer reviews yet.

To remove a section from your Instant Site:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. Сlick the section.
3. Scroll down and click Delete section at the bottom:
   

If you need this section on your website later, you can add similar sections from the library.

You can’t delete the Header and Footer sections, but it’s possible to disable them so that they are not displayed on the site. To do this, click the corresponding section in the editor, scroll down and disable the Show footer or Show header toggle at the bottom. You can enable them back anytime.

Customizing mobile view for site sections

By default, Instant Site has an adaptive design that works well across different devices — mobiles, tablets, and widescreens. In addition to the mobile-friendly design, you can tailor the mobile view of the Cover and Promo Slider sections to be more precise on how your site should look on small screens.

When you choose a mobile layout for Instant Site sections, you have two options:

• Crop the image while displaying it in full-screen width. In this case, the site text is shown above the image.
• Don’t crop the image; instead, shrink it to fit the width of the screen. In this case, the image remains fully visible and is displayed at the top of the screen with the site text placed below it.

Here’s an example of how it may look:

Some section layouts will not allow you to choose a mobile view. So to select a mobile view, you will have to change the section layout on the Design tab.

To set up how images and copy are displayed on mobile:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. At the top of the editor, click Page and select a page that you want to edit.
3. Click the section and switch to the Design tab.
4. Click Mobile layout to select the layout option.
5. (optional) Change background style and color if needed.
6. Click Publish.

You can now check how your site looks on different mobile devices.