标头

标头分区包含商店中每个页面顶部显示的内容。Narrative 使您可以通过点击网站地图图标 (☰) 来选择客户可以访问的两个网站地图菜单。

您还可以通过将商店标头设为透明来更改商店标头的外观。



自定义标头

PC:

  1. 在 Shopify 后台中,转到在线商店 > 模板

  2. 点击 的分区 旁边的自定义

  1. 点击标头分区。

  2. 在 logo 图片区域中,点击选择图片,然后执行以下操作之一:- 若要选择已上传到 Shopify 后台的图片,请点击选项卡。

  3. 若要从 Burst 中选择库存图片,请点击免费图片选项卡。您可在此处输入搜索词,或浏览图片类别。

  4. 若要从本地计算机选择图片,请点击选项卡,然后点击上传

  5. 自定义 logo 高度(以像素为单位)字段中,输入 logo 的像素高度。

  6. 从 Shopping cart icon(购物车图标)列表中,选择是否要在标头中显示购物袋或购物车 logo。

  7. 如果要使商店标题透明,请执行以下操作:

    1. 点击 Enable transparent header on the home page(在主页上启用透明标题)。

    2. 选择要在透明背景上显示的图片。您可能需要选择一个与在标头页上显示的 logo 不同的 logo。例如,您可能需要在较暗的背景下显示白色 logo。

    3. 点击 Transparent header icons color(透明标头图标颜色)调色板,以选择 logo 图片以及网站地图和购物车图标的颜色。

  8. 主网站地图列表中,选择客户点击网站地图图标时将显示的主菜单。

  1. 辅助网站地图列表中,选择辅助菜单。

  1. 点击保存

苹果系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触 Manage themes(管理模板)。

  4. 在 的分区 旁边,轻触自定义

  5. 轻触编辑

  1. 点击标头分区。

  2. 在 logo 图片区域中,点击选择图片,然后执行以下操作之一:- 若要选择已上传到 Shopify 后台的图片,请点击选项卡。

  3. 若要从 Burst 中选择库存图片,请点击免费图片选项卡。您可在此处输入搜索词,或浏览图片类别。

  4. 若要从本地计算机选择图片,请点击选项卡,然后点击上传

  5. 自定义 logo 高度(以像素为单位)字段中,输入 logo 的像素高度。

  6. 从 Shopping cart icon(购物车图标)列表中,选择是否要在标头中显示购物袋或购物车 logo。

  7. 如果要使商店标题透明,请执行以下操作:

    1. 点击 Enable transparent header on the home page(在主页上启用透明标题)。

    2. 选择要在透明背景上显示的图片。您可能需要选择一个与在标头页上显示的 logo 不同的 logo。例如,您可能需要在较暗的背景下显示白色 logo。

    3. 点击 Transparent header icons color(透明标头图标颜色)调色板,以选择 logo 图片以及网站地图和购物车图标的颜色。

  8. 主网站地图列表中,选择客户点击网站地图图标时将显示的主菜单。

  1. 辅助网站地图列表中,选择辅助菜单。

  1. 点击保存

安卓系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触 Manage themes(管理模板)。

  4. 在 的分区 旁边,轻触自定义

  5. 轻触编辑

  1. 点击标头分区。

  2. 在 logo 图片区域中,点击选择图片,然后执行以下操作之一:- 若要选择已上传到 Shopify 后台的图片,请点击选项卡。

  3. 若要从 Burst 中选择库存图片,请点击免费图片选项卡。您可在此处输入搜索词,或浏览图片类别。

  4. 若要从本地计算机选择图片,请点击选项卡,然后点击上传

  5. 自定义 logo 高度(以像素为单位)字段中,输入 logo 的像素高度。

  6. 从 Shopping cart icon购物车图标)列表中,选择是否要在标头中显示购物袋或购物车 logo。

  7. 如果要使商店标题透明,请执行以下操作:

    1. 点击 Enable transparent header on the home page(在主页上启用透明标题)。

    2. 选择要在透明背景上显示的图片。您可能需要选择一个与在标头页上显示的 logo 不同的 logo。例如,您可能需要在较暗的背景下显示白色 logo。

    3. 点击 Transparent header icons color(透明标头图标颜色)调色板,以选择 logo 图片以及网站地图和购物车图标的颜色。

  8. 主网站地图列表中,选择客户点击网站地图图标时将显示的主菜单。

  1. 辅助网站地图列表中,选择辅助菜单。

  1. 点击保存

添加公告栏

您可以在标头中添加公告栏,以便使用该栏向客户显示消息。您的消息是可以自定义的,并且可以包含联系信息、有关商店活动或促销的信息,或者商店的标语。

PC:

  1. 在 Shopify 后台中,转到在线商店 > 模板

  2. 点击 的分区 旁边的自定义

  1. 点击标头

  2. 公告区域中,选中显示公告

  3. 输入您的公告的文本。

  4. 可选:输入 URL 以添加您的公告链接。

  5. 可选:在图标菜单中,选择要在公告栏中显示的图标。此图标使用的颜色与公告文本的相同。

  6. 若要更改公告栏的背景色,请点击颜色样本并选择颜色。

  7. 若要更改公告文本的颜色,请点击文本颜色样本并选择颜色。

  8. 点击保存

苹果系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触 Manage themes(管理模板)。

  4. 在 的分区 旁边,轻触自定义

  5. 轻触编辑

  1. 点击标头

  2. 公告区域中,选中显示公告

  3. 输入您的公告的文本。

  4. 可选:输入 URL 以添加您的公告链接。

  5. 可选:在图标菜单中,选择要在公告栏中显示的图标。此图标使用的颜色与公告文本的相同。

  6. 若要更改公告栏的背景色,请点击颜色样本并选择颜色。

  7. 若要更改公告文本的颜色,请点击文本颜色样本并选择颜色。

  8. 点击保存

安卓系统:

  1. 在 Shopify 应用中,轻触商店

  2. 销售渠道部分,轻触在线商店

  3. 轻触 Manage themes(管理模板)。

  4. 在 的分区 旁边,轻触自定义

  5. 轻触编辑

  1. 点击标头

  2. 公告区域中,选中显示公告

  3. 输入您的公告的文本。

  4. 可选:输入 URL 以添加您的公告链接。

  5. 可选:在图标菜单中,选择要在公告栏中显示的图标。此图标使用的颜色与公告文本的相同。

  6. 若要更改公告栏的背景色,请点击颜色样本并选择颜色。

  7. 若要更改公告文本的颜色,请点击文本颜色样本并选择颜色。

  8. 点击保存

Shopify商户官网原文详情


Header

The header section includes the content that appears at the top of every page in your store. Narrative lets you select two navigation menus that customers can access by clicking the navigation icon (☰).

You can also change the look of your store's header by making it transparent.

Customize the header


PC:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Next to Narrative, click Customize.

  1. Click the Header section.

  2. In the Logo image area, click Select image, and then do one of the following:

    • To select an image that you have already uploaded to your Shopify admin, click the Library tab.

    • To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.

    • To select an image from your local computer, click the Library tab, and then click Upload.

  3. In the Custom logo height (in pixels) field, enter the pixel height of your logo.

  4. From the Shopping cart icon list, choose whether you want to display a bag or cart logo in your header.

  5. If you want to make your store's header transparent, then do the following:

    1. Click Enable transparent header on the home page.

    2. Choose an image to display over the transparent background. You might need to select a different logo than the one you selected to display on your header page. For example, you might need a white logo to display against a darker background.

    3. Click the Transparent header icons color palette to select a color for the logo image and navigation and cart icons.

  6. From the Primary navigation list, select the primary menu that will display when a customer clicks the navigation icon.

  7. From the Secondary navigation list, select the secondary menu.

  8. Click Save.

iPhone:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Next to Narrative, tap Customize.

  5. Tap Edit.

  1. Click the Header section.

  2. In the Logo image area, click Select image, and then do one of the following:

    • To select an image that you have already uploaded to your Shopify admin, click the Library tab.

    • To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.

    • To select an image from your local computer, click the Library tab, and then click Upload.

  3. In the Custom logo height (in pixels) field, enter the pixel height of your logo.

  4. From the Shopping cart icon list, choose whether you want to display a bag or cart logo in your header.

  5. If you want to make your store's header transparent, then do the following:

    1. Click Enable transparent header on the home page.

    2. Choose an image to display over the transparent background. You might need to select a different logo than the one you selected to display on your header page. For example, you might need a white logo to display against a darker background.

    3. Click the Transparent header icons color palette to select a color for the logo image and navigation and cart icons.

  6. From the Primary navigation list, select the primary menu that will display when a customer clicks the navigation icon.

  7. From the Secondary navigation list, select the secondary menu.

  8. Click Save.

Android:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Next to Narrative, tap Customize.

  5. Tap Edit.

  1. Click the Header section.

  2. In the Logo image area, click Select image, and then do one of the following:

    • To select an image that you have already uploaded to your Shopify admin, click the Library tab.

    • To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.

    • To select an image from your local computer, click the Library tab, and then click Upload.

  3. In the Custom logo height (in pixels) field, enter the pixel height of your logo.

  4. From the Shopping cart icon list, choose whether you want to display a bag or cart logo in your header.

  5. If you want to make your store's header transparent, then do the following:

    1. Click Enable transparent header on the home page.

    2. Choose an image to display over the transparent background. You might need to select a different logo than the one you selected to display on your header page. For example, you might need a white logo to display against a darker background.

    3. Click the Transparent header icons color palette to select a color for the logo image and navigation and cart icons.

  6. From the Primary navigation list, select the primary menu that will display when a customer clicks the navigation icon.

  7. From the Secondary navigation list, select the secondary menu.

  8. Click Save.

Add an announcement bar

You can add an announcement bar in the header that you can use to show a message to your customers. Your message is customizable and might include contact information, information about store events or sales, or a store slogan.

PC:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Next to Narrative, click Customize.

  1. Click Header.

  2. In the Announcement area, check Show announcement.

  3. Enter the text for your announcement.

  4. Optional: Enter a URL to add a link to your announcement.

  5. Optional: From the Icon menu, select an icon to display in the announcement bar. The icon uses the same color as your announcement text.

  6. To change the color of the announcement bar background, click the Bar color swatch and choose a color.

  7. To change the color of the announcement text, click the Text color swatch and choose a color.

  8. Click Save.

iPhone:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Next to Narrative, tap Customize.

  5. Tap Edit.

  1. Click Header.

  2. In the Announcement area, check Show announcement.

  3. Enter the text for your announcement.

  4. Optional: Enter a URL to add a link to your announcement.

  5. Optional: From the Icon menu, select an icon to display in the announcement bar. The icon uses the same color as your announcement text.

  6. To change the color of the announcement bar background, click the Bar color swatch and choose a color.

  7. To change the color of the announcement text, click the Text color swatch and choose a color.

  8. Click Save.

Android:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Next to Narrative, tap Customize.

  5. Tap Edit.

  1. Click Header.

  2. In the Announcement area, check Show announcement.

  3. Enter the text for your announcement.

  4. Optional: Enter a URL to add a link to your announcement.

  5. Optional: From the Icon menu, select an icon to display in the announcement bar. The icon uses the same color as your announcement text.

  6. To change the color of the announcement bar background, click the Bar color swatch and choose a color.

  7. To change the color of the announcement text, click the Text color swatch and choose a color.

  8. Click Save.

文章内容来源:Shopify商户官方网站


(本文内容根据网络资料整理,出于传递更多信息之目的,不代表连连国际赞同其观点和立场)