Module 1: E-COMMERCE TECHNICAL OVERVIEW
Module 2: DEVELOPMENT ENVIRONMENT
Module 3: BRANDING THE E-COMMERCE SITE
Module 4: ECOMMERCE WEB PARTS
Module 5: SEARCH CONFIGURATION AND CUSTOMIZATION
Module 6: COMMERCE RUNTIME SERVICES
Module 7: TESTING, DEPLOYMENT AND VERSIONING OF ECOMMERCE SITE
Lesson 1: Customize the Visual Design of the E-Commerce Site
Customize the Visual Design of the E-Commerce Site
Customize the Visual Design of the E-Commerce Site : Typically, all customers want to apply their corporate brand to their e-commerce site. This lesson will explain the details of the components that are available in the e-commerce site that can be used to change the visual design of the e-commerce site.
The following list describes five types of files that you can modify to change the elements on individual pages and customize the visual design of the starter store.
|Master Pages||Master pages define the shared framing elements such as the header and footer for all the pages in the site.
|Page Layouts||Page layouts contain the page contents and its layout. Each page layout uses a specific master page and can act as a base page for multiple instances of the page layout. Each instance has a different page name. In the starter store, each page has a corresponding page layout. For example, Welcome.aspx has a corresponding file, WelcomeLayout.aspx.
|Cascading Style Sheets||CSS files provide the page layouts with page content styling and formatting.
|Display Templates||Display templates are templates used in Web Parts that use search technology to show the results of a query that is made to the search index. Display templates control the managed properties that are shown in the search results, and how they appear in the Web Part. Each display template is made of two files—an HTML version of the display template that you can edit in your HTML editor and a file that SharePoint uses.
Explain how to change the visual design of the starter e-commerce site.
How to Customize Master Pages
This topic shows how to customize a master page by updating the Welcome page of the starter store. Log on to the development environment by using Administrator credentials. Follow these steps.
- Open a web browser and browse to the Welcome page for the starter store. Typically, the URL for the Welcome page resembles the following: http://<your-server-name>:40002/sites/RetailPublishingPortal
- Open a web browser on a computer where you are logged on by using the administrative account for SharePoint
- Browse to the Site Settings page of the store. Use port 40003 and sign in with administrative credentials. The linkto the Site Settings page is typically found at a URL that resembles the following:
- http://<computer name>:40003/sites/RetailPublishingPortal/_layouts/15/settings.aspx
- Click Master pages and page layouts in Web Designer Galleries to view a list of files in the Master Page Gallery page.
- Right-click a file that you want to edit, such as master, and then click Check Out.
- Right-click the file and then click Download a Copy.
- Edit the file by using Visual Studio or another editor. For example, in the following code from master, you can change the logo file that is displayed on each page. The file is named logo_Contoso_main.png. You can edit that file or replace the file name by using the name of a file that contains a graphic of similar size to display the company logo. The following code shows the path and file name of the logo in the Storefront.master file:
- To upload the file and add your changes to the site, click Upload Document on the Files
- Refresh the Welcome page in the initial browser session to view your changes.