第 181 期 优化 Shopify 图片横幅模块 点击图片直接跳转到对应的链接

点击这里查看 带字幕 视频教程    本期 YouTube 链接(免登录观看 4K)

额外推荐

第 182 期 Shopify 促销商品显示节省了多少钱,更直观,促进客户下单购买


中秋节和国庆节很快即将到来,提前祝大家节日快乐。

本期教程分享挺多人问过的,如何实现点击 Banner 图片直接跳转。

示例网站    所用图片

为什么要这样做

  • 相比按钮,图片点击区域更大,更便于引导用户访问
  • 按钮的样式或者位置不一定喜欢,又不会通过代码修改
  • 可以让设计师自由创作,随意设置 CTA 位置

如何实现

参考视频中的原理讲解,添加代码设置链接即可

<a href="" style="z-index: 3;" target="_blank">

示例:

<a href="https://shopify2006.com/" style="z-index: 3;" target="_blank">
</a>

提示:如果有设置二级菜单,则建议不要在首页 Header 下方使用修改后的图片横幅模块,避免桌面菜单被遮挡。比如可以在 Header 下方使用轮播图(幻灯片)模块,而在 Landing Pages 着陆页中其他位置使用修改后的图片横幅模块,这样既可以实现点击图片直接跳转,又可以避免菜单被遮挡。

关于 Craft 添加之后移动端不显示图片

有同学反馈 Shopify Craft 主题添加之后,移动端不显示图片,测试发现只需要在图片横幅的模块设置中,拉到底部,取消勾选 "在移动设备上显示容器即可",示意图:

Shopify Craft 主题在移动端显示图片

解决移动端菜单以及搜索框被遮挡

以下内容只有授权的 SVIP 用户才能查看

目前已有 302 位 SVIP, 如果你还不是

可微信私聊: Shopify2006 或 扫码 ↓

Shopify2006_Wechat

别人能学会的, 你也能会

来自 Shopify 官方的介绍

内容标签:   #B站教程,   #主题优化,   #主题开发,   #店铺装修,   #提升转化