假如你会 `CSS` , `HTML` , `JS` 三件套，那么修改 `Shopify` 代码将不会太难（毕竟一个模板中的代码量还是挺多的，除非深入研究了代码，不然改起来还是会比较麻烦的）。
但挺多玩家是不会这三件套的，修改代码来达到添加页面元素会比较困难。
但如果我们找到了一个不错的站点，然后想模仿的话，事情就会简单很多。
以该站点的 `BUY ON AMAZON` 按钮为例
### 3.1 检查页面元素
#### 3.1.1 对你想要模范的元素，右键，检查。或者按 `F12`
#### 3.1.2 使用小箭头快速锁定想要的元素：点击小箭头，然后把速表移动到想要的元素上，就能快速地看到元素的相关信息。点击元素后，右侧检查页面就能锁定这个元素
### 3.2 抄下它的代码
#### 3.2.1 HTML 代码
HTML 代码是不方便复制的，因为上面会加上很多其他的信息。我们用手打就好了
````
<a class="">
<b> BUY ON AMAZON </b>
</a>
````
#### 3.2.2 CSS 代码
看到这里有个 `background-color`，应该是背景颜色。
点击蓝色的复选框，可以发现，按钮黄色不见了。
那我们就把整个代码抄下来
```
<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` 应用
然后点击我们想要的对象。以为每个产品的链接都是不相同的，那我们应该以产品为维度去添加链接。于是点击 `Products & Variants`。
然后添加相应的字段
这里注意，要让输入框保持当前的状态，不要切换到富文本输入框。因为富文本输入框会为我们的字段添加东西进去。
#### 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 代码
由于这里大家的代码都不一样，需要自己尝试一番。当然也是有技巧的
#### 3.4.2 加入 CSS 代码
这个位置，我们基本直接加在最末尾就可以了。
到这里，我们就大功告成了
)
操作方法详解)
