? ? ? ??

? ? ? 在網(wǎng)站運營的過程中，會設(shè)置多樣化的折扣，如滿減，注冊新用戶折扣，訂閱newsletter折扣等，適當(dāng)?shù)脑诤侠淼牡胤竭M行折扣碼展示能夠在一定程度上影響用戶的加購、支付轉(zhuǎn)化率。在前面的文章：提升加購率 一文中就提到了在產(chǎn)品詳情頁展示個性化的折扣碼增加用戶的下單欲望的案例。本文就以詳情頁product page展示coupon code為例，來講述如何通過后臺自定義樣式代碼來實現(xiàn)前端code展示的效果。

? ? ? ?首先，我們需要查找coupon code擬展示區(qū)對應(yīng)的代碼段位置

? ? ? ?如圖所示，如果想將coupon展示在價格模塊以上，則先應(yīng)從shopify后臺product相關(guān)模板代碼里找到代碼在這里展示的位置；我們可以先查看price對應(yīng)的代碼段，選中價格區(qū)，右鍵inspect，獲取到對應(yīng)的Class為compare-price；

? ? ? ?在product-v1.liquid對應(yīng)的代碼頁面，查到了相關(guān)的代碼。為了驗證區(qū)域的正確，我們在這一段代碼段上面加一行div代碼文字，如下：

? ? ? 為了驗證這一段代碼對應(yīng)的控制區(qū)正確，保存，刷新前臺頁面，得到如下效果：

? ? ? ?如上圖所示，前臺添加了對應(yīng)的折扣顯示內(nèi)容，但是這一部分內(nèi)容的樣式有問題，需要進一步調(diào)整：

? ? ? ?在上圖所示的右邊編輯對應(yīng)的樣式代碼參數(shù)：顏色、字體大寫、邊距等，最終得到上面較為合適的視覺效果；

? ? ? 最后，將剛剛調(diào)整的樣式代碼段復(fù)制到以上控制全局樣式的liquid頁面，保存即可。

? ? ? 需要注意的是，不同網(wǎng)站使用的模板不一樣，查找相應(yīng)的代碼控制區(qū)所在頁面也會不同，一般會在product.liquid或者product_layout.liquid, 或者page_description.liquid等類似頁面上。雖然這是一個很簡單的前端樣式調(diào)整，但是作為運營，重要的是要利用這一可自定義的功能在適當(dāng)?shù)捻撁孢M行適當(dāng)?shù)膬?nèi)容展示，以更好的提升購物車轉(zhuǎn)化水平。