Shopify装修教程(四):界面组件讲解(11-17)

11.可折叠内容

图片[1]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

可折叠内容模块是一种非常适合长赘述文字的展示方式,它采用展开即全览的模式,能够让界面在初始状态下保持简洁美观,避免过多的文字占据大量页面空间

当用户需要查看详细内容时,只需点击展开即可。

图片[2]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

而且,在右侧菜单中,你还可以自由选择图标,使可折叠内容的外观更加个性化和符合页面整体风格。

图片[3]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

比如,在一个知识分享网站上,对于一些长篇的文章或教程,你可以将其设置为可折叠内容。

初始状态下只显示标题和一小段摘要,用户如果对该内容感兴趣,点击展开后就能看到完整的文章内容。

同时,你可以选择一个与知识、学习相关的图标,如书本、灯泡等,作为可折叠内容的标识,让用户更容易识别和操作。

12.电子邮件注册信息

图片[4]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

电子邮件注册信息窗口是网站与用户建立联系的重要渠道之一。

这个模块只可以添加文字和固定的注册框内容,但简洁明了的设计能够让用户快速理解其功能并进行操作。

图片[5]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

例如,在一个博客网站的侧边栏或者底部,你可以放置电子邮件注册信息模块,添加一些吸引人的文字,如 “订阅我们的博客,获取最新文章和独家内容,直接发送到您的邮箱!”

然后配上一个简洁的注册框,让用户输入邮箱地址即可完成注册。

这样,你就可以通过电子邮件与用户保持沟通,定期向他们推送有价值的内容,增加用户的粘性和忠诚度

13.联系表

图片[6]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

联系表作为一个固定的模板,虽然只能更改标题内容,但它在网站中起着至关重要的作用,是用户与网站管理员或客服进行沟通的桥梁。

你可以根据网站的主题和风格,设置一个合适的标题,如 “联系我们”“客户服务” 等。

在实际应用中,无论是企业网站、个人博客还是电商平台,都需要一个清晰易找的联系表,让用户在遇到问题或有合作意向时能够方便地与你取得联系。

例如,在一个企业官网的 “联系我们” 页面,除了展示联系表,还可以搭配地图、办公时间等信息,为用户提供全面的联系信息和指引。

图片[7]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

14.视频

图片[8]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

视频模块为网站增添了多媒体元素,使内容更加丰富和生动。Shopify 支持本地视频文件上传和通过 URL 嵌入视频,其中在嵌入视频处理中,还支持自定义封面图片。

这为你提供了多种展示视频的方式。如果你有自己制作的高质量视频内容,如产品演示视频、品牌宣传视频等,可以直接上传到网站,确保视频的播放流畅和画质清晰。

而通过 URL 嵌入视频则更加灵活,你可以嵌入来自其他平台的相关视频,如 YouTube、Vimeo 等,丰富网站的视频资源。

自定义封面图片的功能也很实用,你可以选择一张吸引人的图片作为视频的封面,在用户未点击播放视频时,就能通过封面图片吸引他们的注意力,激发他们观看视频的兴趣。

例如,在一个健身网站上,你可以上传一些专业教练的健身教学视频,并设置一张展示教练健硕身材和活力动作的图片作为封面,让用户一眼就能感受到视频的价值和吸引力。

图片[9]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

15.博客文章

图片[10]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

博客文章模块点击选择之后,可以进入博客选择窗口

图片[11]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

但需要注意的是,这个板块属于 Shopify 商店后台,也就是说,不支持接入外链,而是需要你在 Shopify 后台自行添加博客文章内容。

这意味着你需要在 Shopify 的后台系统中精心创作和管理你的博客文章

例如,如果你经营一个美妆电商网站,你可以在后台撰写关于美妆技巧、新品试用、护肤心得等方面的博客文章,然后通过这个模块将相关的博客文章展示在网站的合适位置,如首页的推荐区域或者专门的博客页面。

这样不仅可以为用户提供有价值的内容,增加用户在网站上的停留时间,还能提升网站的搜索引擎优化(SEO)效果,吸引更多的流量。

图片[12]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

16.自定义Liquid

图片[13]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

Liquid 是 Shopify 创建的模板语言,它是 GitHub 上的一个开源项目,被许多不同的软件项目和公司使用

这个板块不同于之前的简单添加更改的操作,它涉及到一定的编程代码问题。

如果你具备一定的编程知识和技能,可以利用 Liquid 来实现更加个性化和复杂的功能和页面效果,我们不做赘述

17.页面

图片[14]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

页面模块是一个相当特殊的功能,添加这个模块之后,你可以在原页面中嵌入其他页面

图片[15]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程

从右侧菜单中,你可以看到,可选的页面就是 Shopify 后台中存在的页面。

这为你在构建网站页面结构和内容展示方面提供了很大的灵活性。

比如,你可以在一个产品详情页面中嵌入一个关于该产品的常见问题解答页面,或者在一个活动页面中嵌入一个报名表单页面,让用户在浏览当前页面的同时,能够方便地访问到相关的其他页面内容,而无需在多个页面之间来回切换,提升用户的浏览体验和操作效率。

图片[16]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程
图片[17]-Shopify装修教程(四):界面组件讲解(11-17)-柿哥出海教程
© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容