? ? ? ??

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

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

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

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

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

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

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

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

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