【クリエイターモード】テンプレートManabitoのカテゴリーページ、検索結果ページで品切れを表示する方法はありますか。 – makeshop よくある質問

デザインテンプレート【Manabito】のデザインの初期値では品切れを表示する記述がないため、
カテゴリーページ、検索結果ページに表示するタグを追記することで可能です。

＜カテゴリーページ＞
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品カテゴリー
「HTML」欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し、表示される検索窓に

<{$category.item.list[i].price|number_format}>

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

<{if $category.item.list[i].is_sale}>
    <p class="price original-price">￥<{$category.item.list[i].original_price|number_format}><span>（税込）</span></p>
    <p class="item-sale-price category-item-price "><{$category.item.list[i].price|number_format}><span class="tax">（税込）</span>
    <span class="sale-discount-rate">[<{$category.item.list[i].sale_rate}>%OFF]</span></p>
<{else}>
    <p class="category-item-price"><{$category.item.list[i].price|number_format}><span>（税込）</span></p>
<{/if}>

こちらが商品価格を表示するHTMLです。
上記につづけて品切れ時に表示する記述を追記してください。

＜追記後＞

<{if $category.item.list[i].is_sale}>
    <p class="price original-price">￥<{$category.item.list[i].original_price|number_format}><span>（税込）</span></p>
    <p class="item-sale-price category-item-price "><{$category.item.list[i].price|number_format}><span class="tax">（税込）</span>
    <span class="sale-discount-rate">[<{$category.item.list[i].sale_rate}>%OFF]</span></p>
<{else}>
    <p class="category-item-price"><{$category.item.list[i].price|number_format}><span>（税込）</span></p>
<{/if}>
<{if $category.item.list[i].is_soldout}>
   <p class="item-soldout">品切れ</p>
<{/if}>

＜検索結果ページ＞

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品検索結果
「HTML」欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し、表示される検索窓に

<{if $search.item.list[i].is_sale}>

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

<{if $search.item.list[i].is_sale}>
    <p class="price original-price">￥<{$search.item.list[i].original_price|number_format}><span>（税込）</span></p>
    <p class="item-sale-price category-item-price "><{$search.item.list[i].price|number_format}><span class="tax">（税込）</span>
    <span class="sale-discount-rate">[<{$search.item.list[i].sale_rate}>%OFF]</span></p>
<{else}>
    <p class="category-item-price"><{$search.item.list[i].price|number_format}><span>（税込）</span></p>
<{/if}>

こちらが商品価格を表示するHTMLです。
上記につづけて品切れ時に表示する記述を追記してください。

＜追記後＞

<{if $search.item.list[i].is_sale}>
    <p class="price original-price">￥<{$search.item.list[i].original_price|number_format}><span>（税込）</span></p>
    <p class="item-sale-price category-item-price "><{$search.item.list[i].price|number_format}><span class="tax">（税込）</span>
    <span class="sale-discount-rate">[<{$search.item.list[i].sale_rate}>%OFF]</span></p>
<{else}>
    <p class="category-item-price"><{$search.item.list[i].price|number_format}><span>（税込）</span></p>
<{/if}>
<{if $search.item.list[i].is_soldout}>
   <p class="item-soldout">品切れ</p>
<{/if}>

品切れのテキストはCSSの追記で文字色の変更が可能です。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」欄の末尾などに下記を追記してください。

追記例）

.item-soldout{
  color:#f00;
}

関連記事