Sitesmith

Front end user experience that user interact with to make design selections.

Siteforge

Backend tool that takes the selections within Sitesmith and builds the website.

Content Editor (Side Panel)

As you make additions/changes in the Content Editor (Side Panel), you will see the changes happening in the Site preview.

Open

Site Preview

Site Preview Tool Bar

With this tool bar you can update colors, change images, move sections, select variables, updating padding, take a snapshot to save the layout, and navigate between the homepage, listing page, and detail page.

Site Section

This is the different site sections that you can add to the homepage. You cannot use a section more than once on the homepage and you don’t have to use all sections on a website. You want to find the best combination of sections that makes the homepage look good and flow properly.

Variant

Variant is a style options within a specific section. Clients have a choice of what the section looks like. Some sections only have one style choice, while others have multiple styles to them. You can only access the Variant when using the Variant tool within an section.

Continue Button (aka Save Button)

This is aka the “Save” button, it will save the content/selections made as you continue through the process. Make sure to click Continue at every opportunity so you save your work as you move through the different selections. No matter what Continue button you click, it will save the work you have done thus far.

Notes

Anytime that you see a “Notes” field within the Content Editor (Side Panel) you will be able to add a note for that selection. The goal is to take a note on something that you are not able to accomplish within the experience and it will save that note into Salesforce for the Front End Development team to complete the request. You can include URLs so that you can give the FED a image or a example from a URL of what you are referencing.

The paint can icon tool will allow you to apply a color to the background of certain sections. Once you have click the paint can icon tool at the top The paint can icon will display on or in the sections where you are able to change the color. If the paint can icon does not appear after you have clicked the paint tool icon at the top, that means that section does not have the ability to change the color.

The colors available are the 4 main colors within the theme selection in the Content Editor (Side Panel). Plus standard colors such as white, grey, charcoal, and black. The only colors that can be edited are the first 4 theme colors. When you change the theme colors, it will change the colors in this tool as well.

The image icon tool will allow you to apply images within certain sections, backgrounds, and banners. Once you have click the image icon tool at the top, the image icon will display on or in the sections where you are able to change an image. If the image icon does not appear after you have selected the paint tool icon at the top, that means that section does not have the ability to change the image.

Actions you can take within the image selector:

• You can filter by tag to only see the images you want to view so you don’t have to scroll through all the available images. This is a type a head feature and most of the tags are a single word.

• You can refresh the images. This is best used when you change variant within an section where the image size may be different. You can click Refresh Images to display the images that are sized for the variant that you have selected.

• You can preview any image to see it as a larger image by clicking the box with an eye in the upper left corner of the image.

• When you find an image you want to use, click the checkmark icon in the upper left of the image to select the image.

• To remove the image you have selected, you will select the full image URL and delete the image URL.

• You are able to use outside images by copying the image URL from the outside source (i.e. dealers current site) and paste that URL into the Image URL and it will display that exact image in Sitesmith. When the site builds, it will save that image as a new URL so we won’t loose that image. You are copying the image as is, so how ever big that image is from that outside source it will try to use that same size. You may have to resize the image and update the URL with the resized image to make it look proper.

• You can apply an overlay on the image to make it darker or lighter or have no overlay to the image. When you apply the overlay the text color will automatically adjust if there is text overtop of the image.

• Make sure to click Save after you have selected your image or added a image URL from an outside source.

This sections icon allows you take actions with the section and change out the different styles (variants) for that section.

Actions you can take within the variant selector tool:

• Change Variant - allows you to select the way the section looks on the homepage, some sections have more variants than others.

• Insert Section - allows you to insert an section that may not be displayed yet. If you click the insert section and you do not see any available sections, that means you have all available sections displayed on the homepage. When you select an section to be inserted, it will place the section below the section that you selected the icon on. When you insert a section, that section control will show up in the Content Editor (Side Panel) for you to add content.

• Move Up and Move Down - allows you to reposition the section up or down the homepage.

• Remove section - allows you to remove a section from the homepage. If you remove the section it will be removed from the Content Editor (Side Panel) as well.

The spacing icon will allow you to adjust the padding of certain sections. Not all sections have the ability to adjust the padding, so you will need to click the icon to see which sections have the ability to adjust the padding.

You can adjust the Top Padding or the Bottom Padding.

Options are: Extra Small, Small, Medium, and Large.

When to use this? The best scenario is where you see a lot of blank space you want to reduce that blank space as much as possible. You don’t want to totally remove all padding, but you might want to bring things closer together to make them look better.

Sometimes you may need to adjust the top of one section and the bottom of the other to bring two sections closer together.

The Snapshot tool allows you to save multiple layouts and select from the layouts. This helps during the onboarding call with the client to be able to have a few different layouts that allows you to jump back and forth quickly so if the client wants to see a few different layouts we can switch back and forth quickly to show them the selections they are interested in.

Prior to getting on the call with the client you could design multiple options and save them in the snapshot so you can show them the options quickly by loading the different options for them on the call.

Actions you can take within the snapshot tool:

• Save snapshot - you can save the layout how it is by clicking on the icon, within the pop up window you will want to name your snapshot with something that helps you remember the styling of this layout, and click Save.

• Load snapshot - you can load the snapshot that you have saved by selecting the name and click Load.

• You can delete saved snapshots from the load snapshot drop down. There is a red trashcan, click that to delete a saved snapshot.

This allows you to quickly toggle between the homepage, listing page, and detail page without having to click into the Content Editor (Side Panel)

Clicking any section within the site preview will open the Content Editor (Side Panel) to the the section you clicked on so that you can quickly navigate where you need to take an action within the Content Editor. Sometimes the section may not have any action you can take in the Content Editor (Side Panel), but many times there are additional controls within Content Editor (Side Panel).

Hero

This is a multiple select section meaning that you will have some functionality that you can take within the Content Editor (Side Panel) and you can use the variant selection icon to choose which variant you want to display. You will also need to use the Image Selection Tool depending on the variant you select.

Within the Content Editor you can enter the slogan for the hero, if the variant you selected has it available (not all variants have a place for a slogan).

Depending on if you want to use a Text Slogan or a Slogan created via an image, you have the ability to do either or, but you cannot currently do half text, half image.

When using the image selector, you will need to save the image on your computer to be able to upload the image. There is a size limit of 100k

There is an HTML editor option that will allow some additional styling features for text slogans.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Highlighted Product Types

This is a multiple select section meaning that you will have some functionality that you can take within the Content Editor (Side Panel) and you can use the variant selection icon to choose which variant you want to display. You will also need to use the Image Selection Tool depending on the variant you select.

Before starting this step, someone should have already enabled all the necessary product registrations within iCC for this dealers account. The product registrations are what help drive this feature within Sitesmith. Without the registrations, there would be nothing to select in this section.

To get a type to display with in the types bar, you will check the box for the default type available, or click the Add Type button to add a custom type to the bar. It’s best to use the check boxes when available.

When adding a custom type, you will want to select the proper graphic for the type you are adding. In some cases you will want to add a custom type when grouping types such as motorhomes together into one icon. When adding in custom types you will want to make sure you link the page to the correct URL. Here is a list of default product page names to use Standard Pages. If the page is not listed here, follow the same pattern as (/product/type-name/) for an RV type.

Note: You can add in custom non-type icons into the types bar. Maybe the dealer wants to use a type space to display Used RVs as a type or use a space for another graphic such as Shopper Guide. These custom pages do not need to follow the same structure as the types, this icon can link to any page within the website, just make sure you link the page correctly.

You have the ability to select which type of icon graphics are used. More realistic 3rd graphics or silhouette graphics.

You can also display or not display the New and Used links below the type icon. Due note that no matter what icon is there it will apply the new and used links. Notes will have to be taken for any custom work done by the FED team.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Tow Guide CTA

This is a multiple select section meaning that you will have some functionality that you can take within the Content Editor (Side Panel) and you can use the variant selection icon to choose which variant you want to display.

Within the tow guide section you are able to adjust the heading and sub heading text. Currently no other options are available to adjust on this section.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Shop Guide CTA

This is a multiple select section meaning that you will have some functionality that you can take within the Content Editor (Side Panel) and you can use the variant selection icon to choose which variant you want to display.

For the shopper guide, you are able to adjust the heading and sub heading text. Currently no other options are available to adjust on this section.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Lifestyle Links

Within the Lifestyle Links we have 3 defaults that you can select. You also have the ability to add your own lifestyle links by entering in a link and clicking the plus icon, you will also want to add a label to display on the button on the website. The max you are able to display is 3.

You will need to add a Target URL for each selection so the button links to a listing page. You will have to take notes for FED to make sure the listing pages have the proper settings on the listing page to display the units to match the Lifestyle button.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Rotating Banners

You will want to use the Image Selector tool to select the available banners within the image gallery. There is nothing more you can do within the Content Editor for this section.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Shop Your Way

This is a multiple select section meaning that you will have some functionality that you can take within the Content Editor (Side Panel) and you can use the variant selection icon to choose which variant you want to display.

Within the Shop Your Way section you can select up to 4 max services to display on the website. Each service has default text links within the groups that are set based on commonly used groupings for each service.

While some dealers want to customize this more, this section allows us to create the structure for the FED to add custom selections or make custom groupings based on what the client is looking for.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

RV Explore

Within the RV Explore section you are able to adjust the heading, sub heading text, and where the button links to. You also have the ability to select a background image for the section.

You will want to select an image where the focus of the image is more on the right side because of the text box being on the left side.

For any additional work, we will need to involve the design/FED team.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Featured RVs

Currently there is no ability to select a different variant or make any changes within the Content Editor (Side Panel) for this section.

For any changes/additions to this section, we will have to involve the design/FED team.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Highlighted Services

This is a multiple select section meaning that you will have some functionality that you can take within the Content Editor (Side Panel) and you can use the variant selection icon to choose which variant you want to display. You will also need to use the Image Selection Tool depending on the variant you select.

Within the Highlighted Services section we have the ability to select up to 4 total Highlighted services. Whether you select from the default or create custom Highlighted Services we can only display 4.

When creating a custom service, you will need to first type in the name of the service then click the plus icon. You will then need to add a Label to display on the website, add Action Text, and type in the Target URL (Note: When you type in the page name, if you currently don’t have that page created in the site page section, you will need to add the page in the Site Pages section.)

Note: When switching between different card variants (Tall vs Short), you will need to make sure you are refreshing the images within the image selector tool because the size of the images are different between tall card vs short card.

For anything custom, you will have to include the design/FED team to make customizations.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Brand Display

Before starting this step, someone should have already enabled all the necessary brands/models within iCC RV Library for this dealers account. The RV library is what helps drive this feature within Sitesmith. Without the models enabled there would be nothing displayed in this section.

We want to ensure we have all the proper brands/models enabled prior to the call with the client so that they can see and validate that we have enabled all the correct brands.

If a dealer sells many different manufacturers on their lot, we will want to select the first option “Show manufacturer logos with brand listed in dropdowns.”

If a dealer sells one manufacturer we should display the second options “Show all brand logos (without manufacturers)” so it appears like they have more logos vs just showing on manufacturer logo.

It is up to the client what they want to do, but we should not have too many logos or too few logos displaying on the homepage.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Reviews

This is a multiple select section meaning that you will have some functionality that you can take within the Content Editor (Side Panel) and you can use the variant selection icon to choose which variant you want to display. You will also need to use the Image Selection Tool depending on the variant you select.

Within the Reviews section, you have the ability to add static reviews to the homepage. You can add a name, location, and a short review.

You also have the ability to link where the Read More Reviews would go to. You can link it to our default testimonials page or to a 3rd party review page.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.

Welcome Section

This is a multiple select section meaning that you will have some functionality that you can take within the Content Editor (Side Panel) and you can use the variant selection icon to choose which variant you want to display. You will also need to use the Image Selection Tool depending on the variant you select.

Within the Welcome To Section, you will be able to edit the Heading and add the body content.

As always there is a notes area to include additional notes for the design/FED teams.

Be sure to click the “Continue” button after using the tool so that it saves any work done.