こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。
以前、記念品やギフト商材取扱いショップ様必見! 名入れ機能の使い方教えます!をご紹介しましたが、今回は具体的に対象のテンプレートで「名入れ」機能に対応する方法をご紹介します!
※対象テンプレート:【WIDELY】/【ENKEL】
名入れ機能に対応する方法!
(対象テンプレート: WIDELY/ENKEL)
それでは、早速みていきましょう。
設定方法
(1)商品詳細にタグを追加
【独自デザイン(PC)】>【内部ページ編集I】>【商品詳細画面管理】
に下記のソースを追記します。
1 2 3 4 5 6 7 |
<!-- 名入れ --> [IFNAMEOPTION] 名入れ対応商品に表示したい文章がある場合はこの位置に入力 [NAMEOPTION] [IFELSENAMEOPTION] 名入れ非対応商品に表示したい文章がある場合はこの位置に入力 [IFENDNAMEOPTION] |
↓このソースの上の行へ追記します。
1 |
<div class="item-detail-quantity"> |
・商品詳細ページの名入れの枠線の表示を調整したい場合は、
【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】にお好みで下記のCSSを追加しましょう。(管理しやすい箇所か、分からない場合は一番下に追記ください)
1 2 3 4 5 6 7 8 9 10 |
#M_nameCustom .M_nameInput, #M_nameCustom .M_nameTextarea { font-size: 16px; padding: 8px !important; border-radius: 5px; border: solid 1px #ccc;/* 枠線の指定 */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } |
↓このように名入れの枠線の表示を変更できます!
(2)買い物かごのHTMLを編集
【独自デザイン(PC)】>【内部ページ編集I】>【買い物かごページ管理】
のソースを2箇所編集します。
【1】<th colspan="2">を"3"に変更します。
1 |
<th colspan="2">商品情報</th> |
↓
1 |
<th colspan="3">商品情報</th> |
【2】<td class="basket-img">の上に<td></td>を追加します。
1 |
<td class="basket-img">[BASKET_IMG]</td> |
↓
1 2 |
<td></td> <td class="basket-img">[BASKET_IMG]</td> |
↓このように買い物かごに名入れ表示されます!
完了
いかがでしたでしょうか。
スマホ【Primary】で表示する場合は、スマホにも名入れを表示する方法!のソースを入力して忘れずにスマホでも表示させましょう。
それではまた!