Instant Site is an eCom (E-Series) code-free site builder enabling you to create a website, landing page, or online catalog. The easy-to-use editor makes the design process seamless, even for beginners. In a nutshell, you choose a template and then customize it by adding and editing pages, sections, texts, and images to create a website tailored to your business.

In this article, you will get an overview of the site editor features and templates.

Instant Site editor features

As a website builder, Instant Site provides you with rich editing and customizing tools for designing your website. The list of tools is not limited to the editing mode itself, but also includes SEO settings and more in-depth CSS customization.

Here’s a list of features to help you create your online presence:

• Customizable templates. Speed up designing your site by choosing a premade layout that you can use as a canvas for creating your own website.
• Different content types. You have an option of adding and editing text, static images, gifs, videos, sliders, buttons, maps, links, social links, and custom code.
• Customizable content sections. All content of your website lives inside sections. Sections are stored in the library where you can choose a goal-specific item, such as store, customer reviews, slider, and so on.
• Easy content arrangement. To move a section with all the text and images, simply drag-n-drop it in the editor.
• Multiple pages. Depending on your goals, you can go with a one-page landing or create a multi-page website.
• What You See Is What You Get editor. All the changes you make are shown in real-time on the right side of the screen, providing you with a more intuitive experience.
• Dark mode. Switch between light and dark mode to adjust the brightness of the editor.
• Mobile adaptivity. No matter what design you create for your website, it will look good on mobiles and tablets since Instant Site is mobile-friendly and automatically adapts your design to every screen size.
• SEO settings. To improve your site ranking in the search engine results, you can specify SEO tags and descriptions for different pages of your website.

Introducing the editing mode

To access the Instant Site editor:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. Click Edit Site to open the editor.

In the site editor, you customize the site by adding your own content, images, and branding to create a unique and professional-looking website. For each section of the site, you can choose a layout, background, and style. All the changes you make are shown in real time right in the editor.

For high-level settings that are applied to the whole website, you can click Settings at the top-left corner of the editor. Those settings include choosing another website template, adding more site pages, customizing SEO, translating the website, choosing fonts, enabling cookie consent and age confirmation banners, and more.

You will find detailed instructions on various editing processes in the Setting up your eCom (E-Series) Instant Site section of the Help Center.

Previewing, publishing, and undoing changes on your site

All the changes you make in the editor are saved automatically, so there’s no Save button. Still, at the top of the editor, you will find buttons to help you control and preview the adjustments:

• While you design your site, you can click the Preview button to see how your site looks to visitors. You can switch between desktop and mobile views at the top to see how the site appears on different screens.
• Changes won’t go live until you click the Publish button at the top right corner.
• Until you hit the Publish button, you can always undo changes and revert to the last published version of the site. For this, click Discard all > Discard unpublished changes at the top right corner of the editor. Please note that you can’t sequentially undo a series of recent changes, only return to the latest published version.

Introducing Instant Site templates

Templates are pre-designed website layouts that provide a quick, consistent starting point for creating your site. They serve as a site draft where you rearrange and add content to create your own website.

Your Instant Site offers 70+ templates tailored to different business niches. All templates are fully customizable and free to use, so you can add, edit, and remove any content such as text, images, colors, fonts, navigation menu, site sections, and pages to shape a site that matches your style and business needs.

Instant Site templates consist of editable sections. A section is a block of content that may include images, text, products, navigation menu, promo bars and so on. You can rearrange, add, remove sections, and change their content, therefore creating your own site.

When you edit your templates, your changes display in real time in the editor preview. You can also add pages to better organize content.

Switching to another site template

You can choose a different template to change your site’s design and structure.

Keep in mind that switching to another site template affects edits you made, such as adding your copy and images. Here’s how it works:

• Any changes you’ve made to an initial template won’t save after you switch to a new template and publish it. That includes text and image editing, navigation menu changes, SEO settings, and edits to your online store. That means you have to design the site content from scratch.
• In case you’ve added pages to your initial template, those pages with all the edits will save after switching to another template. However, you will need to add links to the pages to your navigation menu once again.
• Before clicking Publish after switching to a new template, you can revert to the previous template with all your changes intact by clicking Discard all > Discard unpublished changes at the top right of the editor.

To change a site template:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.

2. Click Settings > Templates. To view business-related templates, switch between tags at the top.

   

3. Click Preview Template to view it. Click Apply Template to switch to it.
4. Click Publish to apply the template.

Developing an Instant Site template

In addition to ready-made site templates that are available in the Instant Site template library, there’s an option to create your own custom template. Custom templates allow you to craft a unique online presence that will stand out and work seamlessly for both you and your customers. Eye-catching designs tailored to a brand's specific needs, advanced integrations, interactive elements — you’re only limited by your developer’s skills and your budget.

Compared to the default templates offered by Ecwid, your custom template could include:

• Complex artisan layouts to create a memorable user experience and ensure a perfect match with your brand’s visual identity;
• Custom functionality like built-in booking widgets, forms for collecting customer emails, social media integrations to improve customer engagement and retention;
• Integrations with third-party services you use to run your business the way you like.

After your custom template is ready, you install it by going to Online tab > Webstore (or Website) > Edit Site > Settings > Templates, as you do with the default templates. You can then edit it however you like in the site editor: change its content and design, add pages and sections.

You need a good knowledge of Typescript and its Vue framework to build templates. To perform the task, you can hire a developer, ask someone from your IT team to do this, or submit a request to the eCom (E-Series) customization team.

Adding a favicon to your eCom website

A favicon is a small icon that shows in a browser tab before the website name. It also appears in bookmarks, browser history, Google search results, shared posts on social media, Apple Touch Icons, etc. Favicons help users identify your site and enhance brand recognition. 

For favicons, you can upload images of any size in the JPG, PNG, JPEG2000, GIF, WEBP, TIFF, or ICO file format. The recommended image size and format are PNG, 192х192px.  You can create a favicon with online generators like Favicon.io, Looka, Favicon Generator, or Favic-o-matic, or use a graphics editor.

You can upload a favicon for your eCom website in the site editor.

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. Click Settings > SEO & Sharing > Site favicon.
3. Click the + Add favicon button. To update an existing favicon, click Change favicon.
4. Upload an image or file from your device that you want to use for the favicon.
5. Click Publish to apply the changes.

You can delete a favicon you set for your Instant Site anytime. For example, if you’ve had a rebranding and the new favicon is not ready yet. For that, click the Delete favicon button in Settings > SEO & Sharing > Site favicon in the site editor.

Applying custom design to Instant Site with CSS

Apart from designing your site in the Instant Site editor, you can apply custom design by using Cascading Style Sheets (CSS). When you apply CSS codes, they have a higher priority than the changes made through the Instant Site editor.

With the help of Cascading Style Sheets (CSS) you can change the styles that are used on your website pages – adjust the color of buttons or hide them, adjust fonts, hide prices, and more.

To apply a certain style to your Instant Site:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. Click Settings at the top and then Fonts & Styles.
3. To apply styles, click Advanced custom CSS and enter your CSS code.
4. Click Publish to apply the changes.

Adding CSS codes in Settings > Fonts & Styles > Advanced custom CSS in the site editor allows you to apply codes to all the Instant Site pages. You can add CSS codes to individual site pages using custom code sections.