如何在Shopify网站产品页面中插入一个更漂亮的表格

新注册Shopify账户可获得 14 天免费使用优惠 – 立即注册账户获取

Shopify编辑器中自带的表格插入功能,只支持插入表格,以及对表格行和列的添加删除操作,如下图,点击表格图标之后,可以Insert Table在产品描述中插入表格,然后再点击Insert Row或者Insert Column插入更多的行或者列。

如何在Shopify网站产品页面中插入一个更漂亮的表格

至于表格的样式,继承的则是你的Shopify主题中对表格样式的设置。如下图,添加了一个表格之后,在移动端网站产品页面前台,可以看到表格的显示样式。(因为目前网站移动端流量占主导地位,因此在查看表格显示样式的时候,务必要查看移动端的显示样式,以保证足够好的用户体验。)

如何在Shopify网站产品页面中插入一个更漂亮的表格

 

Shopify自定义产品描述中的表格样式

你如果懂CSS的话,可以通过修改主题的CSS文件来自定义表格的样式。如果你不懂代码的话,可以借助第三方所见即所得在线编辑器工具来编辑表格的显示效果。我试用了几个在线编辑器之后,推荐 https://htmlg.com/html-editor/ 这个编辑器。

如下图所示,打开编辑器之后,点击插入表格选项,就可以在编辑器中按照你的需要插入表格,你可以在左侧编辑器中编辑表格的内容以及显示的样式,编辑器右侧会实时显示左侧表格所对应的HTML代码。

点击表格之后,在表格下方会有表格属性以及表格插入行,插入列,合并单元格选项等等。点击表格属性,在General选项卡中,你可以调整表格的宽度,高度,单元格间距,表格以及单元格边框,单元格文本居中还是居左右。在Advanced选项卡中可以设置边框的背景颜色,边框颜色,边框的样式。(关于颜色代码的获取可以使用Colorzilla直接获取任意网页内容的颜色,或者使用 https://htmlcolorcodes.com/ 获取颜色代码)

在上面的编辑器中设置好表格之后,将右侧的代码复制下来,然后在Shopify产品描述编辑选项中,点击如下图所示的HTML选项,然后将复制的代码粘贴到合适的位置,保存即可。

按照个人的经验,在设置表格宽度的时候注意一点。如果你的表格列不是很多,在移动端上能够很完美的展现出来,如下图所示,那么建议在设置表格宽度的时候,选择百分比值“100%”。设置100%的意思为“自适应”。表格在实际显示过程中,会依据屏幕的大小来自动调整表格的宽度。

但是如果你的表格内容有很多列,单个屏幕撑不下那么多列内容的时候,如果表格宽度还是选择100%,那么表格内容则会因为强制性的自适应全部显示在屏幕上,而导致表格内容杂乱,影响用户体验。此时建议设置表格宽度为具体的值,例如500px,而不是100%。这样无论屏幕大小,表格都是以500px宽展示的,当屏幕无法完全展示表格内容时,会自动实现表格左右拖动的显示效果。

如下图图2图3和图4的对比。

图2只有3列内容,使用宽度100%自适应,表格会依据屏幕大小自动调整单元格的间距。图3和图4,都是9列内容。图3使用了固定宽度500PX,虽然屏幕上只显示了一部分数据,但是实际显示效果是,表格内容是可以单独左右拖动查看的。而图4使用了自适应100%宽度,系统会将表格所有的内容都呈现在屏幕上,因此就会出现表格中单词换行的现象,影响客户的阅读体验。

当然,除了自己手动DIY表格显示样式之外,你也可以安装Shopify APP,更轻松的自定义表格的样式。我用“Table”这个关键词搜索了下,找到了两款APP,分别是TablePress,和DescriptionTable。

如果你要使用APP的话,从价格和评价上来看,我推荐TablePress,3天免费使用,费用1.99美金每月。40个5星好评。而DescriptionTable没有试用期,一次性付费29.99美金,3个评价4.4星,从评价内容上看,DescriptionTable的售后服务做的不到位。

再或者,花5美金在Fiverr上找个人帮你写个代码也是可以的。

文中提及的工具已经收录到了导航网站中,你可以进入导航网站查看更多实用工具。

未经允许不得转载:歪猫跨境独立站博客 » 如何在Shopify网站产品页面中插入一个更漂亮的表格

赞 (3)
新评论邮件通知
提醒
guest
0 评论
Inline Feedbacks
View all comments
  • 关注公众号 “ WaimaoB2C ” 第一时间获取网站最新内容,了解跨境电商独立站圈内圈外每天发生的那些事儿,和20000+独立站卖家共同成长。

    $$$$$$$$ 每月 1 本书 $$$$$$$$
    2020年8月推荐
    <The Truly Ultimate Guide To 10X Your Shopify Store> 

    公众号回复信息“ 10X ”获取本电子书下载链接。不想关注公众号的直接Google搜索书名,在搜索结果中同样可以获得电子书下载链接地址。
    该电子书不是“葵花宝典”,所以不能指望靠它“独步武林”,不过个人觉得对独立站新手来说还是有非常大的帮助的。对老手来说,实用性没那么大,不过如果电子书中有那么一两点对你的网站运营有所启发,我觉得也算是比较值了。

    *推荐亚马逊购买正版Kindle电子书或纸质书籍,获取最佳阅读体验。本分享来自于互联网以及网友上传,网站内所提供的下载链接均为站外链接,版权归原作者以及开发商所有,网站本身不存储相关资源文件. 如侵犯到版权方,请发送邮件到 hello@waimaob2c.com,站长会在第一时间删除并向您道歉。

  • Shopify 新卖家账户注册注意事项-非常重要

  • Shopify新卖家注册账户前请务必认真阅读以下注意事项:

    注册前关闭翻墙工具; 不建议使用 QQ,126,163邮箱注册账号
    打开Shopify官网 WWW.SHOPIFY.COM 获取 14 天免费使用
    注册账户时地址信息真实有效; 缴纳月租前关闭翻墙工具