跳到内容

Country

Language

Best method to add additional social logos to your Shopify theme

向您的 Shopify 主题添加其他社交徽标的最佳方法

你应该做的第一件事

联系您的 Shopify 主题提供商,看看他们是否愿意为您添加。如果您是像我这样的开发人员,您就会知道这对他们来说是一项轻而易举的任务。但是,如果他们拒绝(就像我的那样),请继续阅读。

其他解决方案的问题

Shopify 推荐的解决方案和我在Stack Overflow上看到的答案都使用了 SVG。但是,将样式应用于 SVG 会很棘手,尤其是当您的主题提供者使用<i>元素加载图标时。

添加社会标志

这是一个高级教程。需要了解 HTML 和 CSS,建议熟悉 Shopify Liquid。

就我而言,我将微信徽标和链接添加到我们的导航中。

社交标识是如何加载的?

社交徽标(社交媒体图标)通常通过流行的图标库(例如Font Awesome)加载为矢量图标。按照标准,它们显示在页脚或移动导航的底部。

页脚上的社交徽标示例

加载社交标志的主题文件

我的主题提供者 ( Venue ) 通过footer.liquidmobile-drawer.liquid加载社交标志,这两者都可以在主题的Sections文件夹下找到。我认为如果其他主题提供商遵循Shopify 标准,这将是相同的。

要访问您模版的Sections文件夹,请导航至您的 Shopify 控制面板。从这里转到:在线商店 > 操作 > 编辑代码。

加载社交标识的代码

您可能会在footer.liquid中看到如下代码:

添加到 settings_schema.json

在您的settings_schema.json中,添加链接到您要添加的社交媒体配置文件的选项,这样它就会显示在主题编辑器中。例如:

现在,链接到您的微信个人资料的选项将显示在主题设置下的主题编辑器中。

主题编辑器中的社交媒体设置

<i> 元素

现在,如果您熟悉前端开发,您可能已经知道图标通常是通过<i> (惯用的文本元素)加载的。您还会知道大多数开发人员使用Font Awesome来加载它们。

如果您在<i>元素中看到“fab”(例如, <i class="fab fa-instagram"></i> ),那么您的主题开发人员会直接通过Font Awesome加载徽标,并且很可能会加载整个库(顺便说一句,这不是最佳实践,因为我们不应该为几个图标加载整个库)。然后您可以通过搜索相应的品牌图标来添加社交图标(例如, <i class="fab fa-weixin"></i>用于微信)。

但是,如果您的主题开发人员采用硬核方法 - 上传他们自己的图标字体 - 就像我们的( Venue )所做的那样,您还需要执行几个步骤:

  1. 使用IcoMoon等工具为您想要的社交图标创建迷你字体文件
  2. 将您的字体库添加到您的 Shopify 主题(请参阅本教程或下面有关将字体添加到您的 Shopify 主题的代码块)。

你会得到这样的东西:

现在返回您的主题编辑器并将链接添加到您的微信个人资料。你会看到微信标志出现。

页脚中的社交媒体图标

喜欢这篇博文吗?试用我们与您的主题集成的免费货币转换应用程序

Older Post
Newer Post

5 comments

  • This is the best method!!!

    XY
  • 👏🏾👏🏾👏🏾👏🏾

    Ty
  • very informative

    Tommy

Leave a comment

关闭 (esc)

弹出窗口

使用此弹出窗口嵌入邮件列表注册表单。或者将其用作带有产品或页面链接的简单号召性用语。

年龄验证

单击 enter,即表示您已达到可以饮酒的年龄。

Search

购物车