名入れグループ設定

設定画面：商品管理 / 機能・設定 / 名入れグループ / 名入れグループの設定

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

デモショップをみる
 

名入れグループ管理

• 新規作成
  新規作成ボタンをクリックし、名入れグループを作成します。
• まだ作成されていません
  名入れグループ名の設定がない場合は、「まだ作成されていません」と一覧に表示されています。

名入れグループを作成すると作成済みのグル―プ名が一覧で表示されます。

• 名入れグループ名
  作成済みの名入れグループをクリックすると名入れグループの編集へ遷移します。
• ゴミ箱マーク
  作成済みの名入れグループを削除します。

グループ情報

• グループ名（管理画面用）
  管理者のみ表示される、作成する名入れグループの名前を入力してください。（40文字以内）
• 説明文
  商品詳細画面に表示したい説明文を入力してください。（12,000文字以内）
  HTMLが利用できます。

名入れ項目設定

• 項目名（管理画面表示用）
  管理用の項目名を入力してください。（半角40文字入力可能）
  （4の項目を未入力とした場合、この項目名が商品詳細画面にも表示されます）
• 項目名（ショップ表示用）
  商品詳細画面に表示される項目名を入力してください。（半角100文字入力可能）
  （この項目を未入力とした場合、3の入力内容が商品詳細画面に表示されます）
• 必須入力
  項目の入力任意、必須を選択します。
• 入力可能文字
  入力フォームに入力可能とする文字を選択します。

• 入力可能文字数
  入力フォームの1行の最大文字数と行数を設定入力してください。
  1行半角100文字・10行までの中で、合計が半角200文字以内になるよう設定してください。
• 1行あたり半角
  入力フォームに入力可能とする文字数を半角換算で入力してください。
  ひらがなや漢字などの日本語は1文字で半角2文字分の計算となります。（半角200文字入力可能）
• 行数
  10行以内になるよう設定してください。
• 全体で半角
  合計が半角200文字以内になるよう設定してください。
• 名入れ項目を追加
  名入れ項目を追加を追加します。

表示例

商品詳細ページ

【ショップデザイン（ベーシックモード）ご利用の場合】
名入れ機能を利用するには、以下の設定が必要です。

・PC
ショップデザイン / テンプレート選択・編集 / 内部ページ編集Ⅰ / 商品詳細画面管理 
にて[INFO]または[INFO]を利用していない場合は、[NAMEOPTION］タグをご設定ください。

・スマホ
ショップデザイン / テンプレート選択・編集 / スマホデザインの設定 / 商品詳細ページ編集　
にて<{$name_option}>タグをご設定ください。</{$name_option}>

※参考記事：スマホにも名入れを表示する方法！

デモショップをみる
 

買い物かごページ表示例 クリエイターモード画面 

買い物かごページ表示例 ベーシックモード画面

【ショップデザイン（ベーシックモード）ご利用の場合】
名入れ機能を利用するには、以下の設定が必要です。

・PC
ショップデザイン / テンプレート選択・編集 / 内部ページ編集Ⅰ / 買い物かごページ管理
にて[BASKET_NAMEOPTION]タグをご利用ください。

・スマホ
ショップデザイン / テンプレート選択・編集 / スマホデザインの設定 / 買い物カゴページ編集　
にて<{$basket_info}を利用していない場合は<{$basket.name_option}タグをご設定ください。

※参考記事：スマホにも名入れを表示する方法！

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

クリエイターモード【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】名入れ買い物カゴ表示例

運営ノウハウ集