Brooklyn主题通过代码优化页面

大家好，欢迎来到IT知识分享网。

写在前面：在动代码之前先备份一次主题！！！

这次特意使用partners账号来操作的，亲测有效。

备份完成后会显示，我们可以更改一下名字，比如在后面加上日期

今天说六个版块：

一、为产品页添加信任图标

二、删除/修改Powered by shopify 信息

三、购物车页面添加信任图标

四、通过点击banner图片跳转到详情页

五、添加购物车&购买按钮的颜色样式调整

六、更改Fotter颜色

一、为产品页添加信任图标：

打开修改代码页面：

在谷歌找到信任图标的图片然后将图片上传

上传完成后复制图片的链接

进入修改代码页面

Online Store –>> Themes –>> Actions –>> Edit code –>>product-template.liquid

Ctrl+F输入button，找到下图所标位置在其下方添加以下代码

<div> <img src=”前面拷贝的图标地址替换”></div>，点击保存，看看前端显示效果

当然如果你不想动代码，那你也可以使用插件来解决此问题：

在APP里面输入Trust Badge，选择插件使用，去年有同学分享过这个插件的使用方法，这里给你们一个传输门

为Shopify独立站添加Trust Badge安全图标

二、删除/修改Powered by shopify 信息：

Online Store –>> Themes –>> Actions –>> Edit code –>>footer.liquid

输入footer，打开footer.liquid

Ctrl+F 输入powered，找到{{ powered_by_link }}，将其删除或者更改为你想要的信息

<a href=”你要跳转的链接” target=”_blank”> 你要传达的信息 </a>

再去前端看看显示情况

三、购物车页面添加信任图标：

添加之前的效果

Online Store –>> Themes –>> Actions –>> Edit code –>>cart.liquid

找到{{ content_for_additional_checkout_buttons }}，在其下方添加

<div> <img src=”前面拷贝的图标地址替换”></div>

保存后在前端看看显示效果

四、通过点击banner图片跳转到详情页：

正常情况下，我们点击banner图片是不能跳转的，如果你想让你的banner图片能够实现点击调整到产品详情页的话，可以添加以下代码来实现

Online Store –>> Themes –>> Actions –>> Edit code –>>>slideshow.liquid>>输入img

在其下方添加以下代码：

<style>

.slide__link {

width: 100%;

height: 100%;

position: absolute;

z-index: 9;

}

</style>

<a class=”slide__link” href=”{{ block.settings.button_link }}”></a>

也可以在代码上方添加一个注释，方便之后修改的时候能找到自己调整的内容（输入注释内容，使用快捷键ctrl+?）

五、添加购物车&购买按钮的颜色样式调整：

Online Store –>> Themes –>> Actions –>> Edit code –>>>theme.scss.liquid>>拉到最底下，添加以下代码

加入购物车按钮代码：

.btn.btn–add-to-cart {

background-color: red;

border: 2px solid green;

color: white;

}

/* Hover */

.btn.btn–add-to-cart:hover {

background-color: blue !important;

border: 2px solid orange !important;

color: green !important;

}

购买按钮代码：

.shopify-payment-button__button.shopify-payment-button__button–unbranded {

background-color: green !important;

border: 2px solid red !important;

color: white !important;

}

/* Hover */

.shopify-payment-button__button.shopify-payment-button__button–unbranded:hover {

background-color: blue !important;

border: 2px solid orange !important;

color: green !important;

}

其中：

background-color=背景按钮的颜色

Solid=边框实线颜色

Color=文字颜色

里面的颜色是可以改动的

看看前端显示效果

六、更改Fotter颜色：

Online Store –>> Themes –>> Actions –>> Edit code –>>>timber.scss.liquid

在文件底部添加以下代码

.site-footer { background: #f6f6f6;}

Background=颜色（可以选一个适合你店铺的颜色）

如果你用的是付费主题，那就用不着了，很多付费主题里面是包含这些内容的。

以上~