Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 30 Next »

Table Of Contents

Commonly Used Terms

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.

image-20241029-151001.png

Site View Pane

image-20241029-151029.png

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.

image-20241029-151503.png

Element

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)

iCC Dealer Detail Setup

  • Enable registrations

    • By enabling registrations this allow us to display the same Types in Sitesmith to be selected to display on the types bar.

    • We should enable all the basic RV Types in Sitesmith. The more types we have enabled, the easier it will be to add/remove types within Sitesmith. For example, if the dealer currently does not have motorhomes as a RV Type on their website, but in the onboarding call they say

  • Enable brands/models

Access Sitesmith

You will access Sitesmith from iCC. It does not matter what account you are in, you can access Sitesmith from Website > Sitesmith menu item.

Agreement Basics

Agreement Basics is the connection between iCC, CMS, and Sitesmith. This connection allows us to save Sitesmith experiences as we go through the design process, tells Siteforge where to place the site when a user clicks the submit button.

Within the Agreement Basic screen you will

  • Select an Account - This selection connects the account within iCC for the purposes of data, saving, and site building via Siteforge.

    • NOTE: This is a type a head field so you can start typing in the account you are looking for verse using a drop down menu

  • Select a Domain - This selection connects the domain within the account for the purposes of data, saving, and site building via Siteforge.

    • Note: This is a type a head field so you can start typing in the domain you are looking for verse using a drop down menu

  • Select the Package Type - This selection will allow different functionalities to be available within the Sitesmith tool. Depending on which package gets selected will depend on what choices a user will have within the Sitesmith experience.

    • Note: This is based on the agreement that the dealer signed, please be sure to select the correct package at this time, as this will be saved once selected and the continue button has been clicked. Once you have saved a package you cannot change the package selection without restarting

    • Selections

      • Silver (Fewer website elements are available to select)

      • Gold (Both Gold and Platinum have all website element selections available including Silver Package options)

      • Platinum(Both Gold and Platinum have all website element selections available including Silver Package options)

  • Package Content - The goal of this feature is to help enable more functionality in Sitesmith when specific pick options or package details are selected within the sales process. This will allow us to automate some of the setup of features when selected via the package content.

    • Note: This has not been fully built, but tow guide selection is available and does allow the tow guide element to be selected within Sitesmith when checked.

Site Design Process

Before getting started, if the client has a current website, you will want to ensure that website is open on another screen so that you can review their current site and capture details that you need from their current website, and apply it in Sitesmith.

During the Site Design process, you will start by utilizing the Content Editor (Side Panel) to start building out some of the design, but as you get into the look of the site, you will will want to align the elements you will want to use before continuing to use the Content Editor (Side Panel). By following the process you will save your time from added unnecessary content into an element that you may not use.

Below is the recommendation of the process that you should follow when utilizing the Site Design functionality. You will follow this process until you get to the Home Page section. At this point you will stop utilizing the Content Editor until you have completed the design phase within the Site View Pane where you will display the elements needed, add images where necessary, and add background colors before moving on to the the process.

Site Layout

In the Site Layout, we start by selecting some of the basic elements that will be consistent through on all pages throughout the website. First you will select a starter layout that will give you a starting point. With so many elements available on the homepage, rather than displaying all elements as soon as you start a Sitesmith experience, we are providing a starting point so you don’t have to remove so many elements you don’t need.

You will also get to upload the dealer logo, select a header style, select a footer style, add the operating hours and social media icons.

Starter Layout

Goal: Select a layout that will most closely match what site design you would like to complete. You don’t have to stick with this layout, it just gives you a starting point so you don’t have to remove so many elements on the homepage.

 Additional Details

Here we allow you to select a starting layout, because of all the different elements on the homepage, it was getting cumbersome to have to remove multiple elements to get to the layout that you want to start with. This is just a starting point and the layout can be fully customized through out the process.

  • S1 and S2 will be available for a Silver Package dealer

  • S1, S2, G1, and G2 will be available for a Gold Package dealer

  • S1, S2, G1, G2, and P1 will be available for a Platinum Package dealer

Future: This layout selection is the first iteration of a new direction that we will be moving forward with. Where we will have demo sites and layouts for the sales team to present during the sales process and select which layout the client likes best.

Take Action:

  • Select the Layout you want to start with

  • Click Continue

Goal: To capture the dealers logo from their current website and upload it into Sitesmith, this will provide starting colors to the website and display the dealers logo in Sitesmith.

 Additional Details

Be sure that you have the dealers current website open.

On the dealers current website you will want to right click on the dealer logo (PC user) to save the image, and you will save it to a folder on your computer.

Once you have the dealer logo saved. In Sitesmith, you will click on the plus symbol, it will open a folder on your computer to select which image you would like to upload. Select the dealers logo that you saved.

  • Note: The logo size cannot exceed 100k, so you will need to resize the image if it is larger than 100k. This can easily be done with any image tool such as Snagit Editor.

Once you upload the logo, Sitesmith will automatically pull the colors from the dealers logo and apply them to the website and save them in the color selection to adjust a little later in the process.

Take Action:

  • Save the dealers logo on your computer

  • Upload the logo

  • Take any necessary notes for FED

  • Click Continue

Header

Goal: To select a header style that will closely represent what they dealer may have or would want based on the design guide. We want to start with something that matches their current site, and we can always show the client additional header choices within the onboarding meeting if they want to see something different.

 Additional Details

Currently there are 2 selection for the Silver Package dealers and 3 additional selection for Gold and Platinum Package dealers for a total of 5 for the higher package dealers.

  • Logo Top - Where the logo is positions on the top bar

  • Logo Float - Where the logo is position between the two bars

  • Logo Center - Where the logo is positioned in the center of the header

  • Bottom Clear - Where the logo is positioned to float between the two bars, but the navigation bar is transparent to show the hero background image.

  • Full Clear - Where the logo is positioned to float and the full header is transparent to show the hero background image.

Depending on the style, colors, size, and shape of the dealers logo will help determine the best header style to use.

Sometimes the dealers logo may look a little small, that can always be adjusted by the Design/FED team once the site is built. A note can be taken to make adjustments as needed or to add any additional logos, content, or dealer information into the header.

Take Action:

  • Select which header style will best match what the dealer wants for their website

  • Take any necessary notes for FED

  • Click Continue.

Tool Tip: If the dealer has any additional logos, sayings, or dealer information that needs to be included in the header. A note will need to be added for FED to apply those additions to the header.

Design

Goal: To select a footer style that will closely represent what they dealer may have or would want based on the design guide. We want to start with something that matches their current site, and we can always show the client additional footer choices within the onboarding meeting if they want to see something different.

 Additional Details

Currently there are 6 selection of footer styles. All styles will have default content and labels that most dealers will want to include in their footer. We have a Quick Links/Navigation area, Locations display, Hours display, and Social Icon display. Depending on the footer style, other footer layouts will be available

  • No Logo - standard labels - this will only display 1 lot location

  • Logo-l-iso - standard labels with the addition of the logo - this will only display 1 lot location

  • Social Bar 1 - Will have the standard labels with the addition of the logo and a social media bar at the top of the footer - this will only display 1 lot location

  • Social Bar 2 - Will have the standard labels, addition of the logo, a place to display badges/awards/etc., and a social media bar at the top of the footer with different social media icon styles - this will only display 1 lot location

  • Logo-r-sm - Will have the standard labels, smaller logo, and a place for badges/awards/etc. - this will only display 1 lot location

  • Badge Bar - Will have the standard labels, a bar for affiliations/organizations/awards/etc. - this will display multiple locations if the dealer wants multiples listed in the footer.

Take Action:

  • Select which footer style will best match what the dealer wants for their website

  • Take any necessary notes for FED

  • Click Continue.

Tool Tip: If the dealer has any additional logos, badges, locations, or dealer information that needs to be included in the footer. A note will need to be added for FED to apply those additions to the footer.

Goal: Typically you want to align the Quick Links with the main navigation items. Not every case you can get it exactly the same, but we want to get it close to a website user can access links that they find in the navigation bar at the bottom of the site as well.

 Additional Details

Within the Quick Links, we want to ensure that we have a label for the user to click on, and a URL where that text label will navigate to when clicked.

In this control, you have the ability to move and reorder the items by click and holding the double line to the left of the label and dragging it to the spot that you want it to display.

The red trashcan with the x will allow you to remove any label and link

To add any additional Quick Links you can click the Add Quicklink button and a new label and link will display.

Take Action:

  • Align the Quick Links with the main navigation bar, and reorder when necessary

  • Click Continue.

Tool Tip: You don’t need to always add/remove Quick Links, you can just rename the labels and keep the default URL since the URL will align best with our system.

Operating Hours

Goal: Here is where you can add the dealership hours that are typically displayed within the footer and the contact us page.

 Additional Details

This section is a html editor so you can layout the hours by typing in, adding lines so if a dealer wants to separate out sales, service, parts, etc. you have the ability to add groups of hours with spacing between.

If more custom styling or multiple hours need to be added per location, a note will need to be taken for FED to complete.

Take Action:

  • Type in the dealership hours how they currently have them displayed

  • Take any necessary notes for FED

  • Click Continue.

Social Media

Goal: Here is where you can add what social media icons that the dealer as available.

 Additional Details

By checking the box for the social media icon that the dealer wants to display it will automatically add the social media icon in the footer depending on which footer style you selected.

You will need to make sure you copy and paste the dealers social media url so that the icon is going to the correct website.

We have added the primary social media icons that are utilized by most dealers. For any that are not available in Sitesmith, you will need to take a note for the FED team to add the icon and link to the correct page.

Take Action:

  • Check the box for which social media icon the dealer wants to display

  • Copy and paste the URL of their social media page into Sitesmith

  • Take any necessary notes for FED

  • Click Continue.

Pages & Navigation

Sitesmith does more than allow us to design the homepage of the site, it also can help us by creating the secondary pages that the FED team will need to have within the CMS to help them move over the content from the dealers current website to the new website we are developing for them.

We want to first align the navigation to match what the dealer currently has so that we ensure that we have all pages that the dealer has on their current site by aligning the main navigation items and all the drop downs that come from the main navigation items. (Dealer doesn’t have a current site, that is fine, we have a default navigation bar setup to help us drive the conversation during the onboarding call)

Once we have the navigation set how we need it, we will then go into select pages to ensure that every navigation item has a link to the page it should. We have many default pages that are available to be selected, and custom pages can be added to cover those pages we don’t have by default.

Both of these process are extremely important that we take the time to get these right. The navigation bar and moving over content are very big deals to clients. So we want to put them at ease that we have identified the navigation items, created the pages to move over the content, and we will be moving over their content.

Navigation

Goal: Here is where you will ensure that the navigation has all the main navigation items displayed how the dealer currently has it, and that we have added all the proper drop downs. You will want to ensure that you have the navigation bar complete filled out how you need it prior to starting the Site Pages section.

 Additional Details

When starting with the Pages and Navigation section. You will want to make sure your Navigation bar is fully set how you want it to be before moving on to the Site Pages section.

First you will want to start by getting all the base navigation items labeled correctly before working on any drop down menu items. Some base navigation items might not have a drop down, so we want to make sure that the main navigation item has a based URL added. You can reuse any of the base item by renaming the label to what the dealer currently has on their website vs having to add new base items.

In the case where there is a base navigation item that does have a drop down. We do not want to add a URL to the base navigation item, we want to ensure all the pages within the drop down have the correct label and URL linking to the correct page. You will want to add a drop down menu item for the base navigation as well. (Example: If you have Financing as a base navigation item, and it has a drop down for Value My Trade and Consign My RV, you will want to also add a drop down menu item of Financing so the main financing page has a link to it as well since we do not want to link from the base navigation item.)

In the navigation menu, you will always have a standard setup to start, and you will need to adjust by adding/removing menu items.

Actions you will take within Navigation:

  • Labels - this is what displays on thew website for users to click.

  • URL - this is the page that will display when the user clicks a label. You will be able to select from default URLs we already have, or by typing in the page name. Page name structures should always start with a forward slash, and it should have hyphens in between words. (example: /page-name)

  • image-20241105-161003.png - this button will allow you to select a default page from a drop down menu so that you do not have to type in a page name. You should always look for a default page before adding your own custom page.

    • If a standard page is not available, you will need to create a page by typing in the URL field

  • Red Trashcan - will allow you to remove a menu item. If you remove the Base Item it will remove all drop down menu items within it.

  • Add Button - will allow you to add a base item or a drop down item.

image-20241105-162057.png

Take Action:

  • Add the main navigation items and label and order appropriately

  • Add the drop downs items and label, add URL, and order appropriately

  • Take any necessary notes for FED

  • Click Continue.

Site Pages

Goal: Here is where you will ensure that the navigation items you have placed are connect to the correct page so that Siteforge can help create the necessary pages we need for the website. We are going to connect Site Pages with Navigation to ensure that both align.

 Additional Details

In the site pages section, you will ensure that all the menu items in the navigation bar have the correct page associated with it so that Siteforge can create all pages that are in the navigation.

We need to ensure that we resolve the warning message - “Some urls are missing pages”

image-20241105-164004.png

Before we continue we need it to say - “All urls are connected”

image-20241105-164049.png

Actions you will take:

First you will want to open the Nav Connection drop down menu.

image-20241105-162615.png

Nav Connections Drop Down Menu

Actions you will take:

  • Within the “Which of these default pages should be included in the site?” - you will either need to:

    • Check a box for one of the default pages

    • Or Click Add Page - when adding pages, you have to type in the EXACT URL that you typed into the Navigation menu. (example: I added /all-rvs into the navigation, so I need to click Add Page and type in /all-rvs. Once I do that, the red circle x will go away and a green check mark should appear.)

  • Once you have connected all the pages you will get this message image-20241105-164049.png . If you do not see that message you will need to continue to open each menu item to resolve any red circle x icons.

  • When you finally get the confirmation message image-20241105-164049.png you will want to click Continue to save all the work you have done for navigation and site pages.

image-20241105-163103.png

image-20241105-163248.png

image-20241105-163654.png

Take Action:

  • Ensure that all the labels you added in the navigation have a site page connected to them

  • Ensure all menu items have a green check mark and image-20241105-164049.png you have the confirmation message

  • Take any necessary notes for FED

  • Click Continue.

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.

Icon

Details

Action

image-20241031-190411.png

The paint can icon tool will allow you to apply a color to the background of certain elements. Once you have click the paint can icon tool at the top The paint can icon will display on or in the elements 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 element 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.

image-20241105-135702.png

image-20241105-135303.png

The image icon tool will allow you to apply images within certain elements, backgrounds, and banners. Once you have click the image icon tool at the top, the image icon will display on or in the elements 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 element 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 element 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.

image-20241105-135808.png

image-20241105-135340.png

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

Actions you can take within the variant selector tool:

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

  • Insert Section - allows you to insert an element that may not be displayed yet. If you click the insert section and you do not see any available elements, that means you have all available elements displayed on the homepage. When you select an element to be inserted, it will place the element below the element that you selected the icon on. When you insert a element, that element 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 element up or down the homepage.

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

image-20241105-135929.png

image-20241105-135154.png

The padding icon will allow you to adjust the padding of certain elements. Not all elements have the ability to adjust the padding, so you will need to click the icon to see which elements 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 element and the bottom of the other to bring two elements closer together.

image-20241105-151346.png

image-20241031-190245.png

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.

image-20241105-151435.png

image-20241031-190309.png

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

image-20241105-154315.png

Clicking any element within the Site View Pane will open the Content Editor (Side Panel) to the the element you clicked on so that you can quickly navigate where you need to take an action within the Content Editor. Sometimes the element 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).

image-20241029-151029.png

Home Page

This is the list of all available elements on the Homepage, this does not mean we should display all elements, but for the user guide purposes, we are listing all available with the details for each. You will want to align your homepage elements to what the clients current site has or based on preference that the client has mentioned.

Elements

Details

Action

Hero

This is a multiple select element 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.

image-20241105-135340.pngimage-20241105-135303.pngimage-20241105-182117.png

Highlighted Product Types

This is a multiple select element 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 element.

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.

image-20241105-135340.pngimage-20241105-135303.pngimage-20241105-182330.png

image-20241105-195022.png

Tow Guide CTA

This is a multiple select element 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 element you are able to adjust the heading and sub heading text. Currently no other options are available to adjust on this element.

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.

image-20241105-135340.pngimage-20241105-182403.png

image-20241105-195502.png

Shop Guide CTA

This is a multiple select element 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 element.

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.

image-20241105-135340.pngimage-20241105-182440.png

image-20241105-195349.png

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.

image-20241105-182540.png

image-20241105-195605.png

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

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.

image-20241105-135303.pngimage-20241105-182609.png

Shop Your Way

This is a multiple select element 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 element 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 element 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.

image-20241105-135340.pngimage-20241105-182721.png

RV Explore

Within the RV Explore element 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 element.

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.

image-20241105-135303.pngimage-20241105-182743.png

Featured RVs

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

For any changes/additions to this element, 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.

image-20241105-182920.png

Highlighted Services

This is a multiple select element 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 element 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.

image-20241105-135340.pngimage-20241105-135303.pngimage-20241105-182949.png

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

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.

image-20241105-183022.png

Reviews

This is a multiple select element 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 element, 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.

image-20241105-135340.pngimage-20241105-135303.pngimage-20241105-183047.png

Welcome Section

This is a multiple select element 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.

image-20241105-135340.pngimage-20241105-135303.pngimage-20241105-183112.png

Theme

Colors

Goal: To align the dealers colors with what they currently have or unless they have requested a color change within their onboarding guide. We can save multiple theme colors prior to the onboarding meeting to show them a few different color options without having to reselect each color.

 Additional Details

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.

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

image-20241107-152132.png

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.

image-20241107-151548.png

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.

image-20241107-151822.png

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.

image-20241107-151924.png

Take Action:

  • Align the colors as close as possible to what meets the clients needs.

  • Take notes regarding any customizations that you are not able to do within the tool

  • Click Continue.

Fonts

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.

 Additional Details

Currently you are able to select the headline and body font that is used to display throughout the homepage and secondary pages.

Take Action:

  • Select headline font and body font.

  • Take notes regarding any customizations that you are not able to do within the tool

  • Click Continue.

Listing Page

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.

 Additional Details

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.

Take Action:

  • Update pricing labels correctly

  • Enabled get lowest price button if the dealer wishes

  • Take notes for the FED team when needed

  • Click Continue.

Detail Page

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.

 Additional Details

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.

Take Action:

  • Enable which CTAs the dealer wants to display

  • Take notes for the FED team when needed

  • Click Continue and this will save the full experience one more time and take you to the Review screen.

Review Screen

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.

 Additional Details

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.

image-20241107-160532.png

Talking points with the client during this time:

  • We have taken many notes during the call today, those notes will be going to our front end development team to help us make the style changes that we discussed.

  • By clicking the submit button today, that will allow us to take the next step by having our system build your website that we created today so that the front end development team can move over all your content from your current website and complete the style updates we took notes on during the call.

  • We understand that you would like to review this a little more outside this call, here is the preview link, let’s setup a time to call in 2 days to capture any other feedback so we can move forward with your website build.

Take Action:

  • Click Submit for Siteforge to build the website for us.

  • No labels