[商品管理] [モバイル] 商品キュレーションデザイン適用(日本語/ポップアップ) - HTML/CSS

2020-04-13

平素よりCafe24をご利用いただき、誠にありがとうございます。

より簡単になった商品キュレーションのデザイン編集方法をご案内いたします。

詳細は以下の内容をご確認ください。

☞ [HTML修正方法へ - 韓国語]

☞ [HTML修正方法へ - 英語]

☞ [HTML修正方法へ - 日本語]

☞ [HTML修正方法へ - ベトナム語]

☞ [HTML修正方法へ - 中国語(簡体字)]

☞ [HTML修正方法へ - 中国語(繫体字)]

1. モバイルモジュール作成

2020年4月22日以前のバージョンのデザインを使用する場合は、モジュールを新規作成してください。

該当の内容が既にある場合は、モジュールを作成する必要はありません。[HTML/CSS修正方法へ]

2. モバイル共通デザインソースコードを作成

(※ 該当のファイルが既にある場合は追加する必要はありません。)

- 修正位置 : レイアウト(検索) (/layout/basic/search.html)

▼ 以下のように青色のソースコードを追加します。

<div class="searchForm">
{$form.keyword}
<button type="button" class="btnDelete">削除</button>
<div class="autoList" id="{$searchdata_auto_list_id}">
<ul class="autoDrop" id="{$search_auto_id}"></ul>
</div>
</div>
</fieldset>
<div class="ec-base-tab">

② 修正位置: メインレイアウト(/layout/basic/main.html)

▼ 以下のように青色のソースコードを追加します。

<div class="searchWrap">
<p class="category"><a href="#none" class="fold">カテゴリー</a></p>

<div module="Layout_SearchHeader">

<div class="searchForm">
{$form.keyword}
<button type="button" class="btnDelete">削除</button>
<div class="autoList" id="{$searchdata_auto_list_id}">
<ul class="autoDrop" id="{$search_auto_id}"></ul>
</div>
</div>
</div>

③ 修正位置: 商品カテゴリ (/product/list.html)

商品分類(ギャラリー) (/product/list_gallery.html)

商品分類(サムネイル) (/product/list_thumb.html)

▼ 以下のように青色のソースコードを追加します。

<div id="titleArea" module="product_headcategory">
<h2>{$title_text_or_image}</h2>
<span module="Layout_MobileAction">
...
</span>

<div class="funcArea">
<span class="likeButton {$disp_likecate_class}"><button type="button">{$disp_likecate_icon}<strong>{$disp_likecate_count}</strong></button></span>
<button type="button" id="ec-product-searchdata-mobile-button" class="btnSearchdata">詳細検索</button>

</div>
</div>

<ul class="menuCategory">
....
</ul>

④ 修正位置: 商品検索(/product/search.html)

▼ 以下のように赤色のソースコードを削除し、青色のソースコードを追加します。

<div id="titleArea" module="search_form">


<h2>検索結果(<span class="count">{$total_count}</span>)件</h2>
<span module="Layout_MobileAction">
<a href="#none" onclick="{$go_back}"><img src="//img.echosting.cafe24.com/skin/mobile_ja_JP/layout/btn_back.gif" width="33" alt="戻る"></a>
</span>

<div class="searchbox">
{$form.keyword}
<p class="button"><button type="submit" class="btnStrong">検索</button></p>
<button type="button" class="btnDelete">削除</button>
</div>

<div class="inner">
{$form.order_by}
</div>

<p class="empty {$search_fail_display|display}">一致する検索結果がありませんでした。</p>

⑤ 修正位置: 商品詳細(/product/detail.html)

▼ 以下のように青色のソースコードを追加します。

3. メインページ適用

- 修正位置: ショップメイン(/index.html)

▼ 以下のように青色のソースコードを追加します。

4. 商品カテゴリ適用

- 修正位置: 商品カテゴリ (/product/list.html)

商品分類(ギャラリー) (/product/list_gallery.html)

商品分類(サムネイル) (/product/list_thumb.html)

▼ 以下の内容をファイルの最下部に追加します。

5. 商品検索適用

- 修正位置: 商品検索(/product/search.html)

▼ 以下の内容をファイルの最下部に追加します。

Cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。

今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。

引き続き、ご愛顧のほどよろしくお願い申し上げます。

ご不便・ご不明な点等ございましたら、092-517-9981または「お問い合わせ」まで、お気軽にお問い合わせください。

2020-04-15

2020-05-13