Skip to content
Build Process - Front-end [ 1 ]

Build Process - Front-end [ 1 ]

The design portion of a Websites+Marketing OLS build is pretty straight forward, and the green W+M Hub button links cover all the components along with our scope. This page covers resources to reference when working with the W+M front-end setup, theme selection and page sections. The next step in the process on the page "Build Process - Store Setup [ 2 ]" covers the W+M back-end settings, products and services setup. After the front-end and store are good to go, "Build Process - Back-end [ 3 ]" will cover the level of setup needed for our value added offerings to fulfill the requirements of a complete build.
Click through the links on the "W+M Hub" button to see the W+M OLS resources and build process in sequence.

General Inclusions
Starting The Build
Design Build-out

General Inclusions

New Build Scope

As part of the pilot we will configure the following features during the new build process. Please reference the details on the Websites+Marketing Online Store Platform Scope page for design-related info and the Themes, Settings Overview & Page sections 1, 2 and 3 for their or setup related information.

Feature Scope New Build Includes Resources
Products AddedAs part of the plan we will allow up to 100 product SKUs/variants e.g.:
  • customer has 100 products, no variants
  • customer has 50 products with 2 values (t-shirt X in red or green)
  • customer has 20 products with 5 values (t-shirt X in red, green, blue, pink, & purple)
  • customer has 5 products that include 3 options with 10 values
Adding Products
Product Options/Values#of products set up initially will decrease to 5 when including optionsWorking with option value limits
Product Images1 per product, 20 images limitation for new buildx
Online Appointment (Bookings)Can create simple bookings for multiple services
We will set up to 20 services & create specific days/times for: multiple services & multiple employees		Add an online appointment
Product Categories Created1 Category/Productx
Subscription Sign UpSubscribe form section (basic coupon promo option can be enabled if % is provided in sendup)Change my signup form
Ratings & ReviewsRequires account creation with Yotpo, this is auto created using customer emailEnable Yotpo reviews
GEM IntegrationYes, WDS will create the first email upon new build site completion using GoDaddy Email MarketingCreate marketing emails

Resources

Full Platform Scope
Getting Started
W+M OLS Tutorials

Starting the Build

Site Setup

Open the product and get started 

  • Choose a business category
  • Add Business Name
  • Continue

Theme Setup

Step Instructions Detailed Overview in Style Guide
ThemeSelect theme from options on the leftW+M OLS Platform Overview > Theme Choice
ColorSelect color from built-in palette/enter HEX code if provided or to match logo colorW+M OLS Platform Overview > Color & Font Scope > Choosing the Theme Accent Color
FontSelect sitewide font size (if different from theme) / Select font-family (if different from theme)W+M OLS Platform Overview > Color & Font Scope > Choosing the Heading Font Type
Site SettingsThese are found on every theme and act as a central hub to access all important sitewide settingsW+M OLS Platform Overview > Site Settings

Pages

  • Add New Page
  • Add Page Title
  • Choose Navigation (in header/footer)

Page Settings

Sections - The Basics [ 1 ] > Default Includes > Site Pages
Tasks that can be done from the "page settings" area:

  • View Sections
  • Go back to Title and Navigation settings
  • Duplicate Page
  • Delete Page

Shop Page

Shop page is generated automatically in every theme when building out a W+M OLS. You cannot place the actual online store sections in more than one place on a site. If it exists on a shop page already. the section will not be available to place on another page as well. 

Resources

Platform Overview
View All Themes
Set Up My Site
Choose Site Color
Choose Site Font
Add A Page

Design Build-out

Front-end Components

The charts below outline all the components you many encounter when building out the front-end design of a Websites+Marketing Store, and provide you with resources for each.

Component Detailed Overview in Style Guide Basic Rundown
NavigationThe Basics [ 1 ] > Default Includes > NavigationChange the order of the pages in your website's navigation bar / hide or display pages from the nav in header or footer
SectionsThe Basics [ 1 ] > Page Content > SectionsAdd new sections, customize them by renaming them, changing or removing the boilerplate text, and deleting or replacing the photos.

Page Section - Reference Sheet

Page Sections Detailed Overview in Style Guide Basic Rundown
RecommendedxWebsites+Marketing recommended sections for the page
Content The Basics [ 1 ] > Page Content Choose options based on website content (images, text, subheadings)
About The Basics [ 1 ] > Page Content > About LayoutsOffers sections with up to 3 options for callouts
Privacy Policy The Basics [ 1 ] > Page Content > Privacy PolicyAdd a privacy policy
Subscribe The Basics [ 1 ] > Contact & Leads > Subscribe FormsIncludes option for instant coupon for subscribers
Social Icons The Basics [ 1 ] > Contact & Leads > Social Media IconsOnly these 8: Facebook, Twitter, Instagram, Pinterest, LinkedIn, YouTube, and Google+ *If customer has icons that are not included, HTML section can be used in page content (see below)
Contact Us The Basics [ 1 ] > Contact & Leads > Contact LayoutsUsed for Contact page, includes contact information, contact form, and map layouts
Photo GalleryAdvanced [ 2 ] > Multimedia Sections > Image LayoutsIncludes gallery and slideshow options
AudioAdvanced [ 2 ] > Multimedia Sections > Audio LayoutsAudio files must be on SoundCloud only
VideoAdvanced [ 2 ] > Multimedia Sections > Video LayoutsVideo files options are YouTube and Vimeo only
Menus/PricelistsAdvanced [ 2 ] > Added Functionality > Menu / Price List LayoutsModules available for Creating a Menu or Service Pricelist
FilesAdvanced [ 2 ] > Added Functionality > File DownloadsOption for file downloads on the website (virtual products are not possible)
HTMLAdvanced [ 2 ] > Added Functionality > Custom HTMLBest used for customer provided embed codes
Logos & BadgesAdvanced [ 2 ] > Added Functionality > Logos & BadgesDisplay logos of sponsors or affiliates or business badges on a page
CalendarAdvanced [ 2 ] > Added Functionality > CalendarTwo options - Manually entered events in GoCentral or connect to a Google Calendar
BlogAdvanced [ 2 ] > Added Functionality > Blog LayoutsModules available for W+M blog posts
Paypal ButtonsAdvanced [ 2 ] > Advanced Features > PayPal ButtonsDisplay a direct PayPal link for purchase or donations outside of the site
Restaurant ReservationsAdvanced [ 2 ] > Advanced Features > ReservationsReserve table online through OpenTable
Restaurant Online OrderAdvanced [ 2 ] > Advanced Features > Restaurant Online OrdersOnline ordering through a ChowNow account
MLS/IDX Real Estate ListingsAdvanced [ 2 ] > Advanced Features > Real Estate ListingsMust be registered with IDX Broker and have an API key (required)
Zillow ReviewsAdvanced [ 2 ] > Advanced Features > Zillow ReviewsConnect with Zillow sitename or Zillow email address
Featured CategoriesProducts & Services [ 3 ] > Product Categories > Featured Categories SectionOnly one layout option, but two different ways to categorize products within them

*Social Icons Section:
If customer has icons that are not available through module, HTML section can be used in page content.

  • Modify the icons in the code by replacing the < i > tags with different icons from Font Awesome
  • Modify the appearance of the icons by changing the size and color in the CSS between the < style > tags above the HTML
  • Add the correct links to the icons by replacing the # in the < a > tags

Resources

Sections - The Basics [ 1 ]
Sections - Advanced [ 2 ]
Sections - Prod. & Serv. [ 3 ]
View Sections Demo
Scroll To Top