您好,欢迎来到鲸跃跨境电商
会员登录

你现在的位置:首页 > 独立站运营 > Shopify建站 >

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

来源:未知浏览: 阿彪
分享到
  • 微信好友
  • QQ好友
  • QQ空间
  • 腾讯微博
  • 新浪微博
  • 人人网

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

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

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

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

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

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

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

温馨提示上述内容为代理转载或编者观点,不代表鲸跃跨境电商意见,不承担任何法律责任。如侵权请联系删除。

发表评论
验证码:点击我更换图片
最新评论

热门课程
热点新闻


跨境电商发展如何?

跨境电商如何做?

课程适合我吗?

我适合做跨境电商吗?

立即咨询老师
跨境电商独立站入门特训资料领取!
PayPal账号被限制的原因?

立即预约

导师一对一指导 让跨境创业更简单
24小时热线:

159-3718-0091

在线咨询在线咨询