shopify官方主题排名第1转化率最高免费主题Brooklyn配置及优化

b1gc8v

哎呀累死了这周一起始上传了3天制品最终把制品上传完了，看“连载龙详富博客shopify开店教程之六shopify制品发布”原文，发布制品的时候shopify前台用的免费主题Debut效果不太好看，不爱好，为此想换个主题，综合大部分资料晓得shopify官网主题排名第1的免费主题是Brooklyn布鲁克林，

shopify免费主题Brooklyn效果

据述亦是免费主题中转化率最高的shopify主题，为此我亦把咱们跨境电商机构老板要我做的功能性服饰外贸商城模板切换成这款免费shopify主题Brooklyn以下是我实质上循序渐进的操作图文记录，对一样第1次用shopify的网友可能有点帮忙

免费shopify主题Brooklyn配置后台：

添加安装免费shopify主题Brooklyn非常简单，在shopify官网市场里面有60款付费主题，10款免费主题，其中就有运用量最大和转化率最高免费主题Brooklyn如图

shopify免费主题Brooklyn下载安装

登录shopify后台点击Add theme按钮就能够添加免费主题Brooklyn到自己的后台，但还不可直接运用，还需要在掌控面板中发布Brooklyn主题，在shopify后台主题模板管理页面有2大模块，一个是current theme便是我原来的网站是默认的免费主题Debut在Actions中点击发布就能够将网站切换到Brooklyn主题了，另一一个more theme模块，点击定制Customize按钮就能够进入免费shopify主题Brooklyn自定义设置后台shopify Theme Customize，如图

shopify免费主题Brooklyn设置后台

左侧边栏分为2个部分，一个是Sections功能，一个是theme settings功能，sections功能负责的重点是网站页面的布局以及各个版块内容的设置。Theme Settings功能负责的是网站框架的颜色设置，字体设置，社交网络设置，购物车网页设置以及结款页面的设置。大部分shopify模板支撑shopify的section模块功能的，在设置上所见即所得，右边将立即看到你左边做的设置的效果。要添加模块点击sections项下的Add Section按钮，对板块拖动进行页面的排序。shopify主题之间的设置是相互独立的，设置好Brooklyn主题后，安装并激活新的主题，新主题需要从新进行页面排版，颜色字体的设置，对新主题的设置不会影响Brooklyn之前的设置，从新激活Brooklyn后表示的还是安装新主题之前的样子。

shopify主题Brooklyn优化加强转化率：

Brooklyn免费主题是shopify运用量最多的免费shopify主题亦是转化率最高的主题，但咱们还是能够在Brooklyn原来主题的基本上做进一步的从代码层级对Brooklyn优化以加强网站转化率！Brooklyn的优良有：免费；支持slide-out cart；移动端一样支持侧边滑出购物车功能，整体风格简洁美丽。对Brooklyn进行代码方面的操作便是Edit Code操作，先对shopify主题进行备份，打开themes>actions>duplicate而后能够完成主题的备份了，显现备份copy of "theme name"主题了，如图一所示

优化shopify免费主题Brooklyn代码

shopify主题Brooklyn优化内容如下：

修改一：修改网站的菜单栏目为顶部固定菜单栏，便是该CSS效果就能够了，打开文件夹Asset下的thme.scss.liquid文件，将以下代码加入到文件末尾，而后保留文件。

shopify顶部固定菜单代码

尤其是手机版效果，固定在顶部了用户体验好了非常多。

修改二制品页面下方的关联制品举荐功能，Brooklyn主题在制品页面默认是无制品举荐功能，虽然能够买关联的shopify制品举荐插件，然则那要花费，还有兼容性的问题，打开template文件夹下面的product.liquid文件，找到如下代码:{% section ‘product-template %}在这一行代码下方插进如下代码：{% secton related-products %}保留文件，而后打开setion文件夹点击add a new section新建命名文件名叫作为related-products删除里面已知内容将如下代码黏贴上去保留。 如图所示。

shopify免费主题Brooklyn制品举荐功能代码

完成上图代码后shopify支持在制品页面表示关联制品功能了，下一步还要激活这一功能，在shopify代码编辑后台左侧栏看到related product选项，选取show related products保留完成设置。后面的Brooklyn优化内容能够再美好购物车按钮，这个只是购物车的CSS效果修改，看你自己想要什么效果的购物车了，就不消讲了。