Configuring design and content for New-gen Instant Site

Instant Site is a free website that you get with your store account. It has a built-in online store so that you can start selling right away.

With the New-Gen version of our Instant Site, you can:

Build a website from customizable content sections;
Use ready-made website templates suitable for different types of stores — from restaurants and cosmetics to selling art and courses;
Add a wide variety of sections like covers or special offers from the library;
Create navigation menus to make it easier for customers to browse your store;
Translate all your site’s content, including SEO title and description.

To edit your Instant Site, go to Website and click Edit Site. If Instant Site is not your main site, go to Overview → Manage Instant Site and click Edit Site.

Choosing a site template

To speed up Instant Site setup, you can choose from a set of ready-made website templates. These templates can be edited however you like to fit your business.

Please note that if you have started editing the site by adding your text and images, this content won't save after you choose a template. You will have to start over with your content.

To choose a template for your site:

From your store admin, go to Website → Edit Site. If Instant Site is not your main site, go to Overview → Manage Instant Site and click Edit Site.
Click Settings → Site Templates.
Browse the list of templates to find the one you like.
To see how a template looks, hover your mouse over it and click Preview Template. To apply template, click Use Template:

That’s it! You have chosen a template for your Instant Site. Now you can continue with site setup and make changes to this template in the editor.

Introducing the editing mode

When you open your Instant Site for editing (Website → Edit Site. Or Overview → Manage Instant Site →Edit Site if Instant Site is not your main site), you can see the list of Homepage Sections that your Instant Site currently consists of.

All these sections are visible on the Instant Site preview to the right, where they appear in the same order they go in the list:

To visit your site on the web and see how it looks on a separate tab, click Your Instant Site on top of the editor.

Adding sections

If you need extra sections for your website (e.g., a “Special Offer” section, sections with info on delivery/payment, an extra “About Us” or “Customer reviews” section) or you want to replace the default section with the one that suits your store better, you can easily add as many new sections as you like. When you have a lot of sections, you can rename them to make site navigation more easy.

To add a section to your Instant Site:

From your store admin, go to Website → Edit Site.
Click + Add Section.
On the opened page, click the preview of the section you need. The sections are grouped by their topic.
Once you click on the section, it will be opened for editing and added to your list of Homepage Sections.
(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 always delete the ones that are extra.

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 section that are present in the Homepage Sections list of the Instant Site editor.

To edit the content of the section:

From your store admin, go to Website → Edit Site.
Сlick the section.
On the Content tab, find the element you need.
Make the necessary changes: change the text, upload a new image, set up action links, etc. You can also rename section by clicking its title at the top.

Pre-entered texts in the section templates contain tips on what to write in the fields.

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 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 – black, white, or transparent – to your images.

To edit the design of the section:

From your store admin, go to Website → Edit Site.
Сlick the section.
Switch to the Design tab:
Make the necessary changes (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.)

You can always go back to the previously saved version of your website by clicking Draft Auto Safed → Discard All Changes on top of the editor. For the changes made on the Design tab, you can also use the Restore section defaults link at the bottom. Please, note that this link brings back the initial settings of the design template for this block.

Once you are done editing your website, click the Publish button in the top right corner of the editor.

Changing the order of sections

The sections of your Instant Site are displayed in the order they go in the Homepage Sections list of the Instant Site editor (Website → Edit Site). You can change the order of all the sections except for Header 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:

Deleting sections

You can delete a section from the Homepage Sections list if you don’t need it on your Instant Site. For example, you are just setting up your store and don’t have customer reviews yet.

To remove a section from your Instant Site:

From your store admin, go to Website → Edit Site.
Сlick the section.
Scroll down and click Delete section at the bottom:

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

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

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 →

Customizing header appearance

A website header is the top section of your site. It contains a logo (or your store’s name), a search bar, action links, a bag icon, a navigation menu, and contact information. You can adjust the design of the header to match your brand identity.

To edit the design of the header:

From your store admin, go to Website and click Edit Site.
In the Homepage Sections menu, click Header & Menu.
Click the Design tab to customize appearance:
- Layout. Choose the looks of your header.
- Site logo. Change font, size, and color of the store’s name. You can also add more space between letters and capitalize the name.
- Background. You can make the header transparent, grayscale transparent, or choose a solid color for the background. To change the color, select the Solid color in the dropdown and choose the color.
- Menu & icons. Change font and color for all content in the header. Here, you can also specify what elements to show in the header (navigation menu, shopping bag icon, search bar, and/or customer account link).
- Action links. Customize the call to action button style in the header. You can also disable or enable the button with the Show element toggle.
Click Publish.

Adding navigation menu

Navigation, or website menu, is a list of links that is displayed on top of your site:

A website menu makes it easier for customers to navigate while browsing your store and find what they are looking for. You can choose to display the menu as a horizontal bar of links at the top of your site or as a hamburger menu. Mobile customers will see the hamburger menu disregarding what design you choose.

Each link in the navbar menu can redirect you to a specific section of your site or to any other page on the Internet. You can also create a click-to-call or mail-to link, so that a customer can reach out to you.

To set up a navigation menu:

From your store admin, go to Website and click Edit Site.
In the menu on the left, click Header & Menu.
In the Content tab, click Navigation menu.
You can click on the existing link to edit it or create a new link by clicking + Add Menu Item.
(optional) To rearrange the order of links, drag-and-drop them to the desired position.
Click on the menu item to customize it. In the Name field, enter the name that will make sense to customers. For example, About Us, Give Us a Call, etc.
Choose the action on click:
- Scroll to site section — a customer will be redirected to one of your site’s sections.
- Open page — you can enter any URL to redirect customers on that page.
- Compose email — after clicking the link, the default mail service on a customer’s device will open.
- Call phone — after clicking the link, a customer’s phone will dial your number.
- Go to store — a customer will be redirected to your storefront.
Click Back, then Back again, and then Design.
In the Layout section, select how you want to display your navigation menu.
Click Publish.

Adding categories menu

Product categories are groups of items that you bundle to show on the same page in your store — for example, Coffee Mugs, Summer Fashion, Bestsellers. You can display the menu of your root categories, so that shoppers can quickly find the product they are looking for:

To create a categories menu on your Instant Site:

From your store admin, go to Website and click Edit Site.
In the menu on the left, click Header & Menu → Navigation Menu and click + Add Menu Item.
Name the item so that it’s clear for customers that it is the link to your store.
Click the Action on click drop-down and select Go to store.
Make sure the Show categories on menu hover toggle is enabled. You can turn the toggle off to hide the categories menu.
Click Publish.

Note that since the categories menu is shown on hover, it won’t display on mobile devices. When a customer taps a store link from the menu, they will be redirected to your store right away.

Adding action links

For some sections of your Instant Site (e.g., site cover, testimonial, “Contact Us”) it is possible to add action links. Action links are clickable texts or buttons with text. When a customer clicks this text (or 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 (e.g., when there is a sale).

To set up an action link:

From your store admin, go to Website → Edit Site.
Сlick the section.
On the Content tab, click Add Action Link.

The image section has Primary action and Secondary action buttons instead.
Enter Title. This will be the text of your link.
Choose Action on click: Scroll to site section, Open page, Compose email, Call phone or Go to store.
Choose the site section/enter URL/enter email or phone number.
(optional) Change the appearance, font, size, shape, and color of the action link on the Design tab.

Example design of an action link for an email in the “Contact Us” section:

Configuring the store sections

There are two sections that can show customers where to access the store on your Instant Site: Store and Root Categories. By default, only the Store section is present in the Homepage Sections list:

The Store section includes all the products that are assigned to the Store front page category in your store. This section is a perfect place to showcase items that you want your customers to see the most. Once a customer clicks on a featured product, they will be redirected to the page of this product in your store.

If you have a small catalog, then you can simply have all the products in the Store section. In case you have a larger catalog, though, you will most likely need a system of categories in your store. To display these categories on the front page of your Instant Site, add a special Root Categories section. This section will contain all the root categories that you have.

To make categories easier to navigate, you can also set up a categories menu.

To add a Root Categories section:

From your store admin, go to Website → Edit Site.
Click Add Section.
On the opened page, scroll down to Products.
Click the Shop by category block so that it appears in the Homepage Section list:

You can set up how both Store and Root Categories sections look on the front page of your Instant Site. For that, go to the Design page in your store admin. You can also change the layout of these sections (e.g., product name and price, how the “Buy Now” button and main product image are displayed, etc.) in the Site editor.

To change layout of the store sections in the Site editor:

From your store admin, go to Website → Edit Site.
Click on the section.
Make the necessary changes on the Content and Design tabs (set the section title, choose which elements to display, change fonts and the background style and color, etc.)

Settings in the Site editor prevail over similar settings on the Design page in your store admin.

Adding slider to Instant Site

Slider, or carousel, shows one big image at a time as an automatic or manual slideshow. It also contains a little snippet of text and the call-to-action button. Slider is a great way to showcase particular products in detail, list brands you sell, highlight an art portfolio, or explain why customers need to choose your brand.

Let’s say you want to highlight the brands that you sell.

To add a slider to your New-Gen version of Instant Site:

From your store admin, go to Website → Edit Site.
Click + Add Section.
On the menu on the left, click Promo Sliders and select the template.
Click on the slide name in the menu on the left to replace the default content with your images and texts. Let’s say you want to highlight the brands that you sell. In our example, the new images showcase different brands the store has to offer.
In the Action Link section in the left-hand side menu, click the button to change its name and specify where it should redirect visitors. Since in our example it’s the brands showcase, the link on each slider will lead to its own specific brand category.
To change the appearance of slide content, go to the Design tab:

On the Design tab, you can align text by changing the slide layout, turn off and on the automatic slideshow, add overlay for photos, change font and lettering, and also hide title, description and the button.

That’s it! Now the promo bar will be displayed on top of the front page of your Instant Site:

Configuring_design_and_content_for_New-Gen_Instant_Site.gif

Applying default fonts and CSS

There are two major ways you can change the fonts on your Instant Site. First, you can set the fonts for every element of every section individually in the Design tab of this section. There you can choose font type, size and style (bold or italic) as well as the text color. Second, you can set the default font for all the sections of your site with global font settings.

For example, you can use global settings if you are trying various layout options and you don’t need different fonts for different elements of your site sections. This way, you will save yourself time and will have a consistent design across your website in a flash.

You can set:

Title fonts (these are the fonts of the section headings)
Body text fonts (these are the fonts of text paragraphs, button texts, and subtitles)

Once you have set the default font for your site, you can still change fonts for individual elements. Global font settings are applied only to those elements that have the “Default” font chosen in the Design tab of the editor.

Global font settings that you apply in the Instant Site editor are used only for the website itself, including store sections (a preview that shows your customers where to access the store on your site). They are not used in your actual store where customers browse for products as the storefront is considered an independent part of your website.

In case you need to adjust the look (including fonts) of your store or you want to customize the look of your Instant Site – on top of the settings that are available in the editor – you can do that by adding custom CSS codes. With the help of Cascading Style Sheets (CSS) you can change the styles that are used on your pages – adjust the color of buttons or hide them, adjust fonts, hide prices, and much more.

To apply fonts and/or styles:

From your store admin, go to Website → Edit Site.
Click Settings → Fonts & Styles.
To set default fonts for your Instant Site, choose the fonts in the Title font and Body text font dropdowns.
To apply styles, click Advanced settings and enter your CSS code:

In case you switched to the New-Gen Instant Site from the regular version of our Instant Site and have some active CSS themes previously applied in the Design page of your store admin, then these codes will still be applied in your store (until you deactivate them). In case you later apply new codes in the Instant Site editor and there are some intersections, the codes that you apply in the Design page will have priority for your store pages.

Adapting Instant Site’s mobile view

You can choose how your Instant Site cover image will adjust to mobile screens.

There are two available options:

Your site cover takes all the mobile screen. In this case, the image is cropped, and site text is displayed above it.
Your site cover fits to the width of the screen. In this case, the cover image remains fully visible and is displayed at the top of the screen with site text placed below it.

To set up cover image display on mobile:

From your store admin, go to Website → Edit Site.
In Homepage Sections, click Cover & Headline and go to the Design tab.
(optional) Choose a cover layout.

Adjusting cover image display on mobile is available for full screen layouts only.
Click Mobile layout to select the layout option:
(optional) Change background style and color if needed.
Click Publish.

That’s it! You can now go and check how your site looks on different mobile devices.

Changing website address and store name

You can edit the name and address of your store website so that they reflect the concept and name of your brand.

To edit the name of your website:

From your store admin, go to Settings → General → Store profile.
Enter the store name into the Store name field in the Store name and web address section.
Click Save.

To edit the address of your website:

From your store admin, go to Overview → Manage Instant Site (or Website → Domain).
Click the Change Address button.
Enter the name you prefer for your web address into the Use our subdomain field.
Click Save.

Optionally, you can edit the address of your website by clicking Change address on top of the Instant Site editor.

Showing the cookie consent banner

In countries like the EU, you might need to show the cookie consent banner on your store website. To display it, go to Settings → Tracking & Analytics in the Instant Site editor (Website → Edit Site) and enable the Show cookie consent banner toggle:

Learn more about cookie notifications in your store →