The Site Editor allows you to directly insert Slots and SmartBlocks onto your website, check how these changes look, then publish them so the content becomes visible. You can achieve all this without having to involve your IT or web teams.
Access the Site Editor
To access the Site Editor go to Content > Site Editor in the left side navigation menu. Your website opens with the Site Editor loaded.
To choose the content configuration you want to preview or edit, expand the Experience and Version drop-down menus.
The Experience drop-down allows you to select from any of your customized Experiences.
Learn more in Introduction to Experiences.
The Version drop-down allows you to select from previously published versions of the selected Experience. To view a complete list of all versions, select Full Version History.
From here, select the Show Options (three dots) icon for a version to:
Preview the version.
The Site Editor displays the selected version. You can select Publish to make this the live version on your site.
View the Details of the version.
Copy the version to Draft.
This allows you to make edits to a previous version without altering the original.
Edit the Version Name.
You can give each version a name that makes it easy for you to identify later.
Additional websites
If you want to access multiple websites using the Site Editor, you must list all website addresses on the Website Settings page. The Site Editor won’t launch for any website not listed.
To see a list of supported websites:
Select the Options (⋮) icon in the top toolbar.
Expand the Website drop-down menu.
or
Expand the User menu and go to Settings >Website Settings.
elect Site Details.
You must also list any subdomains on the Site Details settings page that you want to be able to access in the Site Editor.
If your websites or subdomains aren’t all listed, contact us.
Add content to your site
To add a new Slot or SmartBlock:
Select the Add New Content (+) icon in the top toolbar
In the side panel, select either Add Slot or Add SmartBlock.
Select and drag the content you want and place it on the page. Blue lines indicate valid positions for your content to be placed.
If you drag a SmartBlock onto the page you’re prompted to create a new Slot for it to be contained in. This then appears under Content > Slots.
You can choose which pages of your site the Slot should display on. To do this, expand the Pages drop-down menu.
Behavior
Slot behavior dictates when the Slot should appear in relation to the nearest page element.
If you want to change how a Slot behaves, you can expand the Behavior drop-down menu on the Edit Placement panel.
Select a Slot on the page to open the Edit Placement panel.
Behavior options
Behavior Option | Description |
Append To | This adds the Slot after the target but inside its parent element. |
Prepend To | This adds the Slot before the target but inside its parent element. |
Insert After/Before | This adds the Slot immediately after or before the targeted element. |
Replace Element | This replaces the targeted element with the Slot. |
Replace Contents | This removes the contents of the targeted element and replaces them with the Slot, but leaves the element itself intact. |
Insert After/Before Slot | This adds the Slot immediately after or before another Slot’s placement.
When selecting this option, an additional field is displayed: Relative to Slot. This contains the rule ID of the Slot it is being placed in relation to. |
To minimize flicker and Cumulative Layout Shift (CLS), best practice is to use the Site Editor to replace existing content of the same pixel size.
Edit placement
The Position is the specific part of the webpage where you want the Slot to be placed. As you move a Slot around the page, the position is automatically identified, but you can also manually update it. To do this, enter the element name you want to target and then select Apply.
Advanced
You can use the Inspect tool in the Chrome browser to help you find the element you want to target. Right click > Inspect Element to open Developer Tools.
To learn more about CSS selectors and selecting various elements on your website, W3Schools is an excellent starting resource.
View all Slots
To see all the Slots added to the content configuration you’re editing, select the View All Slots icon in the top toolbar.
You see a list of Slots in the Experience, along with their publication status, any placement errors, editing status, and if they have an optimization. You can expand the panel to access additional details like the page type, position, and behavior of each Slot. Select the Open table settings (||||) icon to choose which columns to display.
To find a particular Slot, you can use the Search field to enter a Slot name, or expand the Filter by drop-down menu, and then choose from:
On the current page
Error with placement
In published version
Has changed
Has optimization
Expand the Pages drop-down menu to show Slots which appear on the selected page.
Tip: If you can’t see a Slot that you’re looking for in the editor view, you can use the All Slots panel to check that it has been placed.
There are certain actions you can perform on multiple Slots at once. To do this, select the left hand checkbox for the Slots you want, then expand the Bulk Actions drop-down menu.
For a published version you can:
Disable Slots
Enable Slots
For an unpublished version you can Remove Slots.
Error indicator
If there are any Slots on a page that cannot be placed, an error indicator appears in the toolbar. The indicator might change as you navigate around your website, as it’s specific to the page type.
For example, you might have a Slot set up to replace the .h1 banner on All Pages. This Slot might work correctly on most pages, but if you go to the cart page, where there is no .h1 banner, the Slot can't be placed and an error is shown for that particular Slot.
Sometimes we’re unable to load a Slot because the target — a name or type of identifier that indicates the precise position on the page — can’t be found. For example, if you’re targeting the Slot to be placed beneath a header, but the header has been removed, or if the Slot is relative to another Slot that has since been removed, the Slot no longer knows where it should be positioned and an error displays.
Slots on your site not available in the Site Editor
You might not be able to select and edit a Slot on your website for several reasons:
Content deployed server-side.
If the content has been deployed server-side, you won't be able to select it using the Site Editor.
Manual insertion using HTML.
If the Slot was manually added using the relevant block of HTML, you won’t be able to select it using the Site Editor. The Editor displays a highlight around such content, and a label stating that the Slot can’t be edited as it was added outside the Site Editor.
Slot positioning.
If the Slot was placed inside an anchor tag, you need to manually update its position. To do this, enter a new CSS selector into the Position field and select Apply, or use the arrows next to the Position field to move the Slot through the structures’ hierarchy.
Preview content
You can preview personalized content on your website in Preview mode. To enter Preview mode, select the Preview (eye) icon in the top toolbar.
In the Previewing side panel, you can:
select a date and time to preview for.
This is useful if you want to preview a Countdown SmartBlock, or content that you have set to show only during a flash sale, for example.
select a location to preview for.
You might have content that differs based on the area that the visitor lives, such as showing information for their nearest store.
set your control group settings:
Not in control group
In control group
set which specified person you want to preview as:
For Previewing as, enter an email address to preview the site as that visitor sees it.
Select A random person to have the system generate a preview for any one of your visitors.
To view the visitor’s record in a new tab, select the person icon. To generate a new random preview, select the refresh icon.Select An unidentified person to preview how your site looks to a visitor that has not been identified in Fresh Relevance.
select which content to view for Slots with multiple SmartBlocks.
Expand the drop-down menu for the Slot and select the SmartBlock you want the preview to use.
Once you’ve configured your preview, select Apply to update your website preview accordingly.
Share preview (Browser and Mobile)
You can also create a link or a QR code to view your content in a web browser or mobile device.
Browser preview
To create a share preview link
On the Site Editor toolbar, select the Share preview icon.
Under Browser preview, select the displayed URL to open your content in a new tab.
If you want to copy the link to your clipboard, select COPY LINK.
Mobile preview
To preview your content on a mobile device.
On the Site Editor toolbar, select the Share preview icon.
Use your Mobile device to scan the QR code. This opens your content on your mobile device.
Publish
Once you’re happy with your configuration, select Publish. The updated version is then deployed to your website.
Because of internet caching, there may be a delay of up to 10 minutes.
Disable Slots in a published configuration
You may want to temporarily disable a Slot which is live on your website.
To do this:
In the Site Editor, expand the Version drop-down menu in the top toolbar, and select the published version.
Indicated by a green dot.Select the All Slots icon and then expand the All Slots side panel.
Set the Enabled switch to off.
To disable all Slots at once, select the checkbox to the left of the Enabled column header, then expand the Bulk Actions drop-down menu and select Disable All. You must then publish a new version which disables the Slots.
To stop an entire configuration from being displayed on your website, you must make sure the Experience is no longer assigned to a rule set.
To do this:
Go to Content > Experiences.
Select the Experience you want to edit.
Select EDIT to the right of the assigned Experience rules.
Remove the Experience from the decision tree.
Select SAVE.