...
Table Of Contents
...
Table Of Contents
| Table of Contents | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Keyword | Description |
|---|---|
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 View Pane.  |
Site View Pane |
|
Site View Pane Tool Bar | With this tool bar you can update colors, change images, move elements, select variables, updating padding, take a snapshot to save the layout, and navigate between the homepage, listing page, and detail page.  |
Element | Variable |
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. | Layout |
iCC Setup
iCC Account Creation
First we will need to ensure that we have everything setup within iCC before we can start a Sitesmith experience.
...
Are the sections that display on the homepage of the website. You cannot use an element more than once on the homepage and you don’t have to use all elements on a website. You want to find the best combination of elements that makes the homepage look good and flow properly. | |
Variant | Variant is a style options within a specific element. Clients have a choice of what the element looks like. Some elements 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 element. |
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. |
iCC Setup
iCC Account Creation
First we will need to ensure that we have everything setup within iCC before we can start a Sitesmith experience.
The client account has been added
The client lot(s) have all been added
The dev domain has been added into the domain screen and the website type is set to development for a development site and set to storefront when the site is live.
The account node has been added into the CMS (DO NOT add a domain within the account node, Siteforge will do that for us)
...
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Take Action:
|
...
| Warning |
|---|
STOP! - Here is where you will pause from working with the Content Editor (Side Panel) and start configuring the layout of the homepage in the Site View Pane by utilizing the Site View Pane tool bar. You want to get all the elements you want to display on the homepage added prior to going back to the Content Editor (Side Panel). As you select/remove elements on the homepage, the Content Editor (Side Panel) will automatically adjust to match the elements that you have selected to be on the homepage. |
Site View Pane Tool Bar
First you will need to understand how to use the tool bar. Here are the icons or actions that you can take within the Site View Pane and what they allow you to do.
...
| Expand | ||
|---|---|---|
| ||
By default, the colors will be selected based on the dealers logo that was uploaded earlier in the process. This is just a starting point as an aid, but all the colors can be adjusted within this section to align with what the dealer will want. Within this tool, there is a built it ADA compliance checker to help users know if the color choices for background and text color are ADA compliant. You will see a warning message that says “Background and text contrast is not ADA compliant”. Sometimes you are able to make the background color darker to help resolve, but sometimes you might need to change the text color to something darker if the background is too lightYou have 4 colors that can be independently selected, you can add the color by hex code (#ffff) or you can click on the color to open the color picker option. Within the color picker option you have the ability to pick the exact color you need using the color tool bar at the bottom.
If we are trying to mimic the current dealers website, we can pull the exact hex color code from the site using the inspect tool on the dealers website. We can hover over the color we want, and look for the hex color code in the site code. Within this tool, there is a built it ADA compliance checker to help users know if the color choices for background and text color are ADA compliant. You will see a warning message that says “Background and text contrast is not ADA compliant”. Sometimes you are able to make the background color darker to help resolve, but sometimes you might need to change the text color to something darker if the background is too light. You add up to 4 colors within the theme, but with the paint can tool icon, you can select some default colors as well to add to the design of the site. To help drive the conversation with the client during an onboarding call, we have provided the ability to save color themes. So if the client had mentioned in the sales call or in the onboarding guide some other colors they might be interested in using. We have the ability to save color themes so we can quickly load the theme for the client to see some variations during on the onboarding call.  You can save multiple color themes prior to the onboarding call with the client so that you can easily flip between color themes. Be sure to name the theme in a way you know what the theme is, don’t just name it theme-1, theme-2, name it something that identifies what the them is about so you know which one to select when you want to flip between themes. Once you have saved the theme you can edit the color theme you saved or you can save a new one.
When you want to load a saved theme you will click on the Load theme and select the theme from the drop down that you want to display.
|
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Take Action:
|
Fonts
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Goal: To select a font that would be best for the dealers website or aligns with the font that they currently have on their website. |
| Expand | ||
|---|---|---|
| ||
Currently you are able to select the headline and body font that is used to display throughout the homepage and secondary pages. |
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Take Action:
|
Listing Page
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Goal: Typically we want to use our standard listing page template as much as possible but dealers have some flexibility. We want to try to use what is available and update what is able to be easily changed. |
| Expand | ||
|---|---|---|
| ||
First we want to make sure that we align the pricing labels to what the dealer wants to use. Typically we look at the dealers current website and align the field names to what they are using as a starting point and ask them if they want to do something different during the onboarding call. Whatever field names are added on the listing page, it will copy those names and display that on the detail page as well. We want to ensure that the fields are consistently named on both pages so a dealer cannot choose different field names for listing and detail pages as that is not best practice. Here we can also enable the Get Lowest Price button if the dealer wishes to use that feature and update the button label to what they want it to say. This will be in sync with the detail page as well, if you enable it here, it will be enabled on the detail page as well. For anything custom or additions, we will need to take notes for the FED to make any additions beyond what is available in the tool. |
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Take Action:
|
Detail Page
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Goal: Typically we want to use our standard detail page template as much as possible but dealers have some flexibility. We want to try to use what is available and update what is able to be easily changed. |
| Expand | ||
|---|---|---|
| ||
The pricing labels should already be aligned with what you added to the listing page, if you change any label names on the detail page it will change the on the listing page as well. Both are in sync with each other as that is the best practice. Here we can also enable the Get Lowest Price button if the dealer wishes to use that feature and update the button label to what they want it to say. This will be in sync with the listing page as well. You will have the ability to enable 3 more CTA buttons that link to our unit forms. If the dealer wants to have different button labels for these, FED will have to make those changes. For anything custom or additions, we will need to take notes for the FED to make any additions beyond what is available in the tool. |
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Take Action:
|
...
Review Screen
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Goal: Once we have completed the design process, the Review Screen allows us to take one more walk through of the site with the client. The goal is to be able to click the submit button after the call to have Siteforge build the site. |
| Expand | ||
|---|---|---|
| ||
Here is the time to review the home page, listing page, and detail page one last time with the client to get their approval to build the website. We can use the Home | Listing | Detail tabs in the upper right to review each one to get them to give the final approval. We do want to strive to get approval at the end of every call, but we know that is not always possible. We have a Get Preview Link that will allow you to capture the URL to send to the client if they wish to review anything outside the call before giving their final approval. That preview link will only be available for 7 days so the dealer cannot spend weeks review as we want them to give their approval, so that we can have FED start working on any feedback from the notes and start moving over pages.  Talking points with the client during this time:
|
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Take Action:
|