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

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

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

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

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

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

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

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


先看前后效果
#修改了导航颜色 #bottom_box {background: #480099;}

#导航下拉分类字体大小 #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;}

#隐藏了底部订阅 #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网站后台:【配置】【开发者选项】【自定义代码】


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

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

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


通过这样的方式可以准确的找到对应的元素样式,然后修改即可。

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

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

未经允许不得转载:跨境电商独立站自学教程网 » 如何修改Shopyy模板样式基础教程

赞 (4)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册