Edit Your Site

To access these tools, go to Main > Site Builder > Editor.

Site Builder provides the following editing tools to customize your site:

The Content pane of the Site Builder editor displays your site as shoppers would see it, and provides dropzones where you can add content to pages using Widgets. The resolution icons allow you to change between desktop, tablet, and mobile resolutions.

The site tree under Pages allows you to view and edit the organization of your site.

Callout of the Pages tab in the Site Builder The following table explains the page categories in the site tree.

Page Type	Description
Templates	These are the default pages provided by your theme. Other pages on your site, such as Navigation or Single Pages, are based on templates. Any change you make to a template propagates to all pages on your site that use that template. If you want to add or delete a template from your site, consult with your theme developer because templates are coded in the theme files.
Navigation	These pages display on the navigation bar. These pages automatically populate based on the Categories you set in the Catalog module, and you can also add non-Category pages of your choosing.
Single pages	Whenever you want to add a page that should not display on the navigation bar, add a single page. These pages only display on your site through direct links.
Email templates	Templates for the emails generated through system actions, such an order confirmation email.
Order templates	Templates related to orders, such as order details and packing slips.

The Layout pane allows you to add adjustable-width columns to dropzones on the page. You add the columns using the Widgets available on the Layout pane.

You can edit the Settings for each page on your site (e.g., page name, template used, meta information for SEO, faceting options). The available settings are determined by your theme developer and can vary from the default settings provided by the Kibo eCommerce Core theme. If SEO settings display, they might include:

Field Name	SEO Effect
Meta Title	Maps to the HTML meta title tag. While most search engines place little value on this tag, most Kibo eCommerce themes inject the value of the meta title tag into the HTML title tag. The HTML title tag is used by search engines and browsers to display the title of the page, and is critical to SEO. Search engines place very high importance on the correlation between a page's title tag and its content.
Slug	The default URL structure for products is `yourSite.com/{slug}/p/{productCode}` and for categories is `yourSite.com/{slug}/c/{categoryId}`. The slug (or SEO-friendly URL) gives you the ability to add a meaningful component to the URL structure in order to boost search results.
Meta Description	Maps to the HTML meta description tag, which is used by search engines to summarize the content of the page.
Meta Keywords	Maps to the HTML meta keywords tag, which is used to tell search engines what the page is about. From an SEO-perspective, search engines place little value on this tag, but the Kibo eCommerce search implementation uses these keywords to help construct search results for pages on your storefront.

Example of the Settings pane in Site Builder with a page selected

The Page Rules pane allow you to configure display rules for the page and page variants, such as restricting it to particular customer segments.
The Site Builder top bar includes preview and publish options.
The site selector drop-down on the left allows you to choose between the sites on your sandbox. The View drop-down includes preview options that allow you to view your staged and live site.

The Publish and Save buttons allow you to save your changes, publish your changes to your live site, or schedule your changes to publish at a future date by adding the content to a publish set.

Add a Page to the Navigation Bar

Using the site tree, you can add pages to the navigation bar. The pages on the navigation bar tend to display prominently to shoppers at all times, although the exact design of the navigation bar depends on your site's theme. Typical examples of pages you might want to add to the navigation bar include top-level product categories and your site's home page.

Go to Main > Site Builder > Editor.
Click Pages.
In the site tree, click the three dots next to Navigation and then click Add Page.
Enter a Page Title.
The Page URL is created automatically based on the Page Title, but you can change this if you want them to be different.
Choose a template for the page using the Choose type drop-down menu. The available templates depend on your theme. You can customize the page using widgets after you add it.
Click Save to add the new page.
Click Save to save the changes to your site tree.

In addition to adding a new page to the navigation bar, you can drag existing single pages into the navigation section of the site tree.

Add Categories to the Navigation Bar

The categories in your catalog automatically populate in the navigation bar. However, you can configure how quickly new products display on your live site after their initial save:

Go to System > Settings > Publishing.

For Product Publishing, choose one of the following options for displaying products on your storefront:

Live	Products display on your site as soon as they are saved in the Catalog module.
Staged	After saving products in the Catalog module, you must use the Publishing module to display your products on your site.

Add a Single Page

If you want to add a certain type of page to your site but find that it is not included in your theme templates, add a single page. For example, imagine you want to add a sign up page to your site, but your theme does not provide a Sign Up template. In this case, add a single page. You can then drag it into the navigation bar or leave it as a standalone page that needs to be linked to directly from other pages.

Go to Main > Site Builder > Editor.
In the site tree, click the three dots next to Single Pages and then click Add Page.
Enter a Page Title.
The Page URL is created automatically based on the Page Title, but you can change this if you want them to be different.
Choose a template for the page using the Choose type drop-down menu. The available templates depend on your theme. You can customize the page using widgets after you add it.
Click Save to add the new page.
Click Save to save the changes to your site tree.

Add Links

You can add links underneath the Navigation or Single Pages categories. If you add a link underneath a navigation page, the link displays as a navigation sub-menu of the page you add it to.

If you add a link underneath the Single Pages category, there is no visible effect on your site. However, you can add links underneath a single page and then move the entire structure to the navigation bar, and vice versa, so the ability to add links is made available for both categories. If you move links from the Single Pages category to the Navigation category, the links display as sub-menus on the navigation bar.

Go to Main > Site Builder > Editor.
In the site tree, click the three dots next to an existing page under the Navigation or Single Pages categories and then select Add Link.
Enter a Navigation Link Name. This name displays in the navigation bar.
Specify a relative or absolute URL to link to.
If you want the link to open in a new tab, enable Open in New Tab.
If you extended the Core theme before April 28, 2016, your theme developer needs to make a very minor modification to your theme to enable this feature. To make this change, ask your theme developer to implement this pull request, which includes a few simple changes to link tags within one Hypr template.
Click Save.
Click Save to save changes to your site tree.

Nest Pages

You can nest pages underneath existing pages in the Navigation or Single Pages categories. If you add a page underneath a Navigation page, the page displays as a navigation sub-menu of the page you add it to.

If you add a page underneath a single page, there is no visible effect on the URL structure. The page will retain its normal URL structure, such as www.yoursite.com/child-single-page. You can add pages underneath a single page and then move the entire structure to the navigation bar, and vice versa, so the ability to add pages is made available for both categories. If you move nested pages from the Single Pages category to the Navigation category, the nested pages display as sub-menus on the navigation bar.

Go to Main > Site Builder > Editor.
In the site tree, click an existing page under the Navigation or Single Pages categories and then select Add Page.
Enter a Page Title.
The Page URL is created automatically based on the Page Title, but you can change this if you want them to be different.
Choose a template for the page using the Choose type drop-down menu. The available templates depend on your theme. You can customize the page using widgets after you add it.
Click Save to add the new page.
Click Save to save the changes to your site tree.

Customize a Page or Template Using Widgets

Most pages on your site are based on templates. For example, an individual product page is likely based on the Product template. When you make a change to a navigation page or a single page, the change applies only to that page. However, when you make a change to a template, the change propagates to every page on your site that uses that template.

Go to Main > Site Builder > Editor.
In the site tree, expand the Navigation, Single Pages, or Templates categories, depending on whether you want to make a change to an individual page or to the template.
Click a page or template to display it in the page editor.
Use widgets to customize the page or template.

Widgets allow you to add custom content to a page or template, such as images, headers, links, featured products, social media connectors, and more.

Example of the widget options in Site Builder

You must place widgets inside dropzones, which are the areas of a page or template where your theme developer has enabled adding custom content.

To add a widget:

Click on a page or a template in the site tree.
Click Content and then Widgets to display the available widgets for that page or template.
Drag a widget into a dropzone on the page editor for the page or template you want to edit.
Customize the configuration settings for the widget.
Click Save to add the widget.
Click Save to save changes to the page or template.

If you make changes to a template, the changes propagate to every page that uses the template.

Set an Active Date Range for Content

You can specify an active date range that determines when content on your site is live. For example, you can create content for an upcoming sale and select the exact date and time when the content goes live on your site. You can also specify the end date for when you want to remove the content from your site. When setting an active date range, you can specify both a start date and an end date, just a start date, or just an end date.

Complete the following steps to enable an active date range for a piece of content on your site using the page settings available in Site Builder:

Go to Main > Site Builder > Editor.
Select your site from the site selector drop-down.
Using the site tree, select a page on your site that you want to apply an active date range to.
Click Settings to view the page settings for the selected page.
Under Active Date Range, specify a Start Date and/or End Date for the page. Leave the start date blank if you want the content to be active immediately. Leave the end date blank if you do not plan to deactivate the content.
Click Save.

Set Rules-Based Display Options

The Rules-Based Page Display feature allows you to manage the conditions in which an active page is displayed to the viewer. These rules can be applied to page variants, allowing you to stage and preview more than one version of a page with different display criteria, allowing all of these variants to be activated on the site and viewed when appropriate. The configurations set up in these page rules can be used in conjunction with Publish Sets. Display rules are created by configuring expressions based on these data fields and their relationship to selected values.

As an example, you can set a page to be displayed only if the customer viewing the site belongs to a specific customer segment or you may have a normal page you would like to display a special holiday version of. You can stage both the normal page and a version styled to match the holiday page at the same time, with the holiday variation set to appear during the holiday's date(s). Your eCommerce site then will automatically switch between those pages when the timing conditions are met, including reverting to the non-holiday version of the page when the holiday is over. You can even combine the first example and the holiday example, so the holiday page will only be displayed for certain customers (such as if the page were displaying a holiday discount code that was only valid for a particular customer segment).

The data fields that are currently supported for these rules to be based on are:

Start/End Dates – the start and end dates in which the page will be active, as set in the page Settings described above.
Customer Segment – the segment that the customer viewing the site belongs to.

As the addition of this feature allows for page variant integration, the Site Builder can now display all page variations. It allows you to rename, delete, edit, and duplicate these variants, as well as rank them via dragging them up and down the list in the grid to move them higher or lower. Rank determines the order in which pages are evaluated so that in the event of a conflict where two different page versions are possible (e.g., if the user belongs to two customer segments that each have their own page), the higher-ranked variation will be displayed.

To configure these display rules:

Go to Main > Site Builder > Editor.
Select your site from the site selector drop-down.
Using the site tree, select a page on your site and then a variant of that page that you want to edit the display rules for. Page rules are not available for standard pages, only variations.
Click Page Rules to view the expression builder.
Start editing the expression by clicking the drop-down menu on the right of the starting table entry.
Click Edit to switch an expression between "All of the Following" and "Any of the Following." You will be adding conditions to this expression, and this initial setting determines whether every single condition must be met or only at least one condition must be met.
Click Add Condition to begin building the expression criteria.
1. Select the data field that this rule is using to determine whether or not to display the page.
2. Select an operator to determine the relationship between the field and the value you are looking to base your rule on. For end or start dates, the options are "is less than or equal to" and "is greater than or equal to." For customer segments, the options are "is one of the following" and "is not one of the following."
3. Insert the value that you want the rule to be applied to. If you are creating a rule based on customer segments, you will select the appropriate segment. If you are creating a rule based on a start or end date, then you can use the calendar icon to easily enter your desired date and time.
Click Save to finish creating the condition and add it to the expression. eCommerce will automatically run validation on the rule to ensure that the parameters are correct. If the validation fails, then an error message will be displayed.
You can click the drop-down menu on the right side of each condition's entry in the expression table to delete or edit it after it has been created.

Alternatively, you can write your own expression instead of using the module shown above.

Go to Main > Site Builder > Editor.
Select your site from the site selector drop-down.
Using the site tree, select a page (or page variant) on your site that you want to edit the display rules for.
Click Page Rules to view the expression builder.
Click Advanced in the top right to open a widget for creating your own expressions via JSONt.
Enter your expression using one of the available formats.
Click Validate to have eCommerce check the expression.
Click Save to create the expression and return to the Page Rules.

You can create multiple conditions in the same expression to create a more complex display rule. For example, two conditions were created for the below expression that means the page will only be displayed if the customer belongs to the Special Customers segment and the date is after February 4th, 2020 at 1:26PM.

Example of expression logic configurations You can add further complexity to the expression criteria by clicking "Add Group" from the expression drop-down menu instead of Add Condition. This will essentially create a sub-set, allowing you to create conditions in a secondary "All of" or "Any of" expression contained within the primary expression. For example, the below expression would display the page in all of the following cases:

When the customer belongs to the Example Segment and Special Customers
When the customer belongs to the Example Segment segment and the date is after February 4th
When the customer belongs to the Example Segment and Special Customers, and the date is after February 4th

It would NOT display the page if the customer belonged to Special Customers but neither the exampleSegment nor startDate matched the other condition criteria.

Example of a complex expression with multiple criteria

Once you have finished creating your expression, you must save the page draft in the top-right corner of the screen (next to Publish Now) before going to a different page, or else your Page Rules configurations will be lost. Alternatively, you can publish the page or add it to a publish set if desired.

Customize Email and Order Templates

Email and order templates provide customization options through page settings. Depending on your theme, email and order templates may provide only settings to edit and not provide dropzones in which to use widgets. In general, you can add custom subjects, headers, and footers to email templates and add company information to order templates.

To customize an email or order template:

Go to Main > Site Builder > Editor.
In the site tree, click an existing email or order template to open the template in the page editor.
Click Settings.
Customize the template settings as applicable.

Site Builder allows you to test how an email looks:

Click the three dots next to an email template and select Send Test Email.
Provide an email address and click Send Email.

For more intensive customization to the email template content, such as inserting labels and order data variables, you must edit your theme and use the Hypr templating system.

You can give your shoppers the ability to narrow down the selections in a given category to fit their shopping needs using facets.

Any product attribute that's a property can be used as a facet, as long as the attribute is in the master catalog associated with your site and has Available as Filter & Sort enabled on the attribute definition. You can also use your theme to customize how facets are displayed on category pages.

You can set facets on any category page, and they inherit down to all nested child categories. Refer to Facets for more information about facets.

To create a facet on a category page:

Go to Main > Site Builder > Editor.
Use the site drop-down menu to select the site you want to edit facets on.
In the site tree, click an existing category page to open the page in the page editor.
Click Settings to view the page's settings.
In the Facets section, use the drop-down box to select an attribute to use as a facet.
In addition to the attributes you have already set as facets, you can also select base attributes and sale price. All attributes in the master catalog associated with your site are available as facets.
Use the gear to view additional display styles for the facet, such as facet order.
If you do not specify a facet order, the default order for new attribute facets that have an input type of List is Attribute Definition and the default order for element facets is Facet Count: High to Low.
Click Save to save your facet selections.

Review Your Changes

When you make changes using the page editor, the changes save to your staged site. After making a change, you can review how the change displays in various contexts. Click View to preview:

Your staged site (opens in a new tab).
Your live site (opens in a new tab).
If your content publishing settings are set to Staged, then you will not see content changes appear on your live site until you publish the changes using the Publishing module.

Publishing Changes Workflow

Before you review or publish your content changes, refer to the following workflow to successfully make and publish changes in Site Builder:

Make your change on one page using the page editor.
Review the change on your staged site using the View drop-down. Remember to test different resolutions using the resolution icons, if applicable.
Make other edits, repeating steps 1 and 2 as necessary.
Navigate around your staged site to see how the changes work together.
View your live site to examine the differences between the staged changes and the live content.
Publish your changes, either immediately or at a future date via a publish set.
View your live site to confirm the changes.

Publish Changes

After you save changes to your staged site, click Publish Now to publish your changes immediately or Publish Now > Move to Publish Set to publish your change later via a publish set.

You can view all content changes waiting to be published in the Publishing module. Go to Main > Publishing > Content to open the Publishing module.

Depending on user privileges, you may not be able to publish staged changes in the Publishing module. Refer to Publishing for more information on using the Publishing module.