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

Understanding Instant Site editor features

The Instant Site website builder provides rich editing and customization tools for designing your website, including SEO settings and more in-depth CSS customization:

• Customizable themes: Choose a premade layout to use as a canvas for creating your own website.
• Different content types: Add and edit text, static images, gifs, videos, sliders, buttons, maps, links, social links, and custom code.
• Customizable content sections: Sections contain the content of your website and are stored in the editor library. You can add and update site sections and include images, text, products, navigation menu, promo bars, and more.
• Easy content arrangement: Move a section and all its text and images at once using the drag-and-drop editor.
• Multiple pages: Depending on your goals, you can create a one-page landing or a multi-page website.
• WYSIYG (What You See Is What You Get) editor: Preview changes in real-time on the right side of the screen for a more intuitive experience.
• Dark mode: Switch between light and dark mode to adjust the brightness of the editor.
• Mobile responsiveness: Instant Site is mobile-friendly and automatically adapts your design to every screen size so your site design looks good on mobile and tablets too.
• SEO settings: To improve your site ranking on search engine results pages, you can specify SEO tags and descriptions for different pages of your website.

Applying Instant Site themes

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

Your Instant Site offers 70+ fully customizable themes tailored to different business niches. You can add, edit, move, 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.

Selecting a site theme

Choose from a variety of free themes or start a trial to check out paid premium themes:

1. In your eCom admin, navigate to Design > Go to Instant Site Editor.

2. Click Settings > Themes. To view business-related themes, click the categories at the top.

   

3. Click Preview Theme to view it.
4. Click Apply Theme to switch to a free theme or click Start Free Trial to apply a paid premium theme.
5. Click Publish to apply the theme.

Changing site themes

If you've already applied a theme and made updates to content or images, changing your theme may override your updates. Before applying a different theme, back up any site text or images you'd like to keep.

• What won't save: Any changes you’ve made to an initial theme after you switch to a new theme and publish will not be saved, including text and image edits, navigation menu changes, SEO settings, and other edits to your site.
• What will save: Pages added to your initial theme will save after switching to another theme. You will need to re-add links to the added pages in your navigation menu.

Before clicking Publish after switching to a new theme, you can revert to the previous theme with all your changes intact by clicking Discard all > Discard unpublished changes at the top right of the editor.

Using a custom Instant Site theme

In addition to ready-made site themes in the Instant Site theme library, there's also the option to create your own custom theme. Custom themes allow you to craft a unique online presence tailored to your specific needs, with advanced integrations and interactive elements that stand out.

To build themes, you need a good knowledge of Typescript and its Vue framework, or you can hire a developer or ask someone from your IT team.

Custom themes can include:

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

After creating your custom theme, you can install and manage it in the site editor:

1. In your eCom admin, navigate to Design > Go to Instant Site Editor.
2. Click Settings > Themes.

Accessing the Instant Site editor

To access the Instant Site editor:

1. In your eCom admin, navigate to Design > Go to Instant Site Editor.

   In the site editor, you can add 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 previewed in real-time in the site editor.

   

2. To apply site-wide settings, click Settings at the top-left of the site editor. You can change your website theme, add more site pages, customize SEO, translate the website, choose fonts, enable cookie consent and age confirmation banners, and more.

   Changing your theme may override updates you've made to content or images in your current theme. Before applying a new theme, back up any site text or images you'd like to keep.

Learn more about updating your site in Setting up your eCom (E-Series) Instant Site.

Managing changes to your site

At the top of the editor, you can use the controls to preview and apply site adjustments. All the changes you make in the editor are saved automatically.

• While you design your site, click Preview to see how your pages will look to visitors. You can switch between desktop and mobile views to see how the site appears on different screens.
• Changes won’t go live until you click Publish at the top right corner.

• To undo changes and revert to the last published version of the site, click Discard all > Discard unpublished changes.

  Once published you won't be able to undo changes, you can only revert to the last published version of the site.

Adding a favicon to your site

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, etc. Favicons help users identify your site and enhance brand recognition.

The recommended favicon image size and format are PNG, 192 х 192px, but you can upload images of any size in JPG, PNG, JPEG2000, GIF, WEBP, TIFF, or ICO file format. You can create a favicon using online favicon generators or a graphics editor.

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

1. In your eCom admin, navigate to Design > Go to Instant Site Editor.
2. Click Settings > SEO & Sharing > Site favicon.
3. Click + Add favicon or Change favicon.
4. Upload an image to use for the favicon.
5. Click Publish to apply the changes.

To delete a favicon, click Delete favicon.

Applying custom design to Instant Site with CSS

You can also apply custom design to your website pages using Cascading Style Sheets (CSS). With CSS you can hide buttons or change colors, adjust fonts, hide prices, and more. Applied CSS code has a higher priority than changes made through the Instant Site editor.

To apply CSS to your Instant Site:

1. In your eCom admin, navigate to Design > Go to Instant Site Editor.
2. Click Settings > Fonts & Styles.
3. Click Advanced custom CSS and enter your CSS code.
4. Click Publish to apply the changes.

Adding CSS codes in the site editor allows you to apply code to all Instant Site pages. To add CSS codes to individual site pages, use custom code sections.