【クリエイターモード】テンプレートMinimumで商品詳細ページと買い物カゴページに名入れを表示することはできますか。 – makeshop よくある質問

商品詳細ページと買い物カゴページに記述を追記することで、表示が可能です。

・商品詳細ページ
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

（1）オプション選択肢欄の下に
名入れオプションを表示させたい場合は
HTML欄　テンプレート初期値では87行目付近

<!-- オプションの設定がされていたら -->
<{if $item.has_option}>
<div class="item-option">
<{$item.option_html}>
</div>
<{/if}>

こちらの記述の後に下記を追記してください。

追記例）

<{if $item.is_name_print}>
<div class="nameprint-area">
<{if $item.name_print.has_item}>
<p class="nameprint-description"><{$item.name_print.description}></p>
<{section name=i loop=$item.name_print.list}>
<div class="nameprint-title-wrap">
<p class="nameprint-title"><{$item.name_print.list[i].title}><{if $item.name_print.list[i].is_required}><span>※必須</span><{/if}></p>
</div>
<div class="nameprint-text-wrap">
<p class="nameprint-text"><{$item.name_print.list[i].html}></p>
<p class="nameprint-total">最大<{$item.name_print.list[i].total_max}>文字（半角）／<{$item.name_print.list[i].row_max}>行まで</p>
<p class="nameprint-character">利用可能文字：<{$item.name_print.list[i].character_type}></p>
</div>
<{/section}>
<{/if}>
</div>
<{/if}>

（2）同じ画面のCSS欄に下記を追記してください。

.nameprint-area {
margin-top: 20px;
}
.nameprint-title-wrap {
margin: 18px 0 8px;
font-size: 12px;
}
.nameprint-text-wrap p {
margin-bottom: 4px;
font-size: 12px;
}
.nameprint-title {
font-size: 14px;
font-weight: bold;
margin-top: 10px;
}
.nameprint-title span {
color: #F23E0C;
font-size: 12px;
font-weight: normal;
margin-left: 6px;
}
.nameprint-text input,
.nameprint-text textarea {
width: 100%;
border: 2px solid #DDDBDB;
box-sizing: border-box;
border-radius: 4px;
}
@media screen and (max-width: 768px) {
.nameprint-area {
margin-bottom: 40px;
}
}

・買い物カゴページ
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 買い物カゴ

（1）HTML欄　テンプレート初期値では44行目付近

<!-- オプションが選択されていたら -->
<{if $cart.list[i].selected_option.has_item}>
<div class="cart-list-option">
<{section name=j loop=$cart.list[i].selected_option.list}>
<p class="cart-list-option-item"><{$cart.list[i].selected_option.list[j].title}>：<{$cart.list[i].selected_option.list[j].option_name}></p>
<{/section}>
</div>
<{/if}>

こちらの記述の後ろに下記をご追記ください。

<{if $cart.list[i].name_print.has_item}>
<div class="item-cart-nameprint">
<{section name=j loop=$cart.list[i].name_print.list}>
<span><{$cart.list[i].name_print.list[j].title}>：<{$cart.list[i].name_print.list[j].name|escape|nl2br}></span>
<{/section}>
</div>
<{/if}>

（2）同じ画面のCSS欄に下記を追記してください。

.item-cart-nameprint span{
display:block;
}

関連記事