らくうるカートのトップスライドを編集する(スライド追加・独自JSに変更)

らくうるカートで用意されている新着テンプレートでは、どれを選んでもトップページにスライドを配置できるようになっています。

ただし、デフォルトではスライド画像は5枚までしか登録できないので、6枚以上追加したい場合、或いはスライドの表示方法を変更したい(フェード型にしたい、縦方向のスライドにしたいetc,etc)という場合には、スライド部分のHTMLを編集する必要があります。

トップページのスライドは割とお問い合わせが多い項目なので、基本的なスライドの設定方法からカスタマイズする方法までをまとめておきたいと思います。

基本的なトップページのスライド配置

スライド画像の登録は、「デザイン」→「トップページ設定」→「メインビジュアル設定」から行います。

らくうるカート管理画面

画像、リンクURL(必要であれば)altなどの入力欄が表示されるので適宜入力し、「登録」ボタンを押せば完了です。「表示」の項目が「表示する」になっていることを忘れずにご確認ください。

らくうるカート スライド設定画面

スライドをHTML編集する

メインビジュアル設定に「HTMLタグ」という項目があります。初期値は「通常タグ」と表示されていると思います。

HTMLタグを「カスタマイズ」に指定すると、メインビジュアルで設定した内容が、実際に反映されるHTML形式で表示されます。

カスタマイズしやすいように、HTMLコードを見やすく整形してやると下記のようになっています。

メインビジュアルのHTMLカスタマイズ画面

{% endfor %}までが登録したスライド内容を表示している部分なので、{% endfor %}と </ul>タグの間に追加したいスライドを<li>タグで記述してやります。

** 設定したスライドより前に表示させたいときは、<ul class=”main-image-sliders”>と、 {% for data in dsnTopVisualItemList %}の間にコードを追加します。

たとえば単純に画像だけを表示するスライドを追加するなら、

~略~

{% endfor %}
 <li><img src="sample.jpg" width="xxx" height="xxx" alt="sample" /></li>
 <li><img src="sample2.jpg" width="xxx" height="xxx" alt="sample2" /></li>
</ul>

~略~

となります。 width、 height、 altも忘れずに記入しましょう。

スライド機能を編集する

スライドの表示方法を変更したいときは、ご自身で好きなJavaScript を共通テンプレートで呼び出し、メインビジュアルで使われているID名、クラス名を変更して適応させることになります。

ここでは詳しく書きませんが、slick、 bxslider あたりを利用されるのが設定も難しくないのでおすすめです。

参考になりましたら幸いです。

らくうるカート

かなりの自動化が可能なので、1人店長やショップ運営の時間を短縮したい&ヤマト運輸を利用されている方には本当におすすめのショッピングカートです。

らくうるカートの新規ショップ制作・テンプレートカスタマイズ・オープン前作業のあれこれ(商品登録・決済の設定、自動送信メールの条件分岐・送料の設定 etc)等、らくうるカートに関する制作・カスタマイズは何でも承ります。

お問い合わせ・ご相談

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。