假如你会 `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 代码


这个位置，我们基本直接加在最末尾就可以了。

到这里，我们就大功告成了