>> 運営者プロフィールはこちら
WEB全般

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

WEB全般
記事内に広告が含まれています。

ショップサーブ(shopserve)の商品詳細ページにスライダーを導入したい。
管理画面かコードのカスタマイズで実現可能かを知りたい。

こんなことを考えている方へ。
この記事のポイントはこちらです。

・商品画像の部分にスライダーを導入することはできない
・しかし、画像の下の「商品紹介文」エリアにはスライダーを導入できる(要コーディング)
・トップのファーストビューにスライダーを入れたいだけなら、スライダー標準搭載のテンプレートがある

Shopify飯店

Shopify飯店

>> 運営者の詳しいプロフィールはこちら

\当サイトのおすすめ記事はこちら👇/

■■WEB制作を学ぼう■■

人気記事 2万文字でデイトラWEB制作コース!を徹底解説!口コミはこちら!📺

 

スポンサーリンク

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

仕事でショップサーブをカスタマイズする機会がありました。
ショップサーブとは株式会社Eストアーが提供するSaaS型ECサイト構築システムです。

ECサイト構築から成功までを完全サポート。サイト構築、集客、決済などECサイト運営に必要な機能が全て標準装備されたオールインワンサービス「ショップサーブ」。
参考:https://shopserve.estore.jp/

導入したい商品詳細のスライダーというのはこういったものです。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

画像はベルメゾンネット( https://www.bellemaison.jp/ )から

画像端の矢印をタップ(PCならクリック)で、前後の画像に移動できる仕組みです。
最近では一般的になってきました。

一方、デフォルトのショップサーブの商品詳細ページはこちら。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

画像スライダーは搭載されていません。画像を切り替えたいときは、下のサムネイルをクリックします。すると表示される画像が変わります。

メインの画像(大きく表示されている画像)をクリックすると以下のようなモーダル画面が開きます。
このモーダルの中には画像スライダーが搭載されています。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

やりたいことは、モーダルを開いてからではなく、初期の状態から画像スライダーを設定することです。
ただ、できないとサポートから連絡を受けました。

 

スポンサーリンク

ショップサーブでは商品画像部分にスライダーを入れることはできない

結論、商品画像にスライダーを設定することはできないそうです。サポートに問い合わせをしたら、丁寧にお返事をいただきました。私のサポートとのやりとりを掲載します。

【件名】
商品詳細ページの商品画像にスライダー機能をつけたい
【内容】
商品詳細ページの画像にスライダーを設定したいと思っています。管理画面からの設定やカスタマイズで実装可能でしょうか? サポートの範囲内で方法をご教示頂けますと幸いです。

平素よりショップサーブをご利用いただき、誠にありがとうございます。
下記のお問い合わせについて、ご回答申し上げます。

大変恐縮ではございますが、商品詳細ページの商品画像をスライドさせる機能のご用意がございません。ご希望に沿った設定が適わず、心苦しい限りではございますが、何卒ご容赦賜りますようお願いいたします。
なお、商品紹介文の欄はHTMLの記述が可能でございますため、スライドショーの記述をご設置のうえ、画像をスライドさせることは可能かと存じます。

 

 

スポンサーリンク

商品紹介文のエリアにスライダーを入れることは可能

サポートの方曰く、商品画像にスライダー設定はできないが商品紹介文のエリアは可能とのことでした。

なお、商品紹介文の欄はHTMLの記述が可能でございますため、スライドショーの記述をご設置のうえ、画像をスライドさせることは可能かと存じます。

商品紹介文の欄とは以下のことです。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

商品画像、カートボタンの下に存在するエリアが「商品紹介文」になります。ここは3つに分かれています。上から順番に「メイン紹介文」「サブ紹介文1」「サブ紹介文2」です。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

このエリアにはHTMLを書くことができます。
全角で32,500文字まで書けるので十分なボリュームがあります。

ちなみに「サブ紹介文1」「サブ紹介文2」は「カスタムテンプレート」を使っているとデフォルトでは表示されません。ショップサーブでテンプレートを選ぶ際、大体カスタムテンプレートを選ぶと思うので、そのままでは使えないことになります。

商品紹介文の入力欄付近に「カスタムテンプレートのご利用について」というボタンがあるのですが、

ここをクリックするとヘルプページに繋がり、そこに「サブ紹介文1」「サブ紹介文2」を表示させる方法が掲載されています。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

 

スポンサーリンク

紹介文へのスライダー導入は本当に使うことがあるか?

正直、「メイン紹介文」「サブ紹介文1」「サブ紹介文2」の場所にスライダーを入れることはないと思います。

UI的にどうなの?

という話もあるのですが、一番問題なのは商品画像を差し替える際には必ずコードを弄る必要が出てくることです。管理者がコーディングできる人なら問題ないのですが、そうでない方が運用する場合はハードルが高いです。

画像差し替えの度にHTMLを編集していたら超大変です

とはいえ、もしスライダーを導入するなら・・・。
ということを考えて方法をメモしておきます。

手順は以下です。

①導入するスライダープラグインを選ぶ
②FTPで必要ファイルをアップロードする
③<head>タグにJavaScriptの読み込みの記述を書く
④「メイン紹介文」「サブ紹介文1」「サブ紹介文2」のエリアにスライダーのHTMLコードを書く
⑤CSSでスタイルを整える

スライダーを自作する場合は別ですが、多くの場合はスライダープラグインを使用すると思います。有名なのは「swiper.js」か「slick」でしょうか。私は「swiper.js」をよく使っています。

ショップサーブはFTPが使えるので、プラグインの動作に必要なファイルを任意のディレクトリにアップロードします。ただCDNを利用するなら不要です。

FTPは管理画面の「FTPアカウント」から設定可能です。
アカウントの作成や権限のコントロールもできます。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

「docs」というディレクトリの配下に自由にファイルを設置できます。
たとえば「docs/aseets/js」といった感じで作ればいいですね。

スライダープラグインのアップロードが完了したら、次はそれらのファイルを読み込みます。ショップサーブの管理画面からheadタグの編集ができるので、ここにJavaScriptの読み込み記述を書きます。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

つづいて「メイン紹介文」「サブ紹介文1」「サブ紹介文2」のエリアにコードを書きます。管理画面上で直接HTMLコードを書きます。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

ここまでくれば、少なくともスライダーとして機能しているはずです。最後にCSSでスタイルを調整します。CSSの調整も管理画面から行うことができます。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

 

スポンサーリンク

スライダーが標準搭載されているテンプレートもある(トップページのファーストビュー部分)

ショップサーブで選べるテンプレートの中に「レスポンシブデザイン対応テーマ(上級者向け)」というものがあります。このテーマには、サイトTOPのファーストビューにスライダーが標準搭載しています。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

コードを見る感じ「slick」を使っているようです。

ショップサーブ(shopserve)で商品詳細にスライダーを入れたい

商品詳細ではありませんが、ファーストビューにスライダーを入れたい場合はこちらのテーマを利用すれば良いです。自分でコーディングする手間が省けます。

 

スポンサーリンク

まとめ

この記事のポイントをまとめます。

・商品画像の部分にスライダーを導入することはできない
・しかし、画像の下の「商品紹介文」エリアにはスライダーを導入できる(要コーディング)
・トップのファーストビューにスライダーを入れたいだけなら、スライダー標準搭載のテンプレートがある

ショップサーブのサポートの方は終始丁寧でした。
私の問い合わせに対応してくださり、本当にありがとうございました。

今回の記事はここまです。

この記事を書いた人
Shopify飯店店主

自分の仕事の経験を記事にしています。東証一部のEC企業で5年→個人事業主→法人化。サイト構築実績80社以上、ECコンサル・分析実績40社以上。コンサルにおいては、EC売上3倍、キャンペーン応募者数1.7倍などの実績があります。

Shopify飯店店主をフォローする
スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました