假如你會 `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 代碼


這個位置，我們基本直接加在最末尾就可以了。

到這里，我們就大功告成了