如何修改Shopyy模板样式基础教程

不少客户会问Shopyy模板能不能支持修改定制的,理论上是可以支持的,但是为了安全起见我们目前没有开放模板编辑入口。

当然也不是完全限制死的,其实有些卖家有技术基础的就懂修改,用我们Shopyy后台自定义代码修改样式,比如我们有2种方式可以实现简单的修改前端页面的主题颜色,字体,文本大小,隐藏不显示的内容等等。

第一种是通过嵌入代码的方式修改CSS样式(各版本都开放)。

第二种是自定义皮肤的插件实现修改,当然这个插件使用会有一定的门槛(需要企业版才能安装插件,需要有前端技术)。

今天我这里讲第一种方法,第二种咱们不讲(因为我也不会)。

看了我这个文档小白都会成为前端技术,当然只是基础的哈,咳咳。 (不一定适用别的系统)

废话不多说,直接用案例说话:https://qijianban.ishopyy.com/ 这个我本人测试的站点,安装模板对应的是 https://s3050.demo.ymcart.com/

如何修改Shopyy模板样式基础教程
先看前后效果
#修改了导航颜色 #bottom_box {background: #480099;}
如何修改Shopyy模板样式基础教程
#导航下拉分类字体大小 #header_box .category_box .category_1 li a { font-size: 16px;}
#积木模板标题居中 .block_title { text-align: center;}
#底部帮助中心背景色 #bottom_box .link dt {color: #fff;font-size: 19px;}
#帮助中心的字体颜色#bottom_box .link dd > a {color: #fff;}
#帮助中心列表加线条#botto m_box .link dl { border-right: 1px solid #ccc;}
如何修改Shopyy模板样式基础教程
#隐藏了底部订阅 #bottom_box .link dl:nth-child(5) {display: none;}
#banner标题背景色.block_items_banner .block_banner_content {background: #d788345e;}
.block_items_banner .block_banner_content h4 {color: #000;}
嵌入以上修改代码操作路径
SHOPYY网站后台:【配置】【开发者选项】【自定义代码】
如何修改Shopyy模板样式基础教程
如何修改Shopyy模板样式基础教程
如何修改Shopyy模板样式基础教程

以上是加代码方式,那如何找到要改的地方样式呢?

第一是打开网站首页,按浏览器F12开发者模式下

第二是选取页面元素定位到对应的元素样式

如何修改Shopyy模板样式基础教程
通过这样的方式可以准确的找到对应的元素样式,然后修改即可。

在改之前也可以先注册测试一下OK的话,再吧代码复制到自定义代码,测试注册链接https://accounts.shopyy.com/h-user-register.html?invite=sucs

以上方式都不会的话,可以找我,手把手一对一指导。

赞赏

如何修改Shopyy模板样式基础教程微信赞赏如何修改Shopyy模板样式基础教程支付宝赞赏

原创文章,作者:小稣童,如若转载,请注明出处:https://www.snswhy.com/archives/3700.html

(0)
上一篇 2021年5月13日 下午2:00
下一篇 2021年6月1日 下午1:36

相关推荐

发表回复

登录后才能评论