你应该做的第一件事
联系您的 Shopify 主题提供商,看看他们是否愿意为您添加。如果您是像我这样的开发人员,您就会知道这对他们来说是一项轻而易举的任务。但是,如果他们拒绝(就像我的那样),请继续阅读。
其他解决方案的问题
Shopify 推荐的解决方案和我在Stack Overflow上看到的答案都使用了 SVG。但是,将样式应用于 SVG 会很棘手,尤其是当您的主题提供者使用<i>元素加载图标时。
添加社会标志
这是一个高级教程。需要了解 HTML 和 CSS,建议熟悉 Shopify Liquid。
就我而言,我将微信徽标和链接添加到我们的导航中。
社交标识是如何加载的?
社交徽标(社交媒体图标)通常通过流行的图标库(例如Font Awesome)加载为矢量图标。按照标准,它们显示在页脚或移动导航的底部。
加载社交标志的主题文件
我的主题提供者 ( Venue ) 通过footer.liquid和mobile-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 )所做的那样,您还需要执行几个步骤:
你会得到这样的东西:
现在返回您的主题编辑器并将链接添加到您的微信个人资料。你会看到微信标志出现。
喜欢这篇博文吗?试用我们与您的主题集成的免费货币转换应用程序。
5 comments
This is the best method!!!
👏🏾👏🏾👏🏾👏🏾
very informative