The decoration operation of each page is exactly the same. Here we take the decoration of the "shop homepage" as an example to illustrate.
Principles to be followed in page decoration:
First add the layout-then add the module in the layout-then set the content of the module-and finally publish ***5 links.
1, page introduction and noun explanation
Layout: it refers to dividing the page into bars with different structures, and all the decorative contents of the page must be placed in the layout; Each page can have multiple layouts.
At present, the system provides 12 layouts for selection and combination.
Special instructions:
There will be a banner layout at the top of each page (no need to delete or move), and the modules placed in this layout will be automatically displayed on all pages of the store.
It is suggested that only store signs, in-store navigation and main promotional banners should be placed in this layout; If you only want to display the content on the current page, please manually add a new layout before adding the module. Do not use the default layout.
Step 2 add a layout
2. 1 List of available layouts Click the Add Layout button in the upper left corner of the decoration page to open the following selector:
A * * * has 12 layouts to choose from.
2.2 Instructions for use
After clicking Add, the layout will be displayed at the bottom of the page, and it needs to be moved up manually if necessary.
The added visual page shows "Banner Layout (990)":
When the mouse moves to the layout area, the name, size and operation of the layout will appear, as shown in the above figure:
Noun interpretation
Banner (990): is the name of the layout, indicating that the layout is a banner layout with a width of 990px.
Red cross: indicates the operation of deleting layout. When you delete a layout, its contents will also be deleted and cannot be restored. So be careful.
Green arrow: indicates that the layout can be moved up and down.
By repeating the above operations, we can add a variety of layouts in different formats to the current webpage according to the design purpose, such as adding seven layouts to a page, as shown in the following figure:
Precautions:
After the layout is added, it is displayed as a dashed box, and each line of the dashed box is an independent layout. The left and right layout is selected in the above picture, which is often used to classify on the left and recommend goods on the right.
You can choose to use 1 or more layouts according to your own design ideas; It is recommended that the number of layouts used should not exceed 10.
3. Template introduction
Choosing the layout is equivalent to setting the outline and framework for the decoration, and then we will put the content into the framework.
Noun interpretation
Function module: System functions that provide some special effects are called function modules.
At present, the system has five functional modules: *** 15.
List of available modules
In the lower left corner of any layout, there is an operation button named "Add Module", and the following figure will pop up:
You can see the directory and name of the module from the above figure.
The above picture shows the "basic module of the store", and there are four functional modules under this directory:
Pagination display of goods: If you have m goods and set 20 per page, there will be M/20 pagination. Click the page number directly to view the commodity list on the corresponding page; The goods on each page can be sorted by sales volume, price and favorable comments.
By default, SKUs are sorted from late to early, and you can adjust the default sorting by changing the template.
Commodity Category: This module is used to display the commodity categories in the store.
In-store search: This module is an in-store search box, and you can place it in a suitable location according to the design requirements.
In-store search results: As the name implies, it is used to display search results. This module is preset in the "in-store search results page" by default. Please do not delete it unless you have special requirements.
The second directory is as follows:
As can be seen from the above figure, there are two modules in this directory:
Sales ranking: used to display the sales list of goods in the store. The default is pre 10.
Product recommendation: This module is used most frequently, such as "best seller", "manager recommendation", "key recommendation" and so on.
Brand group: only applicable to third-party sellers. Merchants can enter the products participating in brand group purchase through SKU ID in the "Settings" of this module.
The third directory is the "Store Marketing" module, as shown in the following figure:
As can be seen from the above figure, the directory * * * has four modules:
Custom content area: also known as "HTML editor", it is also one of the most commonly used modules in decoration shops. At present, custom content can upload pictures and write codes. If you know something about dreamweaver, html and CSS DIV, using this module can make your decoration more dazzling.
Navigation: It's easy to understand. Just enter a keyword and configure a link URL.
Renning carousel: realize the carousel effect of html clips by editing the html clips and background colors that need carousel!
Next, look at the fourth directory "Company Related". The screenshot is as follows:
As can be seen from the above figure, the directory contains three modules:
Shop profile: a module to show the content of brand introduction.
Store announcement: a module that displays store announcement information.
Shop sign module: a module that displays the contents of shop signs.
Next, look at the fifth directory "Company Related". The screenshot is as follows:
As can be seen from the above figure, this directory contains 1 modules.
Matching details: display the products matched in the matching purchase, enter the matching id in "Settings" and put in the matching information.
When decorating, you can add any one or more of the above-mentioned 15 modules according to the design, and the same module can be used multiple times on one page.
4. Add a module
4. 1. Add the module of "page display goods". 4. 1. 1 Add operation flow.
Select the layout of the module to be added, for example:
Click the Add Module button, find the target module in turn, and then click Place.
After placing the module, you can modify the module and improve the content as follows:
4. 1.2 Settings
Click the settings of the module, and the following operation panel will pop up:
As shown above, skin operation is selected by default.
4. 1.3 skin
Noun interpretation
Skin: used to beautify the border and periphery of the module, with detailed functions.
Description:
Skin selection: 2 sets of skin are preset in the system, which can be quickly selected and used.
Title bar: used to set the operation of skin in the title area of the module.
Content area: used to set the operation of the skin in the content area of the module.
Bottom bar: used to set the skin operation in the lowest area of the module.
4. 1.4 template
Each module system has preset 1 or above templates, and the display appearance of modules can be changed instantly by changing the templates:
Description:
Templates * * * are divided into recently used, my creation and system templates, which have the following meanings respectively:
Recently used: recently used templates are put in it, so you can quickly select them without looking for them.
My creation: the template you created is put in it.
System templates: templates provided by official or third-party developers.
4. 1.5 label
Noun interpretation
Tab: refers to the function of adding hyperlinks, which are displayed side by side with the module title. Tabs are used as follows:
Instructions for use:
Enter "hyperlink text" and "URL" as shown above, then click Add to add more, finally click Batch Update, and finally remember to click Save. After the page is published, you can see the effect, and then click Refresh to see the effect.
4.2 add "commodity category" module
4.2. 1 Add operation flow
Select the layout of the module you want to add, and then click the Add Module button:
Select the "Commodity Category" module and click "Place":
The display after placement is as follows:
Click the settings behind the module name to improve the module content and change the display effect.
set up
Click Settings to display the following:
Skin is selected by default.
skin
Same as 4. 1.3.
template
Same as 4. 1.4
4.2.5 tab
Same as 4. 1.5.
4.3 Add "in-store search" module
4.3. 1 Add operation flow
Select the layout of the module you want to add, and then click Add Module in the lower left corner. Examples are as follows:
After clicking Add Module, find the "in-store search" module in the pop-up operation panel, and click Upload:
The default display after placement is as follows:
As can be seen from the above figure, this module is located under "Paging Display of Commodities".
Noun interpretation
Drag and Move Template: Move the mouse to the module and press the left button. Without releasing the left button, move the mouse at the same time to move the module to a new position, for example, exchange the position up and down.
At this time, use the mouse to select "in-store search module", press the left button and drag the mouse up. When moving to the target location, release the left mouse button, and the template can be moved to the top (similarly, it can also be moved down, across layouts, etc. ), as follows:
Release the mouse:
You can move the module up and down. Of course, the movement of modules is not limited to layouts, but also can move back and forth between layouts.
Click the settings after the module name to modify the content.
set up
As shown above, skin is selected by default.
deploy
Noun interpretation
Configure default keywords: You can set a search term, which will be displayed in the search box by default.
Configure popular recommended words: You can set 3 recommended words, which is convenient for users to search directly without manual input.
Price screening: After opening, users can search for goods in your store according to N yuan and only M yuan.
skin
Operation is the same as 4. 1.3.
template
Operation is the same as 4. 1.4.
At present, two templates are preset in the system, and the screenshots are as follows:
4.3.6 tab
Operation is the same as 4. 1.5.
4.4 Add "in-store search results" module
4.4. 1 Add operation flow
The in-store search results module is preset on the in-store search results page by default. Please don't delete it unless you have special needs.
The screenshot of the preset display position of this module is as follows:
Click on the page decoration to display as follows:
When the user clicks the search button and displays the search results of the module, if the module is deleted, the search results will not be displayed. Please be careful not to delete or move the module without confirmation.
Of course, you can also set modules, for example, click Settings after the module name in the above figure.
set up
The default display is as follows:
As shown above, skin is selected by default.
skin
Operation is the same as 4. 1.3.
template
Operation is the same as 4. 1.4.
4.4.5 tab
Operation is the same as 4. 1.5.
4.5 add "sales ranking" module
4.5. 1 Add operation flow
Select the layout of the sales ranking module to be added, for example:
Click Add Module, find the "Sales Ranking" module in the open operation panel, and click Place.
After placing the module, the default display effect is as follows:
Click Settings to configure module content.
set up
Click Settings to open the operation panel. The default is "skin".
skin
Operation is the same as 4. 1.3.
template
Operation is the same as 4. 1.4.
Tab
Operation is the same as 4. 1.5.
4.6 add "commodity recommendation" module
4.6. 1 Add operation flow
Select the layout of the module to be added, for example:
Then click Add Module, find the "Product Recommendation" module in the pop-up operation panel, and click Upload:
After placing the module, the default display effect is as follows:
Click on the settings behind the module name to supplement the content.
set up
By default, click Settings to open the configuration.
deploy
Click Settings to open the following operation panel:
Noun interpretation
ID entry: the operation of recommending goods by entering the SKU of a batch of goods.
Screening entry: it refers to the operation of entering commodity SKUs in batches by 1, 2 and 3 to recommend commodities.
1) ID entry:
How to treat SKU of goods? Please refer to appendix 1: How to view the SKU of goods.
2) filter the input goods:
Enter the product and click Save to complete the product recommendation. The goods are displayed as follows:
At this time, we can click the settings behind the module name to change the skin.
skin
Click Settings after the module name in turn, and select Skin in the open operation panel to set the skin.
Operation is the same as 4. 1.3.
template
Click Settings after the module name in turn, and select Template in the open operation panel to set the template.
Operation is the same as 4. 1.4.
This module is one of the most used modules when decorating shops, and there are a large number of templates at present. The screenshot is as follows:
Tab
Click Settings after the module name in turn, and select the tab Settings Skin in the open operation panel.
Operation is the same as 4. 1.5.
4.7 Add "Navigation" module
4.7. 1 Add operation flow
Select the layout of the navigation module to be added, for example, select a banner as the navigation module:
Click the Add Template button to open the add module operation panel, find the Navigation module, and click Place:
After placement, the default display is as follows. Click the settings after the name to improve the contents of the navigation module:
set up
Click the Settings button to pop up the following operation panel:
Configuration actions are turned on by default.
deploy
Noun interpretation
Navigation Name: refers to the text to be hyperlinked.
Link address: refers to the website opened after clicking the text.
Click Save after adding to see the effect.
skin
Operation is the same as 4. 1.3.
template
Operation is the same as 4. 1.4.
4.7.6 tab
Operation is the same as 4. 1.5.
4.8 Add "Custom Content Area" module
4.8. 1 Add operation flow
Select the layout that will be used to add modules, click the Add Template button in the lower left corner of the layout, find "Custom Content Area" in the module selection panel that opens, and then click Place.
When placed, it will appear as follows. Click Settings to improve the content:
set up
Click Settings to open the configuration content area by default, commonly known as "HTML Editor".
deploy
Brief introduction to the function of custom content area. Custom content supports the use of:
1) HTML code (only the code in the body tag is supported, not the body).
2) Part of CSS code: CSS code with general effect can also be used.
3) Script code: common javaccript code.
4) js library js code built into the system.
If you write css code, please add it. Users are placed in front of CSS code to avoid conflicts with the default style of the system.
skin
Operation is the same as 4. 1.3.
template
Operation is the same as 4. 1.4.
Because the carousel module can be used to do banner, navigation, activity portal, key recommendation and many other functions, the templates of this module are divided into several categories according to the purpose and destination, and the screenshots are as follows:
Can be flexibly combined according to specific use purposes.
Tab
Operation is the same as 4. 1.5.
4.9 Add "carousel map" module
4.9. 1 Add operation flow
Select layout and add carousel template, usually using carousel to make banner, the first picture, etc. , so generally choose the layout located in the upper middle position of the page:
Click the Add Module button to locate the carousel module, and then click Place:
After the module is placed, the default display effect is as follows. Click Settings to modify the contents:
set up
Click the Settings button to open the operation panel and select the configuration operation by default.
deploy
Description:
1) Click and select an image to upload the carousel display.
2) Title: Enter the title of each picture.
3) Links: Enter the URL of each picture link, and be careful that it must be the URL of JD.COM.
Click Save after the operation, and you can set up up to 8 carousel pictures.
4.9.4 Skin
Operation is the same as 4. 1.3.
template
Operation is the same as 4. 1.4.
4.9.6 tab
Operation is the same as 4. 1.5.
4. 10 Add "Store Profile" module.
4. 10. 1 Add operation flow
Select the layout of the store gradient module to be added, and then click the Add Module button in the lower left corner. By default, this module is preset in the Store Profile Page. Please do not delete or move it unless you have special needs.
Click Settings to manage the beautification module.
4. 10.2 Settings
Description: The introduction of this module is in the supplier background-My Store-Store Decoration Settings-Brand Profile:
4. 10.3 skin
Operation is the same as 4. 1.3.
4. 10.4 template
Operation is the same as 4. 1.4.
4. 10.5 label
Operation is the same as 4. 1.5.
4. 1 1 Add the "Store Announcement" module.
4. 1 1. 1 Add operation flow
The store announcement module is preset in the lower left corner of the store homepage by default. Please don't delete it unless you have special needs.
4. 1 1.2 Settings
The content of this module is maintained in "Supplier Backstage"-My Store-Announcement Poster Management-Announcement Management.
Click the settings in this module to directly locate the skin operation.
4. 1 1.3 skin
Operation is the same as 4. 1.3.
4. 1 1.4 template
Operation is the same as 4. 1.4.
4. 1 1.5 label
Operation is the same as 4. 1.5.
4. 12 Add the module of "Shop Signboard".
4. 12. 1 Add operation flow
By default, the store recruitment module is located at the top of every page. Do not delete this module unless you have special requirements. The content of this module is maintained in "Supplier Backstage"-My Store-Store Management-Store Basic Information.
4. 12.2 Settings
Click to modify the operation.
4. 12.3 skin
Operation is the same as 4. 1.3.
4. 12.4 template
Operation is the same as 4. 1.4.
4. 12.5 label
Operation is the same as 4. 1.5.
5. Page setup
Page settings include background settings and sharing settings.
5. 1 background settings
When each page is decorated, there is a button in the upper left corner of the browser window called page setup. Click it to see the background settings.
Description:
Background Color: You can select or enter the color value of the background color.
Background width: used to define the background color and the width of the background image; The unit of numerical value is pixels, leaving blank means full screen.
Background picture: Please upload a picture with a size limit of 300K.
Using "background picture" combined with "custom content area" module can produce "full screen banner" and other effects.
5.2 Sharing Settings
Add a sharing floating bar for the store. You can choose to display it on the left or right side of the page, and you can set the default sharing words at the same time. Support the sharing of stores to third-party websites such as Sina Weibo, Tencent Weibo, Renren.com, Xin Kai and Douban.
If you share, if you leave it blank, the program will automatically read a paragraph of text. It is recommended to write a copy manually and save it.
Description:
Sharing words: It is recommended to enter the character 140, because if you want to share with websites such as Weibo, the excess will be automatically cut off by the other website.
May affect the integrity of Weibo's content.