假如你会 `CSS` , `HTML` , `JS` 三件套,那么修改 `Shopify` 代码将不会太难(毕竟一个模板中的代码量还是挺多的,除非深入研究了代码,不然改起来还是会比较麻烦的)。
但挺多玩家是不会这三件套的,修改代码来达到添加页面元素会比较困难。
但如果我们找到了一个不错的站点,然后想模仿的话,事情就会简单很多。
以该站点的 `BUY ON AMAZON` 按钮为例
### 3.1 检查页面元素
#### 3.1.1 对你想要模范的元素,右键,检查。或者按 `F12`
![image-20200920095306956](https://gitee.com/NilolaChen/photo/raw/master/img/20200920095308.png)
#### 3.1.2 使用小箭头快速锁定想要的元素:点击小箭头,然后把速表移动到想要的元素上,就能快速地看到元素的相关信息。点击元素后,右侧检查页面就能锁定这个元素
![image-20200920095353097](https://gitee.com/NilolaChen/photo/raw/master/img/20200920095354.png)
### 3.2 抄下它的代码
#### 3.2.1 HTML 代码
![image-20200920092421443](https://gitee.com/NilolaChen/photo/raw/master/img/20200920092422.png)
HTML 代码是不方便复制的,因为上面会加上很多其他的信息。我们用手打就好了
````
<a class="">
<b> BUY ON AMAZON </b>
</a>
````
#### 3.2.2 CSS 代码
看到这里有个 `background-color`,应该是背景颜色。
![image-20200920092532396](https://gitee.com/NilolaChen/photo/raw/master/img/20200920092534.png)
点击蓝色的复选框,可以发现,按钮黄色不见了。
![image-20200920092735832](https://gitee.com/NilolaChen/photo/raw/master/img/20200920092737.png)
那我们就把整个代码抄下来
```
<a class="my-amazon-button">
<b>BUY ON AMAZON</b>
</a>
.my-amazon-button {
background-image: url(none);
background-repeat: no-repeat;
border-style: solid;
margin-top: 3%;
margin-bottom: 0px;
padding-top: 14px;
padding-left: 39%;
padding-bottom: 14px;
padding-right: 39%;
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-color: #000;
border-style: solid;
border-radius: 2px;
min-height: 0px;
background-color: rgba(243, 203, 103, 1);
text-align: center;
text-decoration: none;
}
```
### 3.3 添加链接
添加链接这一步非常关键,也是最难的。但我们有一个取巧的方法。
#### 3.3.1 使用 `Metafields Guru` 应用
![image-20200920093551971](https://gitee.com/NilolaChen/photo/raw/master/img/20200920093553.png)
然后点击我们想要的对象。以为每个产品的链接都是不相同的,那我们应该以产品为维度去添加链接。于是点击 `Products & Variants`。
![image-20200920093842375](/Users/mac/Library/Application Support/typora-user-images/image-20200920093842375.png)
然后添加相应的字段
![image-20200920093942156](https://gitee.com/NilolaChen/photo/raw/master/img/20200920093944.png)
这里注意,要让输入框保持当前的状态,不要切换到富文本输入框。因为富文本输入框会为我们的字段添加东西进去。
#### 3.3.2 继续改造我们的代码
````
<a class="my-amazon-button" href="{{product.metafields.links.amazon_url}}">
<b>BUY ON AMAZON</b>
</a>
.my-amazon-button {
background-image: url(none);
background-repeat: no-repeat;
border-style: solid;
margin-top: 3%;
margin-bottom: 0px;
padding-top: 14px;
padding-left: 39%;
padding-bottom: 14px;
padding-right: 39%;
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-color: #000;
border-style: solid;
border-radius: 2px;
min-height: 0px;
background-color: rgba(243, 203, 103, 1);
text-align: center;
text-decoration: none;
}
````
我在 `a` 元素中添加了一个 `href` 的属性,这个属性就是我们跳转的 `url` 。然后按我的格式写进去,就可以了。
`product`:Shopify 暴露给我们的对象,全局都可以拿到。
`metafields` :应用为我们插入的对象
`links`:即我们在 `Namespace` 中的字段
`amazon_url`: 即 `key`
### 3.4 添加到代码中
#### 3.4.1 加入 HTML 代码
![image-20200920094749678](https://gitee.com/NilolaChen/photo/raw/master/img/20200920094751.png)
![image-20200920094840560](https://gitee.com/NilolaChen/photo/raw/master/img/20200920094842.png)
由于这里大家的代码都不一样,需要自己尝试一番。当然也是有技巧的
#### 3.4.2 加入 CSS 代码
![image-20200920095049810](https://gitee.com/NilolaChen/photo/raw/master/img/20200920095051.png)
这个位置,我们基本直接加在最末尾就可以了。
到这里,我们就大功告成了