Shopify Documentation

Typography

可以更改排版设置的部分，例如字体系列、字体大小和颜色. You can modify the following settings:

您的商店页面的主要字体样式(base font)

1. Font family -从下拉菜单中选择一个字体系列;

   

2. Font size — set a font size (14 - 16px);

   

3. Color — choose a color for the main font. 您可以从调色板中选择一种颜色.

   

   您可以使用十六进制颜色代码找到所需的颜色. E.g. #58d68d.

1. Font Family — Roboto Slab;
2. Font Size — 14px;
3. Color — #7777777.

1. Font Family — Ubuntu;
2. Font Size — 16px;
3. Color — #4b0404.

The titles' font style (heading font)

1. Font family -从下拉菜单中选择一个字体系列;

   

2. Font size — set a font size (20 - 40px);

   

3. Color — choose a color for the Titles. 您可以从调色板中选择一种颜色.

   

   您可以使用十六进制颜色代码找到所需的颜色. E.g. #58d68d.

1. Font Family — Arial;
2. Font Size — 30px;
3. Color — #000000.

1. Font Family — Ubuntu;
2. Font Size — 20px;
3. Color — #f70013.

Links' text color (links)

1. Links color — choose a color for the Links. 你可以从调色板中选择一种颜色;

   

2. Links hover color -当鼠标移动到链接上时，选择链接的颜色.

   

1. Links color — #000000;
2. Links hover color — #d10546;

1. Links color — #000000;
2. Links hover color — #706f70;

Product names

1. Font size — set a font size (14 - 20px);

   

2. Color -选择一种颜色作为产品名称. 您可以从调色板中选择一种颜色.

   

3. Hover color -当鼠标移动到产品名称上时，选择产品名称的颜色.

   

您可以使用十六进制颜色代码找到所需的颜色. E.g. #58d68d.

1. Font Size — 18px;
2. Color — #000000;
3. Hover color — #d10546.

1. Font Size — 20px;
2. Color — #000000;
3. Hover color — #d10546.

Product price

1. Color -选择一个颜色的产品价格. 您可以从调色板中选择一种颜色.

   

   您可以使用十六进制颜色代码找到所需的颜色. E.g. #58d68d.

1. Color — #000000;

1. Color — #ff0000;

Colours

Theme color scheme settings. 颜色必须以十六进制格式指定(例如， #aabbcc). 此外，还可以从提供的调色板中选择一种颜色.

在本节中，您将为您的站点选择颜色. 本节包括两个小节: 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图像.

Favicon图像将按比例缩小到32 x 32px.

You can upload image from your computer or select image from your library.

You are able to edit an image. Select Edit image from the Update dropdown.

为这张图片写一个简短的描述，以提高搜索引擎优化(SEO)和视障客户的可访问性.

Sidebar

General settings

1. Enable the Show sidebar option to display sidebar
2. Choose the sidebar position.
3. Remember to Save the settings.

收集和博客页面的边栏小部件

Move to the Sections tab and click on the Sidebar tab.

Add Collections section

1. 要将Collections部分添加到侧边栏，请按 Add content and select Collections from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Collections tab to configure the section.



4. Enter the title for the block. 所有店内类别都将显示在此部分. You can add new Collections under the Products > Collections menu.
5. You can delete the section as well. Click Delete in order to remove the section.

Product types section

1. 要将产品类型部分添加到侧边栏，请按 Add content and select Product types from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Product types tab to configure the section.



4. Enter the title for the block.
5. Click Delete to remove the section.

Product vendors section

1. 要将Product vendor部分添加到侧边栏，请按 Add content and select Product vendors from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Product vendors tab to configure the section.
4. Enter the title for the block.
5. Click Delete to remove the section.

Products section

1. 要将Product部分添加到侧边栏，请按 Add content and select Products from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Products tab to configure the section.
4. Enter the title ，并选择Collection.
5. 中最后添加的3个产品将显示在 Products section.
6. Click Delete to remove the section.

Linklist section

1. 要将链接列表部分添加到侧边栏，请按 Add content and select Linklist from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Linklist tab to configure the section.
4. Choose the linklist to display. Add new linklist under the Online store > Navigation menu.
5. Click Delete to remove the section.

1. 要将带有自定义HTML的块添加到侧边栏，按 Add content and select HTML code from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the {/} HTML code tab to configure the section.
4. Enter the code in the Custom HTML option field.
5. Click Delete to remove the section.

Add Banner section

1. 要将Banner添加到侧边栏，请按 Add content and select Banner from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Banner (Title) tab to configure the section.
4. 要为横幅选择图像，请按 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.
5. 设置横幅高度(小/中/大).
6. Specify the Heading for the banner and add some Text you want yo display on the banner.
7. You also can attach the link to the banner.
8. Click Delete to remove the section.

Social Sharing Buttons

在产品页面上显示你的社交媒体图标.

显示/隐藏产品社交分享按钮. 为了隐藏社交分享按钮，禁用复选框.

Result:

Products Badge

为收藏页面的产品图像添加“新”和“销售”徽章.

让我们回顾一下可用的选项:

1. 要显示标签，首先应该启用 Show badge on product option.



2. 'New' products marker -输入产品被视为“新”的天数(从产品添加之日开始计算).



3. '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.

Remember to Save the settings.

Newsletter Popup

电子邮件通讯一直是每个营销策略的重要组成部分. 在客户端访问您的网站后显示带有订阅表单的弹出窗口.

让我们回顾一下可用的选项:

1. 要显示标签，首先应该激活 Enable newsletter popup option.
2. 弹出窗口禁用过期(以天为单位)- 设置用户点击“不再显示此消息”按钮后再次显示弹出窗口的天数.
3. Background image -下载通讯的背景图片. 图片大小不能超过700x400px.

Remember to Save the settings.

Checkout

本节介绍订单页面的外观设置. 您可以自定义横幅，徽标，页面标题，以及按钮的颜色.

让我们回顾一下Checkout配置:

Wishlist

愿望清单是一项电子商务功能，允许购物者创建他们想要购买的个性化产品集合.

Create the new page

登录到您的Shopify商店管理面板，然后转到 Online Store, then tap Pages.

Click the Add page button.

Enter the Title for the page (1). 注意，标题在前端是可见的.

Set the page as Visible (2) 并为该页选择模板 (3).

Save the page (4).

让我们回顾一下可用的选项:

1. Activate the Enable wishlist 选择使用“愿望清单”功能为您的商店.
2. 然后选择愿望清单的页面.

Remember to Save the settings.

Settings for the Wishlist Page

1. Product image size -设置产品图像大小(小/中/大)
2. Product image alignment -选择产品图像的对齐类型