走过一十二年历程的互联网品牌设计机构,专业网站开发建设,破解搜索引擎算法数据结构排名规则,独创集成子域名集权seo优化

shopify添加下拉菜单


布鲁克林

添加下拉菜单

需要将下拉式菜单添加到您的主菜单,将会在您的导航页面上创建菜单。这篇文章将引导您完成这一进程。

你头的有限的一部分是预留您的导航。如果您的链接超过分配的宽度,则您的导航将自动转换为一个汉堡包按钮,将打开一个滑出式菜单中。

行为不是 ‘ t 虽然保持这一数字降到四或五将有助于严格控制由你主菜单中的链接数。要试着挤出更多的链接,您可以 ︰

 

使用较窄的字体。为此,改变你”口音文本”下排版上你自定义主题页.

使每个链接,使用更少的字符,例如更改 ‘ 常见问题 ‘ 到 ‘ 常见问题 ‘,’ 联系我们 ‘ 到 ‘ 接触 ‘,’ 目录 ‘ 到 ‘ 店 ‘,和所有的 ‘ 和 ‘ 到 ‘ & ‘。

 

注意

在您的导航项目太多可能是一个糟糕的主意,从可用性的角度。用更少的菜单项,您的访客 ‘ 眼睛不易扫描过去重要的项目。挑战自己,限制您导航到四个或五个项目。使用下拉式菜单如果你想要给超过五页的访问。一个典型的错误是一家商店有大量的收藏链接到所有的主菜单中。更好的方法是将列出在下拉菜单下集合 ‘ 商店 ‘ 或 ‘ 目录 ‘ 链接,或要将分解成组集合,给每个组下拉菜单。您还可以使用产品标签若要创建子类别的产品。

如果你必须在你的主菜单中使用大量的链接,并且想要禁用汉堡包菜单行为,头向这自定义指南.禁用该功能是不支持 Shopify.

您的页面顶部导航链接的颜色挂钩的颜色 > 文本设置上的你自定义主题页:

你可以拿任何你想要的颜色,它不需要必须是白色或黑色。

你知道吗?

在所有页面上文本的颜色是一样用于您的导航链接和你的店铺名字,如果你不是 ‘ t 使用徽标。所有文本的颜色由主题颜色设置控制 > 文本。

然而,在您的主页,如果你使用的英雄幻灯片,您导航链接 — — 以及在英雄幻灯片显示的所有文本 — — 要么会白色或黑色,取决于当前显示的幻灯片是否有其文本颜色设置为”光”或”黑暗”。黑色和白色的使用是为了增加幻灯片照片与坐在上面,以确保文本是易读的文本之间的对比。你 ‘ ll 挑”光”(因此,白色文本) 为一张幻灯片,是黑暗的而你 ‘ ll 挑”黑暗”(因此,黑色文本) 是光的幻灯片。

在黑暗的幻灯片的”光”彩色文本 ︰

在光的幻灯片的”黑暗”彩色文本 ︰

显示您导航上面的幻灯片

若要移动你英雄的幻灯片中,而不是坐在它上面的导航栏,您需要自定义您的主题。

 

从你看 Shopify admin,单击在线商店,然后单击主题 (或按GWT):

注意

如果你看 Shopify 管理员看起来不同,然后你会发现在线商店销售渠道菜单下相反。

 

找到您想要编辑,请单击的主题...按钮,然后单击编辑 HTML CSS:

注意

如果你看 Shopify 管理员看起来不同,然后你会发现在线商店销售渠道菜单下相反。

 

下段,单击 hero.liquid 在在线代码编辑器中,打开滑块片段或去此 URL.

 

 

Hero.liquid,里面找到并删除下面这行代码 ︰

 

   {% assign hero_full_height = true %} 

或者,保持线,但设置 hero_full_height 为 false:

   {% assign hero_full_height = false %} 

保存您的文件。

在您的主页上使用英雄幻灯片模块时它 ‘ s 可能你的 logo 可能可读性很强时不会显示在黑暗的幻灯片 ︰

如果发生这种情况,就是去你自定义主题页并在标题下复选框”使用倒徽标”。然后,下面,单击选择文件并浏览到一个版本将会有更好的对比度的徽标。理想情况下,使用白色的标志。

倒立的标志将出现在每张幻灯片具有其文本颜色设置为光你英雄放映幻灯片。

如果你不能把你的手对光色变化的您的徽标,离开框中”使用倒徽标”未选中。

幻灯片图像的的最优规模

在使用这两个幻灯片布鲁克林演示店铺是完全 1200年像素宽 800 像素高。它 ‘ s 一个好的主意,让你所有的幻灯片大小相同。

一些裁剪两侧的幻灯片是预期在移动电话上,而在底部裁剪预计在笔记本电脑屏幕上。你 ‘ 会发现这种现象的原因的详细信息在这里.

为什么幻灯片图像被裁剪的手机上

修剪是故意的。在移动电话上幻灯片呈现,他们完全填充设备屏幕从其上边缘到其底部边缘。换句话说,幻灯片将调整大小,所以,他们的身高是您的移动设备的高度相同。您的幻灯片然后成为覆盖移动屏幕的背景图像和对于这种情况发生,幻灯片将一定将它夹在左和右。

在大型显示器上行为有点相反由于新的宽度与高度的比率。然后调整幻灯片,以便其宽度这一次,不是自己的身高,适合的浏览器宽度和幻灯片,然后在底部剪毛也是如此。

这两种行为都明显在下面截图,其中显示的桌面和移动的视图并排。

你可以避免所有的剪辑,如果你移动你您的幻灯片上方的导航栏.

布鲁克林的产品图像的最佳类型

高分辨率的照片看起来更加精致和专业化在布鲁克林主题,,所以你的目标是至少 1024 高 1024年像素宽的图像。您的图像可以由 2048年 2048年一样大。图像将被自动缩减在必要时,因此,更高质量更好。

最佳宽度与高度比例为您的产品照片是方形的。

理想情况下,你的照片应该有沿边缘平彩色背景。这里是平指纯色无底纹或突出显示。此外,所有照片应都分享沿其边缘平颜色相同。

若要匹配产品框架周围你的照片与你的照片中的背景色的颜色,就是去你自定义主题页并根据颜色编辑产品背景色。产品背景颜色需要您产品的照片,为您的照片可以混合在他们周围的框架内与背景颜色相同。

之前您调整产品背景色 ︰

之后你 ‘ ve 调整产品背景颜色以匹配您的照片中的背景色 ︰

核心提示 ︰ 如果你的照片有一个白色的背景,你可以将你的背景颜色设置为白色,以外的任何颜色和你的产品的背景颜色设置为白色 ︰

删除产品图像的灰色边框

去你自定义主题页并根据颜色套你产品背景颜色到透明似如此 ︰

如果你发现你的产品图片都太小了,到这高级自定义指南.将该自定义项应用于布鲁克林主题是不支持 Shopify.如果你需要帮助自定义您的布鲁克林主题在这件事,你可以在寻求帮助设计社区论坛.

向产品添加保存徽章

在大于你的产品变型的价格的价格设置进行了比较。如果产品设置正确地在那件事发售,徽章将显示自动在该产品图像集合页上。

 

从你看 Shopify admin,单击在线商店,然后单击主题 (或按GWT):

 

单击...你想要自定义,然后单击编辑语言为主题的的按钮。

 

注意

如果你看 Shopify 管理员看起来不同,然后你会发现在线商店销售渠道菜单下相反。

 

在语言页上,选择您积极的语言。

 

 

活动语言屏幕顶部的搜索框中,开始键入”特色”,弹出”精选集合”翻译。

 

 

编辑你的翻译,并单击保存。如果您删除的文本,标题将被删除从您的主页。语言编辑器将备注在缺少的翻译,但您可以忽略该警告。

 

你知道吗?

你可以在你的主题,这并不更改任何文本 ‘ t 来自您存储的内容,使用语言编辑器。

 

从你看 Shopify admin,单击在线商店,然后单击主题 (或按GWT):

 

单击...你想要自定义,然后单击编辑语言为主题的的按钮。

 

注意

如果你看 Shopify 管理员看起来不同,然后你会发现在线商店销售渠道菜单下相反。

 

在语言页上,选择您积极的语言。

 

 

活动语言屏幕顶部的搜索框中,开始键入”特色”,弹出”特色产品”翻译。

 

 

编辑你的翻译,并单击保存。如果您删除的文本,标题将被删除从您的主页。语言编辑器将备注在缺少的翻译,但您可以忽略该警告。

 

你知道吗?

你可以在你的主题,这并不更改任何文本 ‘ t 来自您存储的内容,使用语言编辑器。

哪些产品出现较大集合页上的设置

在网格中产品的尺寸基于集合中的顺序。手动重新排列您的产品在管理员来调整大小。

每个六种产品,第一和第六的产品将获得更大的治疗,那 ‘ s 的第 1、 6、 7、 12、 13、 18 的图像,等等,在您的收藏。

若要关闭此特殊的待遇,就是去你自定义主题页并集下页更改网格样式从拼贴到网格。

显示集合的边缘到边缘图像

首先,你需要到您的收藏有特色形象.

一次,你已确保您的集合集合页面中您的管理员具有特色的形象,向下滚动到模板部分,选择 collection.image 作为您的模板为您的收藏。

警告

只有使用 collection.image 模板,如果你有一个很宽的特色形象,因为否则会放大你的形象,使跨越屏幕的宽度。通过使用 collection.image 模板,你还可以期待你的特色形象,夹在顶部和底部。这是页的正常的因为您的图像将作为”背景图像”应用于带有固定高度的一段。

一个好的演示功能作品上的显示方式男装页上的布鲁克林演示店铺.采集图像显示在顶部是非常相同的图像,你看看在这里.它是 1405年像素宽 800 像素高。

将子导航添加到收藏页

对列表上看到你收藏页的标题下的子类别女性页布鲁克林演示店铺,您的收藏将需要包含与产品标签.一个使用产品标记来创建子类别在 Shopify 的产品。

确保功能 isn ‘ t 关闭你自定义主题页.在集合页部分,该复选框标记”显示集合标记”需要选择 ︰

产品在隐藏标记集合页

到你自定义主题页并在集合页部分,取消选中复选框”显示集合标记”,像这样 ︰

跨出产品选项时他们都卖完了

满座的选项中有只有一个选择,而不是两个或三个的产品的布鲁克林主题越过自动。

只能为给定的所有选项,说大小和颜色组合确定项目的可用性。如果一种产品,只有一个选择,颜色或大小,然后从任意组合,给定选项的可用性可以独立的确定和所以满座选项可以划掉了。然而,如果一个产品有两个或三个选项,例如颜色和大小,然后交叉进行治疗可以 ‘ t 适用。选择颜色和大小的组合,结果在不可用或卖个满堂红的变形将导致在添加到购物车按钮成为禁用和重新命名 ‘ 不可用 ‘ 或 ‘ 卖出 ‘。

下面,褐色-产品售罄了媒体组合 ︰

当选择一个变种滚动动画

在产品页面上,如果产品描述足够短,以适合整个视区,选择一个 variant 类型,有变异的图像会产生一个滚动的动画将揭示这变异的图像。另一方面,如果描述太长,不适合在屏幕上,上面的图像将取而代之的 variant 类型的值的图像,并将没有滚动的动画。

产品描述是”粘性”或固定在屏幕上只当它是足够短,以适应内视区。旨在揭示类型的所选图像的滚动动画只是 variant 的可能的如果描述是 variant 的”粘性”。当描述不是”粘性”因为它 ‘ s 太长,然后主题不能诉诸滚动动画所以它将揭示新变型图像与交换的最顶层的形象。

如果你喜欢滚动动画,保持你的产品描述短。如果你 ‘ 宁愿图像交换,使用较长的产品描述。

无论大小您的描述,不过,最终的结果是相同只要选择一个变形与变异的图像将显示你那图像而不忽视产品选项按钮。你 ‘ ll 能够毫不费力地循环通过所有颜色的产品,并在看到什么产品看起来像在每一种颜色,而无需向上和向下滚动。

更改页面底部的信用卡图标

这篇文章将显示你如何添加信用卡,并删除部分或所有这些。

设置图像的博客帖子

从你的博客文章的第一个图像将被选为博客着陆页的特色图像。您可以通过设置你的文章选择一个不同的图像 ‘ s 节录,将用于着陆页而不是文章主要内容。

在博客中显示视频的缩略图

如果你有一个视频在你的博客文章中,将这段视频的缩略图添加到你的文章 ‘ s 摘录,它将显示在博客登陆页面。

显示多种货币

布鲁克林主题是与兼容在多种货币显示价格.

这表示,那里 ‘ s 非常重要的事情,你需要做在您试图添加多种货币支持到布鲁克林主题之前,这是唯一的主题。为你的价格正确转换,您将需要编辑代码段文件产品-网格-item.liquid 片段在你的主题要替换所有出现的此筛选器 ︰

money_without_trailing_zeros 

与那个:……

money 

警告

将货币选择器或货币切换按钮添加到您的主题是先进的自定义项不支持 Shopify.