Cafe24新着情報
[商品管理] [PC] 商品キュレーションデザイン適用(中国語(繫体字)/上部) - HTML/CSS
2020-04-10
平素よりCafe24をご利用いただき、誠にありがとうございます。
より簡単になった商品キュレーションのデザイン編集方法をご案内いたします。
詳細は以下の内容をご確認ください。
1. PCモジュール作成
2020年4月22日以前のバージョンのデザインを使用する場合は、モジュールを新規作成してください。
該当の内容が既にある場合は、モジュールを作成する必要はありません。[HTML/CSS修正方法へ]
2. PC共通デザインソースコードを作成
(※ 該当のファイルが既にある場合は追加する必要はありません。)
- 修正位置 : 共通レイアウト(/layout/basic/layout.html)
メインレイアウト(/layout/basic/main.html)
▼ 以下のように赤色のソースコードを削除し、青色のソースコードを追加します。
--> <fieldset> <legend>檢索</legend> {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="檢索" onclick="{$action_search_submit}" /></fieldset> {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="檢索" onclick="{$action_search_submit}" /><ul class="autoDrop" id="{$search_auto_id}"></ul></fieldset> </div> </div> <h2>搜尋商品</h2> <fieldset> <legend>檢索</legend> {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="檢索" onclick="{$action_search_submit}" /></fieldset> {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="檢索" onclick="{$action_search_submit}" /><ul class="autoDrop" id="{$search_auto_id}"></ul></fieldset> <div class="bestKeyword {$hot_keyword_display|display}"> <a href="{$hot_keyword_url}">{$hot_keyword_name}</a> <a href="{$hot_keyword_url}">{$hot_keyword_name}</a> |
- 修正位置 : 商品詳細 (/product/detail.html)
▼ 以下のように青色のソースコードを追加します。
<div class="color {$colorchip_display|display}"> .... </div> <!--@import(/product/shoppQ/hashtag.html)--> <div class="ec-base-button gColumn" module="product_action"> .... </div> |
3. ショップメイン画面適用
- 修正位置: index.html
▼ 以下のように青色のソースコードを追加します。
<div class="visual"> .... </div> <!--@import(/product/shoppQ/searchContent.html)--> <div module="product_listmain_1" class="ec-base-product"> .... </div> |
4. 商品カテゴリ画面適用
- 修正位置: product/list.html
▼ 以下のように青色のソースコードを追加します。
<div class="title" module="product_headcategory"> .... </div> <!--@import(/product/shoppQ/searchContent.html)--> <ul class="menuCategory"> ... </ul> |
5. 商品検索画面適用
- 修正位置: product/search.html
▼ 以下のように赤色のソースコードを削除し、青色のソースコードを追加します。
div class="titleArea"> <!--@import(/product/shoppQ/searchForm_typeTop.html)--> |
6. CSSファイル追加
- 新規作成位置: /layout/basic/css/ec-base-layer.css
(※ 該当のファイルが既にある場合は追加する必要はありません。)
▼ 以下の内容でファイルを新規作成します。
/* reset */ li { list-style:none; } table { width:100%; border:0; border-spacing:0; border-collapse:collapse; } caption { display:none; } h1, h3 { margin:0; } /* common */ .ec-base-layer { position:absolute; z-index:100; border:1px solid #757575; background:#fff; } .ec-base-layer .header { padding:7px 35px 7px 19px; color:#fff; background:#495164; } .ec-base-layer .header > h1, .ec-base-layer .header > h3 { font-size:14px; line-height:1.5; } .ec-base-layer .content { padding:20px; font-size:12px; } .ec-base-layer div.ec-base-help { margin-top:0; } .ec-base-layer .ec-base-button { padding:9px; border-top:1px solid #d7d5d5; text-align:center; background:#fbfafa; } .ec-base-layer .close { position:absolute; right:0; top:0; padding:11px 20px; cursor:pointer; } /* popup */ #popup .ec-base-layer { position:relative; border:0; } #popup .ec-base-layer .header { padding:12px 35px 12px 19px; } #popup .ec-base-layer .close { top:5px; } /* ec-base-table */ .ec-base-layer .content > .ec-base-table table:first-child { margin-top:0; } .ec-base-layer .ec-base-table table { line-height:1.4; } .ec-base-layer .ec-base-table thead th { padding:9px 0 8px; } .ec-base-layer .ec-base-table tbody th { padding:9px 0 8px 10px; } .ec-base-layer .ec-base-table td { padding:9px 10px 8px; } /* 横 - 入力タイプ */ .ec-base-layer .ec-base-table.typeWrite td { padding:5px 10px 4px; } /* 縦 - 一覧タイプ */ .ec-base-layer .ec-base-table.typeList tfoot td { padding:10px 10px 12px; } /* 枠タイプ */ .ec-base-layer .ec-base-table.typeBorder tfoot td { padding:10px 10px 12px; } |
■ デザイン適用後、[商品管理 > 商品キュレーション > 商品検索条件設定]で[保存]ボタンを必ずクリックしてください。
- 属性値が表示されない場合があります。
Cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。
今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。
引き続き、ご愛顧のほどよろしくお願い申し上げます。