# Tutorial on Using the Bookshelf Component

<div data-elink-language-switch="1" id="bkmrk-%E4%B8%AD%E6%96%87" style="border:1px solid #d6d9de;border-radius:6px;padding:10px 12px;margin:0 0 18px 0;background:#f8fafc;font-size:14px;">[中文](/books/8f855/page/9461c)</div><span style="font-size:17px;">**<span style="font-family:'微软雅黑', sans-serif;">I. Function Introduction</span>**</span>

<span style="font-family:'微软雅黑', sans-serif;font-size:15px;">The bookshelf component is an important component for operators to customize micro - pages. By adding the bookshelf component, you can freely add pre - edited knowledge products to the micro - page and display and sell them in a bookshelf arrangement.</span>

<span style="font-family:'微软雅黑', sans-serif;font-size:16px;">  
</span>

<span style="font-size:17px;">**II. Operation Steps**</span>

<span style="font-size:15px;">1. Step One</span>

<span style="color:rgb(53,53,53);background-color:rgb(255,255,255);font-size:15px;"></span>

<span style="color:rgb(53,53,53);background-color:rgb(255,255,255);font-size:15px;">Click “Store” - “Store Decoration” - “Mobile Store” - “Micro - page”, and then click to add the “Bookshelf” component.</span>

<span style="color:rgb(53,53,53);background-color:rgb(255,255,255);font-size:16px;">![image.png](https://wechatapppro-1252524126.file.myqcloud.com/help_document/image/ueditor/986900_1566790352.png ".png")</span>

<span style="font-size:15px;">2. Step Two</span>

<span style="font-size:15px;">You can replace the cover of the knowledge products displayed on the bookshelf. Select a cover image with a ratio of 318\*480 and upload it.</span>

<span style="font-size:15px;">3. Step Three</span>

<span style="font-size:15px;">You can also customize the component title, choose whether to display the title bar, and whether to display the “View All” entry.</span>

<span style="font-size:16px;">![image.png](https://wechatapppro-1252524126.file.myqcloud.com/help_document/image/ueditor/79660700_1566790351.png ".png")</span>

<span style="font-size:16px;">  
</span>

<span style="font-size:17px;">**III. Final Effect**</span>

<span style="font-size:15px;">After the settings are completed, the bookshelf effect will be displayed on the micro - page.</span>

![image.png](https://wechatapppro-1252524126.file.myqcloud.com/help_document/image/ueditor/21807600_1566790352.png ".png")