商品ごとにテキスト入力フォームを設定することができます。
購入者が商品への刻印用に名前やメッセージを指定できます。

• 名入れグループ管理
• 表示例
• クリエイターモードで名入れを表示する場合
• 運営ノウハウ集

デモショップをみる

名入れグループ管理

• 1「新規作成」ボタンをクリックし、名入れグループを作成します。
• 2名入れグループを作成すると作成済みのグル―プ名が一覧で表示されます。
• 3作成済みの名入れグループを修正します。
• 4作成済みの名入れグループを削除します。

• 1管理者のみ表示される、作成する名入れグループの名前を入力してください。（半角40文字入力可能）
• 2商品詳細画面に表示したい説明文を入力してください。（半角6,000文字入力可能）
  HTMLが利用できます。
• 3管理用の項目名を入力してください。（半角40文字入力可能）
  （4の項目を未入力とした場合、この項目名が商品詳細画面にも表示されます）
• 4商品詳細画面に表示される項目名を入力してください。（半角100文字入力可能）
  （この項目を未入力とした場合、3の入力内容が商品詳細画面に表示されます）
• 5項目の入力任意、必須を選択します。
• 6入力フォームに入力可能とする文字を選択します。

• 7入力フォームの1行の最大文字数と行数を設定入力してください。
  
  1行半角100文字・10行までの中で、合計が半角200文字以内になるよう設定してください。
• 8入力フォームに入力可能とする文字数を半角換算で入力してください。
  
  ひらがなや漢字などの日本語は1文字で半角2文字分の計算となります。（半角200文字入力可能）
• 9名入れ項目を追加できます。名入れ項目は1グループに最大10個まで作成可能です。
• 10追加した名入れ項目を削除できます。最後の一つは削除できません。
• 11入力内容を保存します。

表示例

商品詳細ページ

デモショップをみる

買い物かごページ

クリエイターモードで名入れを表示する場合

クリエイターモード【Debut】サンプルソース

▼商品詳細

【ショップデザイン】>【クリエイターモード】>【商品詳細】
※別途、cssによる調整が必要です。

html

<!--▼▼商品詳細(61行目：<table class="item-detail-table">～</table>の下に追加)!-->
<{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}>

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: 75%;
    padding: 6px;
    border: 1px solid #707070;
}
/* ▼レスポンシブ用CSS */
.nameprint-area {
    margin-bottom: 40px;
}
.nameprint-text input,
.nameprint-text textarea {
    width: 95%;
}

▼クリエイターモード【Debut】名入れ商品詳細表示例

▼買い物カゴ

【ショップデザイン】>【クリエイターモード】>【買い物カゴ】
※別途、cssによる調整が必要です。

html

<!--▼買物カゴ（50行目：<{if $cart.list[i].selected_option.has_item}>～<{/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}>
<!--▼買物カゴレスポンシブ用（90行目：<{if $cart.list[i].selected_option.has_item}>～<{/if}>の下に追加▼）!-->
<{if $cart.list[i].name_print.has_item}>
    <div class="item-cart-nameprint">
        <{section name=j loop=$cart.list[i].name_print.list}>
            <p><{$cart.list[i].name_print.list[j].title}>：<{$cart.list[i].name_print.list[j].name|escape|nl2br}></p>
        <{/section}>
    </div>
<{/if}>

CSS

.item-cart-nameprint {
    margin-top: 8px;
    font-size: 14px;
}
/* ▼レスポンシブ用CSS */
.item-cart-nameprint span {
    margin-right: 16px;
}

▼クリエイターモード【Debut】名入れ買い物カゴ表示例

運営ノウハウ集