Editor's Guide: CMS is a content management system. Content management can solve the collection, management, utilization, transmission and value-added of various unstructured or semi-structured digital resources, and can be organically integrated into the business intelligence environment of structured data. This article is to share the "cosmetics" - CMS of e-commerce platform.
If the user end is the "front door" of the e-commerce platform, CMS is the "cosmetics" to decorate the front door. Having a good CMS management system is a qualitative improvement for page display and even interaction. CMS is not only a set of simple tools, but also a beacon to express operational demands and guidance.
The full name of CMS system is Content Management System, which means Content Management System in Chinese. It is mainly used by operators to dynamically configure the page information visible to users according to business needs. The configured information can display goods in different forms and contents according to the requirements of operators.
It should be noted that the main core function of CMS is to dynamically configure pages, but not all platform pages can be configured by CMS. The more complex the business logic is, the more difficult it is to use CMS for configuration. Most of these pages need to be created and processed separately, such as shopping cart and settlement pages. However, most of the pages with complex and changeable presentation methods but less business logic are configured through CMS, such as home page, special promotion page and other similar product collection pages.
1、 Page structure breakdown
The reason why CMS can dynamically configure goods for operation is that it has broken down all elements of the page, and each part of the broken down part can be managed and configured independently. After that, CMS will assemble and integrate all the elements to form the various page contents we see. Let's use a picture to see the core principles and elements of page composition. As shown in the figure:
In a word, it is to render various components according to the specified style, fill in the corresponding commodity data, and assemble and display them according to the specified layout. So it may be more abstract. Let's take a specific example to see what element contents are.
From the figure below, we can see that each floor is displayed in a certain arrangement, which is called layout or template. In general, each line can be called a floor, and the layout of the entire page is composed of multiple floors. Each floor can contain a combination of several components. Considering the aesthetic problem, the height of the same floor is generally the same, and the components used also need to be highly consistent. After determining the component type, you need to fill the data into the component. Data is also called material from different channels and systems. It is merged according to the requirements of components and finally becomes the page content that users see.
According to the different page properties, the page can be divided into home page and special page.
In addition to the basic floor, the home page also includes the head focus area. The head focus area mainly stores some core content and navigation functions. It includes search area, navigation area and focus area. The structure is as follows:
Search area: you can search and locate commodities, which is usually placed at the top. General content will also be placed in this area, such as website logo, login information, etc. Navigation area: mainly for category navigation, responsible for traffic diversion and guidance. Focus area: because it is in the middle of the first screen, it is the burst area of traffic. Generally, large advertisements and main products will be placed. Floor: general commodity storage area, each floor generally contains different classified commodities according to category. Others: Considering the large amount of content on the home page, general e-commerce platforms will add a floating floor for direct elevator on the PC side for users to directly locate the specific floor to view the goods. The mobile end does not.
It should be noted that due to the size of the mobile phone on the mobile terminal, there are generally no multiple components on the same layer, but one component on one layer. In comparison, the layout and combination of the PC end are more complex, and the content display is more abundant. The structure of the home page is mainly composed of these four parts, but the matching will also depend on the platform. For example, some mobile terminals will have some promotion areas on the floor. In theory, this also belongs to the floor, but the form and content have been further extended.
The topic page focuses more on commodity aggregation of a certain dimension (such as brand, category, merchant, etc.). The core appeal of the topic page is to accelerate and improve the purchase conversion rate of users. The page emphasizes pop points and attracts eyeballs, so the structure is simpler. It is mainly divided into three parts: head map, coupon area and commodity display floor. The specific structure is as follows:
Head map area: it is responsible for placing the head map of the theme, which is used to highlight the theme concept and increase the page atmosphere. Coupon collecting area: an optional area. Generally, a coupon collecting area will be placed on the special promotion page to stimulate consumption. Floor: The floor is also called the commodity display area, which is used to display different types of commodities. Sometimes, navigation bars can also be added to distinguish and locate specific floors when there are many products on the topic page, so navigation areas are not separated here.
2、 CMS structure disassembly
In the previous chapter, we have explained the composition elements of the page. Next, we will look at the specific contents of all the elements.
First, let's take a look at the concept of style. Style refers to the output of all paragraphs, spacing and even font settings in a standard rule. The same style rules are used for layout when the page is loaded. At present, the main style of web pages is to complete layout through DIV+CSS. The specific syntax will not be detailed here, but we will mainly look at some spatial definitions for layout. As shown below:
Border: refers to the visible boundary of the component or area. The border can be displayed or not. Visual boundaries are distinguished by borders. Outer margin: the blank distance to be kept outside the border of the component or area. Inner margin: the blank distance between the border of the component or area and the element. Dimension (height, width): refers to the area occupied by the element part in the component or area. The face position is height X width. Element area: refers to the area where we can hold content. All image, text, link and other content data are displayed in this area.
The beauty of layout is achieved by adjusting these space style attributes. Adjust the outer margin and inner margin according to the situation to ensure visual rationality.
Of course, in terms of style, in addition to the content of control layout, there are many other style syntax, such as font, floating layer, coloring, etc. Loading styles on the page is also called style rendering. The beauty and tidiness of the page are mainly expressed by styles. The unified style definition of a website or APP can also be the design specification of the platform.
The rendering of styles can not be separated from its carrier, that is, components. The concept of component is widely used in e-commerce platforms, and different components display different product information and effects. The core content of components is pictures plus words. After refining, we can understand the basic elements of components.
Special information: general advertising pictures and special titles. The size of the picture needs to be specified according to the size of the component. Considering the time and traffic of image loading, the size and resolution of images are generally limited through CMS. At the same time, set the default base map for pictures of different sizes (that is, the content of the picture displayed by default when the picture cannot be loaded, usually using the company logo or mascot as the base map), to avoid the problem of blank pages when loading too slowly or lazily. Product information: It mainly refers to the display information related to the product, including product pictures, prices, inventory, color product names or product titles. In theory, the title and name of the product are one piece of information. However, considering the large number of products on the e-commerce platform, in order to increase the exposure rate during the search, some promotional information or adjectives are usually added to the name, which forms the product title. The commodity title and commodity name are independent. When displaying, you can determine whether the commodity title field is needed according to the situation. Text description: A small amount of text description will be displayed in some components for illustration. Link: The product or special information in the component can be clicked to jump to the product details or special page to purchase. The method of jump is mainly realized through the link generated by configuring goods in CMS. Display form and time: the display type of components and the display time window. The display type will be introduced in detail later. The time window period is mainly the time interval displayed by the CMS configuration component content, which mainly acts on time limited components. The component is not displayed after timeout.
The difference between components mainly comes from the layout arrangement of elements in components. We also explained above that the core elements of components are mainly graphics and text plus the number of elements. The layout arrangement is also based on the mixed arrangement of images and texts, which can be classified by location as follows:
Left and right layout of graphics and texts; Graphic and text layout; Image and text are nested up and down (that is, the image is the base image, and the text is a floating layer); Large picture advertisement (large picture leaflet, generally used for headlines or core booths); Image combination (multiple image displays represent different content portals, generally used for classification portals or aggregation page portals); Irregular layout of images and texts (i.e. mixed arrangement of large and small images); Special components (components used for special functions, such as the category entry of the home page or the banner broadcast, are mostly customized).
For example, the common commodity list on the mobile end is a graphic layout with two SKUs per line. The various promotion modules and classification entrances on the home page are often combined with pictures to highlight the visual impact. As shown in the figure:
Here we will talk about special components separately. Special components are mostly used for operations for special purposes. The layout is generally displayed according to rules and functions, and most of them are not configured by the background CMS.
Search component (configure search keywords); Banner carousel map (carousel pictures, links); Classification navigation (directly displayed by classification basic data); Personal center; Breadcrumb navigation
After determining the layout and presentation structure, let's take a look at what we need to pay attention to for the specific presentation content data. The elements of various components mentioned above are generally uploaded and set by operators through CMS. Now more and more e-commerce platforms are promoting the concept of "thousands of stores and thousands of faces", so in addition to the components of the promotion module, most of the other basic data will also provide personalized changes through the commodity list, search, recommendation and other systems. The commodity list configured in CMS should also dynamically display commodity data according to the user's information.
Finally, we need to pay attention to the buried points of modules for data collection. Data burial points will not be detailed in this chapter, but will be described in the BI system later.
3、 CMS release process
The basic publishing process of CMS is basically the same as the filling process of pages. As shown in the figure above:
Select Layout: select the order of component placement on each layer of the page. Select components with different display methods according to the operational requirements. Fill in the content: fill in commodity information or graphic links according to the type of components. Information review: review products and pictures to avoid affecting the layout. Publish to go online: approved pages can be published to go online or scheduled to go online.
4、 Summary
The CMS system structure is not complex, and there are even many third-party mature plug-in tools in the market at present. But for a mature e-commerce platform, a good CMS can provide the best user experience for promotion, shopping guide and other marketing to the greatest extent.
#Columnist#
Gao Hui, WeChat official account: products are always high, and everyone is a columnist of product managers. More than 10 years of IT experience, Internet veteran. He has many years of experience in e-commerce companies, has participated in e-commerce projects in B2B/B2C/O2O and other directions, and is familiar with the full process product line of e-commerce.
This article was originally published by everyone who is a product manager. Reproduction without permission is prohibited.
The picture is from Unsplash, based on CC0 protocol
