首页 技术教程 Shopify横幅图片跳转链接怎么添加

Shopify横幅图片跳转链接怎么添加

Shopify横幅图片跳转链接怎么添加?商家可以在image-banner.liquid中添加有关链接设置代码即可实现,对于不熟悉该操作的Shopify用户,可以通过阅读下文了解Shopify横幅图片添加跳转链接的操作指南,以帮助大家进一步优化Shopify商店的用户体验,提高独立站的转化率和停留时间。

一、Shopify为什么要添加横幅图片跳转链接

1、相比按钮,图片点击区域更大,更便于引导用户访问。

2、按钮的样式或者位置不一定喜欢,又不会通过代码修改。

3、可以让设计师自由创作,随意设置 CTA 位置。

二、Shopify横幅图片跳转链接怎么添加

点击复制以下代码,在 image-banner.liquid 中搜索:

在 image-banner.liquid 中搜索有关代码

添加代码设置链接即可:

添加代码设置链接

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

三、Shopify独立站其他设置问题

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

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

勾选在移动设备上显示容器

2、解决移动端菜单以及搜索框被遮挡(旧版主题,新版无此问题)

(1)解决移动端菜单被遮挡

首先在上方链接中添加一个 id,添加后的代码效果:

添加后的代码效果

其次在 Snippets 文件夹 header-drawer.liquid 文件底部添加:

在header-drawer.liquid 文件底部添加的代码

(2)解决搜索框被遮挡

在 assets 文件夹~ details-modal.js 中,搜索onSummaryClick,并在在函数中添加:

解决搜索框被遮挡添加的代码

示意图:

解决搜索框被遮挡添加代码

搜索close(focusToggle =true),之后在函数中添加:

在close(focusToggle =true)函数中添加的代码

示意图:

解决搜索框被遮挡第二次添加代码

推荐阅读:

《2025年Shopify平台选品预测》

《什么是Shopify主题透明Header效果?》

《Shopify Simple模板设置图文教程》

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
为您推荐
FastMoss
FastMoss大盘数据怎么用?TikTok类目趋势与价格带分析教程
FastMoss大盘数据可以查看TikTok市场的商品销量、类目销售表现及价格带分布。卖家在确定选品方向时,可以先了解目...
卖家精灵MCP
豆包工作接入卖家精灵MCP教程 自动安装与手动配置步骤
豆包工作支持通过连接器接入卖家精灵MCP,在任务中调用卖家精灵的查询工具。使用时,可以复制卖家精灵提供的安装文案,交给豆...
FastMoss
FastMoss新品榜怎么用?TikTok新上架商品筛选与数据查看教程
FastMoss新品榜可以按商品上架时间查看候选产品,并结合分类、店铺类型等条件缩小范围。榜单列有商品价格、所属店铺、佣...
FastMoss
FastMoss竞店分析怎么做?店铺销量、商品与达人查看教程
FastMoss的店铺搜索和店铺详情功能,可以用于研究TikTok竞店。找到目标店铺后,可以继续查看销售趋势、商品结构、...
卖家精灵
卖家精灵怎么看关键词搜索趋势?淡旺季与需求变化分析教程
卖家精灵的“关键词挖掘”可以查询关键词及相关词的月搜索量,并进一步查看历史搜索趋势。准备选品、安排备货或研究推广时间时,...
返回顶部
科灯导航