Shopify Documentation
Theme Configuration
有了多个选项,您可以根据需要修改模板. 您可以编辑字体族,字体颜色和 大小,主题配色方案,横幅和滑块图像等.
Navigate to the Online Store > Themes section.
选择要修改的主题.
Click on the Customize theme 按钮打开设置编辑器页面,您可以在其中更改外观 and content of the theme.
![](img/customize.png)
Go to the General settings tab.
![](img/general.png)
This is Live editor,您可以跟踪您的 store without reloading the page.
![](img/06_settings.png)
在您安装的主题中,您将看到以下选项:
Typography
可以更改排版设置的部分,例如字体系列、字体大小和颜色. You can modify the following settings:
![](img/typography.png)
您的商店页面的主要字体样式(base font)
- Font family -从下拉菜单中选择一个字体系列;
- Font size — set a font size (14 - 16px);
- Color — choose a color for the main font. 您可以从调色板中选择一种颜色.
![](img/typography-9.png)
- Font Family — Roboto Slab;
- Font Size — 14px;
- Color — #7777777.
![](img/typography-10.png)
- Font Family — Ubuntu;
- Font Size — 16px;
- Color — #4b0404.
The titles' font style (heading font)
- Font family -从下拉菜单中选择一个字体系列;
- Font size — set a font size (20 - 40px);
- Color — choose a color for the Titles. 您可以从调色板中选择一种颜色.
![](img/typography-11.png)
- Font Family — Arial;
- Font Size — 30px;
- Color — #000000.
![](img/typography-12.png)
- Font Family — Ubuntu;
- Font Size — 20px;
- Color — #f70013.
Links' text color (links)
- Links color — choose a color for the Links. 你可以从调色板中选择一种颜色;
- Links hover color -当鼠标移动到链接上时,选择链接的颜色.
![](img/typography-13.png)
- Links color — #000000;
- Links hover color — #d10546;
![](img/typography-14.png)
- Links color — #000000;
- Links hover color — #706f70;
Product names
- Font size — set a font size (14 - 20px);
- Color -选择一种颜色作为产品名称. 您可以从调色板中选择一种颜色.
- Hover color -当鼠标移动到产品名称上时,选择产品名称的颜色.
![](img/typography-16.png)
- Font Size — 18px;
- Color — #000000;
- Hover color — #d10546.
![](img/typography-17.png)
- Font Size — 20px;
- Color — #000000;
- Hover color — #d10546.
Product price
- Color -选择一个颜色的产品价格. 您可以从调色板中选择一种颜色.
![](img/typography-18.png)
- Color — #000000;
![](img/typography-19.png)
- Color — #ff0000;
Colours
Theme color scheme settings. 颜色必须以十六进制格式指定(例如, #aabbcc). 此外,还可以从提供的调色板中选择一种颜色.
![](img/colour.png)
在本节中,您将为您的站点选择颜色. 本节包括两个小节: Page colors and Color theme.
Let's explore the options:
The Page colors option controls the Page background color and Border color.
The Color theme 用于替代按钮样式,一些文本和图标悬停状态,以及其他地方. 在本节中,您可以调整链接,顶部栏,标题,导航和页脚的颜色.
Favicon
您可以更改默认的网站图标(出现在浏览器选项卡中的小图标)与您选择的png图像.
![](img/favicon.png)
Favicon图像将按比例缩小到32 x 32px.
You can upload image from your computer or select image from your library.
![](img/favicon-1.png)
You are able to edit an image. Select Edit image from the Update dropdown.
![](img/favicon-2.png)
为这张图片写一个简短的描述,以提高搜索引擎优化(SEO)和视障客户的可访问性.
Sidebar
General settings
- Enable the Show sidebar option to display sidebar
- Choose the sidebar position.
- Remember to Save the settings.
![](img/sidebar.jpg)
收集和博客页面的边栏小部件
Move to the Sections tab and click on the Sidebar tab.
Content:
1. Collections section
2. Product types section
3. Product vendors section
3. Products section
4. Linklist section
5. Custom HTML section
6. Banner section
Add Collections section
- 要将Collections部分添加到侧边栏,请按 Add content and select Collections from the dropdown.
- The new tab will appear in the Content section.
- Click on the Collections tab to configure the section.
- Enter the title for the block. 所有店内类别都将显示在此部分. You can add new Collections under the Products > Collections menu.
- You can delete the section as well. Click Delete in order to remove the section.
![](img/sidebar-3.jpg)
![](img/sidebar-4.jpg)
Product types section
- 要将产品类型部分添加到侧边栏,请按 Add content and select Product types from the dropdown.
- The new tab will appear in the Content section.
- Click on the Product types tab to configure the section.
- Enter the title for the block.
- Click Delete to remove the section.
![](img/sidebar-6.jpg)
Product vendors section
- 要将Product vendor部分添加到侧边栏,请按 Add content and select Product vendors from the dropdown.
- The new tab will appear in the Content section.
- Click on the Product vendors tab to configure the section.
- Enter the title for the block.
- Click Delete to remove the section.
![](img/sidebar-15.jpg)
Products section
- 要将Product部分添加到侧边栏,请按 Add content and select Products from the dropdown.
- The new tab will appear in the Content section.
- Click on the Products tab to configure the section.
- Enter the title ,并选择Collection.
- 中最后添加的3个产品将显示在 Products section.
- Click Delete to remove the section.
![](img/sidebar-18.jpg)
Linklist section
- 要将链接列表部分添加到侧边栏,请按 Add content and select Linklist from the dropdown.
- The new tab will appear in the Content section.
- Click on the Linklist tab to configure the section.
- Choose the linklist to display. Add new linklist under the Online store > Navigation menu.
- Click Delete to remove the section.
![](img/sidebar-26.jpg)
Custom HTML section
- 要将带有自定义HTML的块添加到侧边栏,按 Add content and select HTML code from the dropdown.
- The new tab will appear in the Content section.
- Click on the {/} HTML code tab to configure the section.
- Enter the code in the Custom HTML option field.
- Click Delete to remove the section.
![](img/sidebar-28.jpg)
Add Banner section
![](img/sidebar-31.jpg)
- 要将Banner添加到侧边栏,请按 Add content and select Banner from the dropdown.
- The new tab will appear in the Content section.
- Click on the Banner (Title) tab to configure the section.
- 要为横幅选择图像,请按 Select image button. To upload image, go to the Settings > Files menu and click Upload files button. Note, the image should be more than 270 px wide.
- 设置横幅高度(小/中/大).
- Specify the Heading for the banner and add some Text you want yo display on the banner.
- You also can attach the link to the banner.
- Click Delete to remove the section.
![](img/sidebar-28.jpg)
Social Sharing Buttons
在产品页面上显示你的社交媒体图标.
![](img/buttons.png)
显示/隐藏产品社交分享按钮. 为了隐藏社交分享按钮,禁用复选框.
![](img/buttons-2.png)
Result:
![](img/buttons-3.png)
Products Badge
为收藏页面的产品图像添加“新”和“销售”徽章.
![](img/product-badge.jpg)
让我们回顾一下可用的选项:
- 要显示标签,首先应该启用 Show badge on product option.
- 'New' products marker -输入产品被视为“新”的天数(从产品添加之日开始计算).
- 'Sale' marker type -设置“Sale”标签类型(文本或百分比). 后自动出现“Sale”标签 Compare at price is set under the Products > All products section, in case the Show badge on product option is activated.
![](img/product-badge-2.jpg)
![](img/product-badge-1.jpg)
![](img/product-badge-3.jpg)
Remember to Save the settings.
Newsletter Popup
电子邮件通讯一直是每个营销策略的重要组成部分. 在客户端访问您的网站后显示带有订阅表单的弹出窗口.
![](img/newsletter-popup-1.jpg)
让我们回顾一下可用的选项:
![](img/newsletter-popup.jpg)
- 要显示标签,首先应该激活 Enable newsletter popup option.
- 弹出窗口禁用过期(以天为单位)- 设置用户点击“不再显示此消息”按钮后再次显示弹出窗口的天数.
- Background image -下载通讯的背景图片. 图片大小不能超过700x400px.
Remember to Save the settings.
Checkout
本节介绍订单页面的外观设置. 您可以自定义横幅,徽标,页面标题,以及按钮的颜色.
![](img/checkout.png)
让我们回顾一下Checkout配置:
Banner | - | set a background image. 推荐尺寸为1000 x 400px. 您可以从计算机上传图像或从图库中选择图像. |
Logo | - | set a custom image for Logo. 您可以从计算机上传图像或从图库中选择图像. |
Position (Logo position) | - | 从下拉选项中选择合适的Logo位置(左/中/右). |
Logo size | - | 从下拉选项中选择合适的标志尺寸(小/中/大). |
Main content area: | ||
Background image | - | set a background image. 您可以从计算机上传图像或从图库中选择图像. 图像重复垂直和水平. |
Background color | - | set a background image (in case Background image is disabled). 您可以从调色板中选择一种颜色. |
Form fields | - | use this field if you want to have Form fields white or transparent. |
Order summary: | ||
Background image | - | set a background image. 您可以从计算机上传图像或从图库中选择图像. 图像重复垂直和水平. |
Background color | - | set a background color (in case Background image is disabled). 您可以从调色板中选择一种颜色. |
Typography: | ||
Headings | - | 从下拉菜单中选择标题字体系列. |
Body | - | 从下拉列表中选择结帐主文本的字体系列. |
Colors: | ||
Accents | - | 为链接、高亮和复选标记选择一种颜色. 您可以从调色板中选择一种颜色. |
Buttons | - | 为礼品卡/折扣和下一步按钮选择一种颜色. 您可以从调色板中选择一种颜色. |
Errors | - | 为消息和无效字段选择颜色. 您可以从调色板中选择一种颜色. |
Wishlist
愿望清单是一项电子商务功能,允许购物者创建他们想要购买的个性化产品集合.
Create the new page
登录到您的Shopify商店管理面板,然后转到 Online Store, then tap Pages.
![](img/new-page.jpg)
Click the Add page button.
Enter the Title for the page (1). 注意,标题在前端是可见的.
Set the page as Visible (2) 并为该页选择模板 (3).
Save the page (4).
![](img/wishlist-2.jpg)
让我们回顾一下可用的选项:
![](img/wishlist.jpg)
- Activate the Enable wishlist 选择使用“愿望清单”功能为您的商店.
- 然后选择愿望清单的页面.
Remember to Save the settings.
Settings for the Wishlist Page
- Product image size -设置产品图像大小(小/中/大)
- Product image alignment -选择产品图像的对齐类型