この度はUnBergerDesignが提供する
「N-R Arrival」デザインをご利用いただき誠にありがとうございます。
このデザインの特徴はTOPページの「フルスクリーンイメージ」です。
このフルスクリーンイメージの変更方法について、
マニュアルを作成いたしましたので、デザインを編集する際にご活用ください。
なお、「N-R Arrival」デザインは無料で配布しております。
お気軽にインストールし、お試しいただけますと幸いです。
・初期設定で「NewArrival 」「 ReArrival 」「 Recommend 」の
3つのセクション(=行)で構成されています。
・各セクションは下記のように使用することを想定しています。
(お好みに合わせてアレンジしていただくことも可能です。)
NewArrival | 新商品の表示 |
ReArrival | 再入荷商品の表示 |
Recommend | おすすめ商品の表示
|
・各セクションに、任意の画像を設定することができます。
(例：初期設定でReArrivalの画像は2枚ですが、増やすことも減らすこともできます。)
・ここからは各画像の変更・追加方法をご案内します。
STEP
①ファイルを開く
②画像を変更する
③商品ページへのリンクを変更する
④ブロックを追加する(必要な場合のみ)
⑤ブロックを削除する(必要な場合のみ)
①ファイルを開く
・各セクションはそれぞれ別のファイルで管理しています。
NewArrival | nrarrival/section/newarrival.html |
ReArrival | nrarrival/section/rearrival.html |
Recommend | nrarrival/section/recommend.html
|
Tips
・ファイルを開くには、スマートデザイン編集画面を開いてください。・index.htmlファイルが表示されます。・編集したいファイル名にマウスオーバーすると、下記のように「ファイルを開く」と表示されます。・「ファイルを開く」をクリックして下さい。
②画像を変更する
・①で開いたファイルで下記のようなコードが記載されています。
<div class="slide" style="background-image: url(/nrarrival/img/1-1.jpg);"> |
・ここで記載されている赤字部分が表示する画像のURLになります。・表示したい画像のURLに変更してください。・画像サイズは自動で調整されるようになっています。
Tips ・「NewArrival(nrarrival/section/newarrival.html )」のファイルを開くと3か所画像が指定されています。
・これはNewArrivalのセクションに3つ画像が登録されていることを表しています。
・一番上に登録した画像が最初に表示され、それ以降は上から順番に2枚目→3枚目…と表示されます。
③商品ページへのリンクを変更する
・画像の左上に表示されている「>>>Detail」をタップした際に遷移する商品ページのURLを変更します。
・①で開いたファイルで下記のようなコードが記載されています。
<a href="/product/cropped-pants/17/"><h2 class="tith2_top">Detail</h2></a> |
・ここで記載されている赤字部分がリンク先の商品ページURLになります。・リンク先に指定したい商品ページのURLに変更してください。
Tips
・商品ページのURLは、商品登録後管理画面から確認することができます。 (管理画面の商品＞商品リスト) 
・なお、URLの一部は省略することができます。
(例)
省略前のURL例 https:// sample.com/product/product/cropped-pants/17/
省略後のURL例 /product/cropped-pants/17/
このように「/product...」以前を省略して使用することができます。
④ブロックを追加する(必要な場合のみ)
・①で開いたファイルで下記のようなコードが記載されています。
<div class="slide" style="background-image: url(/nrarrival/img/1-1jpg);">
<div class="inner">
<a href="/product/tailored-jacket/12/"><h2 class="tith2_top">Detail</h2></a>
</div><!-- inner -->
</div> |
・このコード5行分で1枚の画像を表示しています。
・画像を追加したい場合は、このブロックをコピーし、「</section>」の前に追加してください。
(ブロックを追加した後、画像の変更/商品ページへのリンク変更については②③を参照ください。)
⑤ブロックを削除する(必要な場合のみ)
・①で開いたファイルで下記のようなコードが記載されています。
<div class="slide" style="background-image: url(/nrarrival/img/section1_slide2.jpg);">
<div class="inner">
<a href="/product/detail.html?product_no=12 "><h2 class="tith2_top">Detail</h2></a>
</div><!-- inner -->
</div> |
・このコード5行分で1枚の画像を表示しています。
・画像を削除したい場合は、このブロックを削除してください。
マニュアルは以上になります。
「N-R Arrival」デザインが貴社の売り上げ向上の一助になれることを大変うれしく思っております。
UnBergerDesign
Daisuke Kurihara
