Edit Your Site

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

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

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.

  1. Go to Main > Site Builder > Editor.
  2. Click Pages.
  3. In the site tree, click the three dots next to Navigation and then click Add Page.
  4. Enter a Page Title. Note:  The Page URL is created automatically based on the Page Title, but you can change this if you want them to be different.
  5. 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.
  6. Click Save to add the new page.
  7. 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:

  1. Go to System > Settings > Publishing.
  2. For Product Publishing, choose one of the following options for displaying products on your storefront:
    LiveProducts display on your site as soon as they are saved in the Catalog module.
    StagedAfter 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.

  1. Go to Main > Site Builder > Editor.
  2. In the site tree, click the three dots next to Single Pages and then click Add Page.
  3. Enter a Page Title.Note:  The Page URL is created automatically based on the Page Title, but you can change this if you want them to be different.
  4. 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.
  5. Click Save to add the new page.
  6. Click Save to save the 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.

Note:  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.
  1. Go to Main > Site Builder > Editor.
  2. In the site tree, click an existing page under the Navigation or Single Pages categories and then select Add Page.
  3. Enter a Page Title.Note:  The Page URL is created automatically based on the Page Title, but you can change this if you want them to be different.
  4. 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.
  5. Click Save to add the new page.
  6. 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.

  1. Go to Main > Site Builder > Editor.
  2. 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.
  3. Click a page or template to display it in the page editor.
  4. 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.

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:

  1. Click on a page or a template in the site tree.
  2. Click Content and then Widgets to display the available widgets for that page or template.
  3. Drag a widget into a dropzone on the page editor for the page or template you want to edit.
  4. Customize the configuration settings for the widget.
  5. Click Save to add the widget.
  6. Click Save to save changes to the page or template.
Note:  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:

  1. Go to Main > Site Builder > Editor.
  2. Select your site from the site selector drop-down.
  3. Using the site tree, select a page on your site that you want to apply an active date range to.
  4. Click Settings to view the page settings for the selected page.
  5. 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.
  6. 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:

Note: 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:

  1. Go to Main > Site Builder > Editor.
  2. Select your site from the site selector drop-down.
  3. 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.

  4. Click Page Rules to view the expression builder.

  5. Start editing the expression by clicking the dropdown menu on the right of the starting table entry.

  6. 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.
  7. 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.

  8. 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.
  9. 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.

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

  7. Click Validate to have eCommerce check the expression.
  8. 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.

You can add further complexity to the expression criteria by clicking "Add Group" from the expression dropdown 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:

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

Note: 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:

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

Site Builder allows you to test how an email looks:

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

Add Facets to a Category Page

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:

  1. Go to Main > Site Builder > Editor.
  2. Use the site drop-down menu to select the site you want to edit facets on.
  3. In the site tree, click an existing category page to open the page in the page editor.
  4. Click Settings to view the page's settings.
  5. In the Facets section, use the drop-down box to select an attribute to use as a facet. Note:  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.
  6. Use the gear to view additional display styles for the facet, such as facet order. Note:  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.
  7. 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:

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:

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

Note:  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.