# Designing your New-gen Instant Site

### Introducing the editing mode

When you open your Instant Site for editing **Website** → **Edit Site**, you can see the list of site blocks that your Instant Site currently consists on the left hand side under **Site Blocks**.

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

![](/files/-MlLXhscnqzYOJ7j6KES)

To preview your site in a different tab, click **My Website** → **Visit Website** on top of the Editor.

![](/files/SEqa4ALBcB9qZN9eCwl3)

### Adding blocks

If you need extra sections for your website (e.g., a “Special Offer” section, blocks with info on delivery/payment, or an extra “About Us” block) or you want to replace the default block with the one that suits your store better, you can easily add as many new blocks as you like.

To add a block to your Instant Site:

1. From your TAKU eCommerce control panel, go to **Website** → **Edit Site**.
2. Click the **Add Block** button.
3. In the Add Block page, click the preview of the block you need. The blocks are grouped by their topic:

![](/files/HJuMCLyP2dGAXtXfhWuq)

4\. Once you click on the block, it will be opened for editing and added to your list of Site Blocks, right before the Footer block.

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

## **Editing blocks**

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 blocks that are present in the **Site Blocks** list of the Instant Site Editor.

To edit the content of the block:

1. From your TAKU eCommerce control panel, go to **Website** → **Edit Site**.
2. Сlick the block.
3. On the **Content** tab, find the element you need.
4. Make the necessary changes (change the text, upload a new image, set up action links, etc.)

Pre-entered texts in the block 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.

To edit the design of the block:

1. From your TAKU eCommerce control panel, go to **Website** → **Edit Site**.
2. Сlick the block.
3. Switch to the **Design** tab:

![](https://support.ecwid.com/hc/article_attachments/360024637720/Configuring_Instant_Site_content___design__5_.png)

4\. Make the necessary changes (set the block layout – it defines positions of elements in relation to one another, change font/style/color for the elements of this block, 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 **My website → Discard Changes** on top of the Editor. For the changes made on the Design tab of the block, you can also use the **Restore block defaults** link at the bottom. Please, note that this link brings back the initial settings of the design template for this block.

![](/files/xEQIYseKrow0EQoByEL1)

Blocks with unsaved changes in the **Site Blocks** list will be marked with a blue dot:

![](/files/tRTTgj2vetsIFD4jjRCm)

Once you are done editing your website, click the **Save & Publish** button in the top right corner of the Editor.

![](/files/fgViucqSEch6GwI5pdOg)

## **Changing the order of blocks**

The blocks of your Instant Site are displayed in the order they go in the **Site Blocks** list of the Instant Site Editor. You can change the order of sections in the desired way. For this, click **Settings → Reorder Blocks**. After you do that, you will be able to click, drag and drop the site blocks to your liking:

![](/files/eAAwCzwQsDhtVsJLLa1h)

![](/files/T8fIWt3NljEPXxXzHpdf)

You can change the order of all the blocks except for Header and Footer – these are always the first and the last blocks of your website.

## **Deleting blocks**

You can delete a section from the **Site Blocks** list if you don’t need it on your Instant Site. For example, you are just setting up your store and don’t have a Customer Testimonial to feature yet, or your business is seasonal, and you don’t need the Featured Products block at the moment.

To remove a block from your Instant Site:

1. From your TAKU eCommerce control panel, go to **Website** → **Edit Site**.
2. Сlick the block.
3. Scroll down and click **Delete block** at the bottom:

![](/files/fYzrBoD4IFS8nCCvAyEW)

If you need this block on your website later, you can always **add similar blocks from the library**.

If you have deleted the Customer Testimonial block and want to add it back, choose any similar block from the list and modify it according to your needs. You can also have additional testimonials on your website this way.

You cannot delete the Header and Footer blocks, but it is possible to disable them so that they are not displayed on the website. To do this, click the corresponding block 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.

![](/files/SoLpePsDdkFwXhHVkKzv)

## **Adding navigation menu**

Navigation or website menu is a list of links that is displayed on your site.

![](/files/xvO5JmN0zEzpuHXXn3vi)

You can create a website menu to make it easier for customers to navigate while browsing your store and find what they are looking for. The navigation menu on your Instant Site will be displayed as a horizontal bar of links at the top of your site for desktop users. Mobile customers will see the hamburger menu instead. They have to tap the menu to see the links.

When a customer clicks a link, a certain action is performed. Depending on what you choose, customers can be redirected to the specific block 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:

1. From your TAKU eCommerce control panel, go to **Website** and click **Edit Site**.
2. In the **Site Blocks** section, click **Header**.
3. In the **Content tab**, click **Navigation menu**.
4. You can click on the existing link to edit it or create a new link by clicking **+ Add Menu Item**.
5. In the **Name field**, enter the name that will make sense to customers. For example, *About Us*, *Give Us a Call*, etc.
6. Choose the action on click:
   * **Scroll to site block** — a customer will be redirected to one of your site’s blocks.
   * **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.
7. Click **Save and Publish**.
8. (optional) You can change the order of the links. While editing your site, go to the **Header → Navigation menu** to see the list of all the links you created. You can rearrange the menu items order by dragging them the way you want. Click **Save and Publish**.

You can also change the design of the navigation bar to match your brand identity.

To edit the design of the website menu:

1. From your TAKU eCommerce control panel, go to **Website** and click **Edit Site**.
2. In the **Site Blocks** section, click **Header**.
3. In the **Design tab**, click **Background** to choose the color for the navigation bar.
4. Click **Navigation menu** to choose the font and color for the links in the bar.
5. Click **Save and 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:

![](/files/H3CANkLHrhraD7BYFDLz)

To create a categories menu on your Instant Site:

1. From your TAKU eCommerce control panel, go to **Website** and click **Edit Site**.
2. In the menu on the left, click **Header → Navigation Menu** and click **+ Add Menu**.
3. Name the item so that it’s clear for customers that it is the link to your store.
4. Click the **Action on click** drop-down and select **Go to store**.
5. Make sure the **Show categories on menu hover** toggle is enabled. You can turn the toggle off to hide the categories menu.
6. Keep the **Show store links on menu hover** toggle turned on to show store links like *Shopping cart*, *Account*, and *Product Search*:Turn the **Show store links on menu hover** toggle off to hide links.

![](/files/7hQfLmPYaQjnQrWCLdlR)

7\. Click **Save and 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, or the “Contact Us” block) 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:

1. From your TAKU eCommerce control panel, go to **Website** → **Edit Site**.
2. Сlick the block.
3. On the **Content** tab of the block, click **Add Action Link**.

   Cover block has **Primary action** and **Secondary action** buttons instead.
4. Enter **Title**. This will be the text of your link.
5. Choose **Action on click**: *Scroll to site block*, *Open page*, *Compose email*, *Call phone* or *Go to store*.
6. Choose the site block/enter URL/enter email or phone number.
7. (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” block:

![](/files/TrlgapsR3fyECZ0sSrbC)

## **Configuring the store blocks**

There are two blocks that can show customers where to access the store on your Instant Site: the Featured Products block and the Root Categories block. By default, only the Featured Products block is present in the Site Blocks list:

![https://support.ecwid.com/hc/article\_attachments/4404458986898/store\_blocks\_1.png](https://support.ecwid.com/hc/article_attachments/4404458986898/store_blocks_1.png)

The Featured Products block includes all the products that are **assigned to the Store front page category in your store**. This block is a perfect place to showcase items that you want your customers to see 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 Featured Products 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 right on the front page of your Instant Site, you can add a special Root Categories block. This block 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 block:

1. From your TAKU eCommerce control panel, go to **Website** → **Edit Site**.
2. Click **Add Block**.
3. On the opened page, scroll down to **Products**.
4. Click the **Shop by category** block:

![](https://support.ecwid.com/hc/article_attachments/4404465865490/store_blocks_2.png)

5\. Once you click on the block, it will be opened for editing and added to the Site Blocks list.

You can set up how both the Featured Products block and the Root Categories block look on the front page of your Instant Site. For that, go to the [**Design**](https://my.ecwid.com/#design) page in your TAKU eCommerce control panel. You can also change the layout of these blocks (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 blocks in the Site Editor:

1. From your TAKU eCommerce control panel, go to **Website** → **Edit Site**.
2. Click on the block.
3. Make the necessary changes on the **Content** and **Design** tabs (set the block 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 TAKU eCommerce control panel.

## **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 block **individually** in the **Design** tab of this block. 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 blocks 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 blocks. 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 block 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 blocks** (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:

1. From your TAKU eCommerce control panel, go to **Website** → **Edit Site**).
2. Click **Settings → Fonts & Styles**.
3. To set default fonts for your Instant Site, choose the fonts in the **Title font** and **Body text font** dropdowns.
4. To apply styles, click **Advanced settings** and enter your CSS code:

![](https://support.ecwid.com/hc/article_attachments/4403454547986/Applying_codes_and_CSS.png)

In case you switched to the New-gen Instant Site from the old version of our Instant Site and have some active **CSS themes** previously applied in the **Design** page of your TAKU eCommerce control panel, 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.

## **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:

1. From your TAKU eCommerce control panel, go to **Settings → General → Store profile**.
2. Enter the store name into the **Store name** field in the **Store name and web address** section.
3. Click **Save**.

To edit the address of your website:

1. From your TAKU eCommerce control panel, go to **Website** → **Domain**).
2. Click the **Change Address** button.
3. Enter the name you prefer for your web address into the Use our subdomain field.
4. Click **Save**.

On TAKU eCommerce's **paid plans**, you can also **connect your own domain**.

## **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 (**Overview → Manage Instant Site** → **Edit Site**) and enable the **Show cookie consent banner** toggle:

![https://support.ecwid.com/hc/article\_attachments/360024637460/Configuring\_Instant\_Site\_content\_\_\_design\_\_7\_.png](https://support.ecwid.com/hc/article_attachments/360024637460/Configuring_Instant_Site_content___design__7_.png)

This toggle enables the cookie consent banner both on your Instant Site and in your store. You can also **enable the banner** to show it on your store pages only.

![](/files/HvJShFdL8NdoTtNn97zC)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.takulabs.io/selling-online/start-selling-online/designing-your-storefront/designing-your-new-gen-instant-site.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.