跳至主要内容

Opencart模板导航栏和商品优化

2020年8月购买了一个Bluehost服务器，用Opencart搭建了一个电商网站（CDCLOTH.com），当时浅浅的研究了一下Opencart这个开源程序部署好后，有哪些地方需要优化，当时将所做的部分优化记录在了有道云笔记上，今天整理发布到个人博客，分享给有需要的朋友。

1. 类目栏背景色和字体颜色调整
刚搭建完成的网站前端页面一级类目栏背景色是蓝色，字体是黑色，由于网站是售卖服装类，蓝色背景色显得不搭，所以需要调整为黑色。所以我们需要在前端找到这个section code所在位置和引用的css字段名称，然后需要去后台源码中找到对应code位置和引用的css字段，并理解code需要如何优化才能呈现想要的效果。

http://xxxx.com/catalog/view/theme/default/stylesheet/stylesheet.css
对应源文件位置：catalog> view> theme> default> stylesheet> stylesheet.css
#menu { background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; border-color: #1f90bb #1f90bb #145e7a; min-height: 40px; } 更改为： #menu { background-color: #363636; background-image: linear-gradient(to bottom, #444444, #222222); background-repeat: repeat-x; border-color: #222222 #222222 #000000; min-height: 40px; }
二级类目同上存在类似问题需要调整，需要优化二级类目展开后背景色及Show All Category的字体颜色。
.dropdown-menu li > a:hover { text-decoration: none; color: #ffffff; background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; } 更改为： .dropdown-menu li > a:hover { text-decoration: none; color: #ffffff; background-color: #363636; background-image: linear-gradient(to bottom, #444444, #222222); background-repeat: repeat-x; }
#menu .see-all:hover, #menu .see-all:focus {
text-decoration: none;
color: #ffffff;
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
}
更改为：
#menu .see-all:hover, #menu .see-all:focus {
text-decoration: none;
color: #ffffff;
background-color: #363636;
background-image: linear-gradient(to bottom, #444444, #222222);
background-repeat: repeat-x;
}
#menu .btn-navbar {
font-size: 15px;
font-stretch: expanded;
color: #FFF;
padding: 2px 18px;
float: right;
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
}
更改为：
#menu .btn-navbar {
font-size: 15px;
font-stretch: expanded;
color: #FFF;
padding: 2px 18px;
float: right;
background-color: #363636;
background-image: linear-gradient(to bottom, #444444, #222222);
background-repeat: repeat-x;
border-color: #222222 #222222 #000000;
}
2. 首页商品列表标题与价格字体颜色调整
首页列表商品标题字体颜色优化，这里有一个鼠标聚焦与释放的颜色动态变化的效果。
http://xxxx.com/catalog/view/javascript/bootstrap/css/bootstrap.min.css
对应源文件位置：catalog> view> javascript> bootstrap> css> bootstrap.min.css
a:focus,a:hover{color:#23527c;text-decoration:underline}
更改为：
a:focus,a:hover{color:#222222;text-decoration:underline}
a{color:#337ab7;text-decoration:none}
更改为：
a{color:#111111;text-decoration:none}

首页列表商品价格字体颜色优化，

对应源文件位置：catalog> view> theme> default> stylesheet> stylesheet.css

促销价price从灰黑色#444调整为红色#ff0000

.product-thumb .price {

color: #444;

}

更改为：

.product-thumb .price {

color: #ff0000;

} 

原价price-old从浅灰色#999调整为灰黑色#363636

.product-thumb .price-old { color: #999; text-decoration: line-through; margin-left: 10px; } 更改为： .product-thumb .price-old { color: #363636; text-decoration: line-through; margin-left: 10px; }

3. 商品列表页商品简短描述区域调整
服装类商品如果在编辑上架商品时商品描述没有什么特色个性化的内容，那就是简单套用模板写的相似度很高的商品描述，这样的商品描述在商品列表页重复呈现给用户，体验非常不好，所以需要将这部分section整体移除。
/catalog/view/theme/default/template/product/ 下 category.tpl 文件
将这段code移除后效果并没有达成，内容虽移除了，但是空白呈现整个section，还需要继续从code中找到需要优化的地方。
    /catalog/view/theme/default/stylesheet/ 下 stylesheet.css 文件
    最终达成了想要的列表页商品呈现效果。
    4. 商品详情页内容呈现调整
    搭建好的网站商品详情页呈现效果非常不理想，左侧图片区域宽度太大，但是高度又很低，导致图片被挤压仅占比很小的区域，右侧商品标题及描述区域宽度太窄，内容呈现样式被分割成多行，所以我们需要优化左右两侧内容的宽度及高度比例。个人习惯从前端code中找到优化code的地方进行优化，实际这里可以在后台给到功能区域调整，所以有两个方法可以达成想要的效果。
    方法1:
    /catalog/view/theme/default/template/product/ 下 product.tpl 文件
    方法2:
    5. 自定义类目导航栏内容呈现
    由于后台menu只能选择创建的category，如果我想把about和contact内容也放类目导航栏，需要在源码中找到添加自定义code的地方。
    对应源文件位置：catalog> view> theme> default> template> common > menu.twig
    找到上面menu的位置，然后将自定义的内容code添加在适合的位置。
    6. 自定义footer内容呈现
    通常开源电商系统或在线提供Sass建站服务，搭建的网站页脚都是{{ powered }}自动调取内容，百分百都是链接到服务商网站，所以我们需要优化页脚内容，避免链向与我们业务无关的网站。
    <p>{{ powered }}</p> 
    更改为： 
    <p>© 2020 <a href="https://www.cdcloth.com/">CDCLOTH</a>, Powered By <a href="https://www.wfqcj.com/">WFQCJ</a> </p>
    标签：

    评论

    发表评论

    此博客中的热门博文

    高质量外链 - YouTube.com

    2024年3月14日，重新整理一下YouTube这篇文章，把这篇作为高质量外链系列文章也算是一个不错的开头，YouTube网站权重可以说是最高的了，MOZ给到的PA和DA全是100，能积累这么高的权重，这和YouTube是重量级的社媒平台不无关系，我所在的跨境电商行业不用说了，只要有网站基本上都会创建一个YouTube频道，并在电商网站上挂上对应的几乎是全站页面覆盖的YouTube频道链接，且大部分都会是Dofollow属性链接，只有懂得SEO的且懂得Code的可能会调整成Nofollow属性链接，但很多提供搭建企业站或电商站服务的Sass平台是无法修改Code的，所以这些一定是Dofollow属性链接。那衍生到各行各业只要有创建YouTube频道需求的，都会在主站上挂对应的YouTube频道链接，且几乎和电商网站类似全站页面覆盖，自然而然YouTube的外链来源和数量极为丰富。 YouTube.com 网站权重 PA: 100，DA: 100，Spam Score: 3% 大家都会使用的YouTube来源的外链的建设如下： 1. 使用YouTube频道页面通过设置中添加基本信息来建设外链，早期的YouTube频道增加的链接是Dofollow属性链接，目前更新了版面且链接变为了Nofollow属性链接。 基本信息设置入口如下： 新创建的频道能继承的权重就很高，PA 57，DA: 100，Spam Score: 3%，就算是Nofollow属性链接也值得做，只要给这个频道做一些高质量外链，权重增长会非常迅速。 2. 使用YouTube的发布Video内容通过description来建设外链，不过这里的链接也是Dofollow属性链接，同频道首页一样能继承的权重就很高，PA 57，DA: 100，Spam Score: 3%，同样只要给这个视频链接做一些高质量外链，权重增长会非常迅速。 接下来展示的内容可以说没有多人会使用，此类外链通过MOZ插件大家可以看出是高质量的外链，而且可以无限制生成不一样的YouTube唯一的链接（可以仔细对比图片确认），且是Dofollow属性链接。
    发表评论
    阅读全文

    出口跨境电商的结缘与梦想

    90后的我即将步入30岁了，从2011年11月初份实习开始接触了英文SEO，当初的实习公司主要生意是国外游戏虚拟币交易平台，当时WOW(World of Warcraf)非常火，我所在的创嘉科技几乎包揽了所有搜索量比较大关键词的Google首页排名，其中zyy.com非常强势长期包揽很多搜索量级比较大的关键词Google第一的排名，可惜这个网站已经无法访问了；另外一个主推的游戏是RS(Runescape)，其中4rsgold.com非常强势长期包揽很多搜索量级比较大的关键词Google第一的排名，截止今天（2019年12月18日）RS Gold,Runescape Gold等关键词在Google依然排名第一（ RS Gold Google排名点击查阅 ， Runescape Gold Google排名点击查阅 ）。 2012年3月中旬离开离开了丽水，来到了杭州这座美丽的城市，虽然仅在丽水待了4个月多，但是不论在工作上，还是生活上，都是身心愉悦的状态。在工作上由于刚毕业，很想学一技之长，每天都在专研SEO，几乎每天晚上都会在公司待到12点左右才回公司宿舍，至今仍很感谢那段时光的努力，但是似乎再也找不到当初的那种努力的状态了，希望未来还能找得回来。在生活上，部门同事非常友好，会经常一起做公司大巴去市里面逛街，或者大家一起爬白云山，然后回来的路边吃烧烤，不过每次都是部门经理（ 凡哥 ）请客，所以我对凡哥的印象是没有官架子，和部门所有同事都是朋友，而且是愿意做出自我牺牲让大家快乐。我的这个 wfqcj.com 的域名也是2012年2月27日在丽水时购买，至今已经走过了8年，从最初的在淘宝购买空间服务用WordPress搭建个人博客，中间也写了一些文章，但是都没有做到有始有终，还有觉得以前写的那些都是太浅层次了，并没有什么价值，所以也就没有备份，或者找回，自我的意识里有一种要放弃过去，后来也就没有再购买空间服务啥的，而是直接将域名绑定到了Blogger，但是一直未有想写点什么的念头，可能是年龄的原因，想留下点什么记录，所以取了一个“ 出口跨境电商的结缘与梦想 ”主题，希望能带着梦想重新出发，排除一切阻碍向着梦想实现自我，成就自我。 2012年3月中旬，我来到了杭州，当时住在一个大学室友那里，第二天我找了附近的一个网吧，开始疯狂的投简历，然后记录这些公司的地址，
    发表评论
    阅读全文

    2016-2017西安澳鹏用户(会员)营销顾问-案例

    2016年9月12日下午第一次去萧山机场，也是人生第一次坐飞机，我记得是晚上里11点多到西安咸阳机场，当时的末班机场大巴没有了，已经不记得当时是怎么去的酒店了。和澳鹏的缘分还要向前追溯，2015年11月份的时候他们的人事当时联系到了我，想挖我但是西安实在太远了，所以当时就婉拒了，2016年8月末换了澳鹏负责人力资源和投资的VP(王总)再次联系了我，当时我已从执御离职自己在搞Amazon，那时Amazon遇到问题在缓慢恢复期也不是很忙，所以答应可以去过看看有没有合作的可能，然后他们给预定了来回机票和酒店。 第二天去了澳鹏公司，刚过去和王总聊了一段时间，后来介绍另外一个人和我沟通，居然是SEO名人乐思蜀，当时蛮诧异的，因为乐思蜀从我接触SEO就在当时公司的培训或分享资料上经常可见，在我去实习之前他当时给创嘉科技做过系统的SEO培训，接受他培训的同事对他评价都很高，所以更加触发了我想认识此人的兴趣，没想到这次西安之行能偶遇，还在一起沟通了一下午，深入聊过之后他对我的印象很好，然后和澳鹏CEO卢总也沟通了一段时间，当然他们极力想我来加入他们，但是西安对我来说太远了，也不是我想工作的城市，所以后来接受了我的给澳鹏提供会员营销顾问的服务，第一天晚上6点左右结束了沟通，我在考虑回酒店时转去了大雁塔，来欣赏一下我当时拍摄的照片。 大雁塔广场，一下车就感觉很有地方特色 大雁塔音乐喷泉，当时去的时候比较晚，已经没有音乐喷泉了，当时了解到的是大雁塔的音乐喷泉是亚洲最大的音乐喷泉，所以2018年再次去西安时欣赏了一次，感觉还不错哦！ 一位老爷爷在操作的西镜，一场可以3-5个人对着镜孔看老爷爷操纵人偶表演。 大雁塔玄奘铜像正对马路对面景色 第三天继续和卢总沟通了一段时间，然后他组织了多人会议，我分享了关于会员营销方案落地时需要技术和数据部门需要提供哪些支持(我印象很深刻，他们没有太强的数据思维，所以让我很诧异，我之前一直以为外面的公司和执御一样很重视数据，业务落地与提升都需要结合数据分析)，最后沟通了一下提供顾问服务的服务费，一切都谈好后我就打车去了机场，当天晚上8点多回到了杭州，再过一天就是中秋节了，他们应该也是这样考虑的，所以给我买了14号回杭的机票，回来拍了几张飞机的照片当时已下了小雨。 回来后重新梳理了一下在执御这几年会员营销的经验，然后整理出了一份完整会员营销方案，按大类分成了5个
    发表评论
    阅读全文