お取り扱い商品の編集方法
ページ下部に、大カテゴリーとその小カテゴリーを一覧として表示できます。
お取り扱い商品 変更手順
1. お取り扱い商品を有効にする方法
-
[ショップ作成] → [デザイン]から利用中のテンプレートの[テンプレート編集]をクリックします。
-
[共通]の[HTML・CSS編集]をクリックします。
-
ページ内検索にて「お取り扱い商品エリアを有効にする際は、この行を削除してください。」を検索し、該当箇所を削除してください（全部で2箇所あります）。
削除箇所は下記のようになります。
<{* お取り扱い商品エリアを有効にする際は、この行を削除してください。
お取り扱い商品エリアを有効にする際は、この行を削除してください。 *}>
-
変更しましたら、[保存]ボタンをクリック。
-
サイトにアクセスして変更が反映されている事を確認します。
2. 内容を変更する方法
-
カテゴリー画像を作成し、画像ファイル管理からファイルをアップロードします。
サンプルサイトでは画像の表示サイズが横80px 縦は80pxです（推奨サイズは横160px 縦は160pxです）。
コード上は80px指定ですが、推奨サイズの画像を用意してください（ブラウザで縮小表示されます）。
[ショップ作成] → [画像ファイル管理]をクリックすると、画像ファイル管理がポップアップにて表示されます。
-
カテゴリー画像を選択し[アップロード]ボタンをクリック。
-
ファイル確認から作成した画像をクリックするとプレビュー画像と画像URLが表示されます。
プレビュー画像がカテゴリー画像であることを確認します。
-
アップロードが完了しましたら実際に差し替えていきます。
[ショップ作成] → [デザイン]から利用中のテンプレートの[テンプレート編集]をクリックします。
-
[共通]の[HTML・CSS編集]をクリックします。
-
下記のサンプルコード内「大カテゴリー」を任意のカテゴリー名に変更してください。
<h3 class="c-products-available__title"><span>大カテゴリー</span></h3>
-
下記のサンプルコード内を適宜登録してください（掲載する小カテゴリー数に応じて複製してご利用ください）。
<li class="c-products-available__item">
<a class="c-products-available__link" href="#">
<img src="https://img.shop-pro.jp/tmpl_img/91/no-image-banner.png" alt="" class="c-products-available__image" loading="lazy" width="80" height="80">
<span class="c-products-available__label">小カテゴリー名が入る</span>
</a>
</li>
- [href="#"]は小カテゴリーのリンク先になります。適宜変更してください。
- [src="https://img.shop-pro.jp/tmpl_img/91/no-image-banner.png"]は小カテゴリー画像のURLになります。適宜変更してください。
- [alt=""]は小カテゴリー画像のalt属性になります。適宜変更してください。
- [width="80"]、[height="80"]は小カテゴリー画像の幅と高さになります(調整不要です)。
-
変更しましたら、[保存]ボタンをクリック。
-
サイトにアクセスして変更が反映されている事を確認します。
3. カテゴリーエリアを追加する方法
-
下記コードブロック全体をコピーして、既存のカテゴリーエリアの下に貼り付けます。
<div class="c-products-available">
<div class="c-products-available__header">
<h3 class="c-products-available__title"><span>大カテゴリー</span></h3>
</div>
<div class="c-products-available__body">
<ul class="c-products-available__list">
<!-- 小カテゴリーをここに追加 -->
</ul>
</div>
</div>
-
大カテゴリーと小カテゴリーの編集方法は「2. 内容を変更する方法」を参照してください。
-
変更しましたら、[保存]ボタンをクリック。
-
サイトにアクセスして変更が反映されている事を確認します。
