テンプレート【Complete】では、トップページの新商品や商品カテゴリーページなどの商品一覧に、各商品の「カートに入れる」ボタンが表示されるようにデザインされています。
このボタンは、CSSで非表示にするか、ソースを削除して消すことができます。
<手順>
編集する前にデザインセットのコピーボタンをクリックしてバックアップを保管し、元の状態に戻せるように準備したうえで作業をおこなってください。
■makeshopサポート
ショップデザインバックアップしてますか?!
※すでにデザインセットが5個以上ある場合は以下を参照してください。
■よくある質問
【クリエイターモード】デザインセットが5個以上あるとコピーできません。バックアップを取る方法を教えてください。
<方法1:CSSで非表示にする>
簡単な方法です。ソースは残り、ボタンだけが画面に表示されなくなります。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通 の「CSS」欄を編集します。
「CSS」入力欄内に一度カーソルを置いた状態でキーボードの Ctrl と F キーを同時に押し、表示される検索窓に
.item-list-cart
と入力(コピー&ペースト)し、キーボードの Enter キーを押して以下の記述を見つけてください。
.item-list-cart {
margin: auto 0 0 0;
}上記を、以下に変更してください。売り切れ表示も一緒に非表示になります。
.item-list-cart {
display: none;
}売り切れ表示は残し、「カートに入れる」ボタンだけを非表示にしたい場合は、display: none; への変更はおこなわず、「CSS」欄の一番最後に以下を追記してください。
.item-list-cart .add-list-cart {
display: none;
}<方法2:ソースを削除する>
ボタンのソースそのものを削除する方法です。商品一覧ごとに編集が必要です。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / のそれぞれの編集画面の「HTML」を編集します。
- モジュール管理 の「新商品」「おすすめ商品」「スペシャル商品」「ランキング」「最近チェックした商品」
- 商品カテゴリー
- 商品検索結果
「HTML」入力欄内に一度カーソルを置いた状態でキーボードの Ctrl と F キーを同時に押し、表示される検索窓に
カートに入れる
と入力(コピー&ペースト)し、キーボードの Enter キーを押して以下の記述を見つけてください。
※テンプレートを適用した時期によってclassなどが異なる場合がありますが、同じ構造のソースを見つけてください。〇〇〇 には、その商品一覧の変数タグが入ります。
<div class="item-list-cart">
<{if $〇〇〇.list[i].is_soldout}>
<div class="item-list-sold item-list-btn">売り切れ</div>
<{else}>
<a href="<{$〇〇〇.list[i].cart_entry_url}>" class="item-list-btn add-list-cart cart-order-btn">カートに入れる</a>
<{/if}>
</div>上記をすべて削除してください。ソースを残したい場合は、削除ではなくコメントアウトしてください。
削除すると、売り切れ表示も一緒に消えます。売り切れ表示を残したい場合は上記の青いテキストだけを削除してください。
※1つのページに「カートに入れる」が複数ある場合は、Enter キーを押して次の箇所を表示し、すべて同様に編集してください。
(例:商品カテゴリーでは、商品一覧の category.item と、カテゴリーおすすめ商品の category.recommend_item の2か所)
<ご注意>
上記は対処策の一例です。あくまでもひとつの例として参考にしてください。
修正が難しい場合は有料の制作代行プランのご利用を検討してください。
<関連記事>
【クリエイターモード】テンプレートCompleteで「カートに入れる」ボタンの色を変更する方法を教えてください。


