版面呈現 ▌自訂「促銷活動頁面」顏色語法

「自訂「促銷活動頁面」顏色」

• 自訂顏色能迅速傳遞活動氛圍，加強消費者情感連結，因為不同活動，需要不同情緒色彩

• 活動頁的顏色設計與商品風格一致時，消費者會感覺更舒適、信任度提升，也更願意停留、點擊與下單

✎ 重點拆解：

一、「自訂「促銷活動頁面」顏色」設定路徑

二、「自訂「促銷活動頁面」顏色」語法

一、「自訂「促銷活動頁面」顏色」設定路徑

設定路徑：版面 > 自訂CSS商店樣式。

二、「自訂「促銷活動頁面」顏色」語法

/* ------ START 活動頁面 -------- */
/* https://meowmeow.qdm.tw/promotion&event=2 */

.module-promotion .prod_image { margin-top: 12px; }

/* 主標題 */
.module-promotion div#rg_header { background: #1d2e56; color: #bfa88b; }

/* 主標題 描述 */
.module-promotion div#rg_header_description { background: #665e78; color: #f0f0f0; padding: 9px; }
.module-promotion div#rg_header_description p { margin: 0px; }

/* 商品購物籃 - 紅色 */
.module-promotion div#red_list { background: #f7f7f7; color: #696c77; }
/* 商品購物籃 - 藍色 */
.module-promotion div#blue_list { background: #f7f7f7; }
/* 商品購物籃 - 綠色 */
.module-promotion div#yellow_list { background: #f7f7f7; }

/* 目前已選購 O 件, 區塊 */
.module-promotion div#col_check { background: #f7f7f7; color: #665f77; }
/* 前往結帳按鈕 */
.module-promotion #button-cart { background-image:none; border:none; background: #665f77; color: #FFFFFF; border-radius: 0px; }

/* 商品選購區 */
.module-promotion div#title_red { background: #696c77; }
.module-promotion div#title_red span { color: #FFF; font-size: 16px; }
.module-promotion div#title_red p { background: #bfa88b; }

/* 商品列表 - 商品名稱 */
.module-promotion #div_prod_name { background: #FFF; margin-bottom: 4px;

border-bottom: 2px solid transparent;
border-image: linear-gradient(to right, rgba(105,108,119,0.7) 0%, #FFFFFF 50%);
border-image-slice: 1

}
.module-promotion #div_prod_name a { font-size: 15px; line-height: 22px; color: #bfa88b; font-weight: bold; }

/* 商品列表 - 商品價格 */
.module-promotion #div_prod_price { background: #FFF; color: #777; font-size: 13px; font-family: "Georgia"; }

/* 商品列表 - 數量框 */
.module-promotion input.p_quantity_input { border-radius: 50%; border: 1px solid #CFCFCF; width:32px; height:32px; }

/* 商品列表 - 購物籃子 - 加入 */
.module-promotion a.img_btn_cart { border-radius: 50%; width:32px; height:32px; }

/* 商品列表 - 放大鏡 */
.module-promotion a.img_btn_check { display: none; } /* 隱藏 */

/* ------ END 活動頁面 -------- */

裝修前：

裝修後：