カラーミーのレイアウト変更

Question

http://www.factorhia.net/?pid=77448125

▶こちらのショップさんのよう画像をいっぱいでランディングページのように
商品ページを仕上げたいと思っています。（名入れなどで注文方法がわかりづらいや
石けんの写真をもっとちゃんと見せたいので）

こちらのショップさんのようにレイアウト変更するにはHTMLとCSSをどのように変更すればいいでしょうか。
ちなみ現在当店はこんな感じです。PCverは横に画像がいってしまって小さいです。
https://shop.marianaocean.com/?pid=129636215

▶また離脱を防ぐためにカゴはページ上にもページ下にもつけたいのですが、それは可能ですか？

Answer

ECマスターズの田中です。

管理画面側で閲覧できる正確なソースが手元にないため、
推測でご回答させていただきます。
実際のソースと異なる場合は、
「商品詳細」テンプレートの「HTML」の内容を
お問い合わせ窓口、もしくは club@ec-masters.net 宛にお送りください。

また、それぞれ変更作業を行われる前に、
万が一デザインが崩れてもすぐに元に戻せるよう、
過去の内容をメモ帳などにコピー＆ペーストしておくなど、
バックアップを取っておいていただきますようお願いします。

> こちらのショップさんのようにレイアウト変更するにはHTMLとCSSをどのように変更すればいいでしょうか。

「商品詳細」テンプレートの「HTML」にて、

上記行の下に、

この１行を挿入していただき、PC・スマホ、それぞれで表示をご確認ください。

見た目が問題ないようであれば、
元の場所にあるを削除していただくことで、
横幅の小さい商品説明をなくすことができます。

> 離脱を防ぐためにカゴはページ上にもページ下にもつけたいのですが、それは可能ですか？

可能ではありますが、
注文するために必要な情報（購入個数、商品によりオプションの選択など）を
盛り込むことを考えながら、フォームの仕組みを作る必要がございますので、
本来のカートに入れるボタンへジャンプさせるリンクを作るほうが
現実的だと思います。

テンプレートに、下記のURLへのリンクを作成していただければ結構です。
※aloha_odenさんのショップで使っているテンプレートでのみ動作します。

■「カートに入れる」直前の商品情報へジャンプする場合
javascript:(function(){$('html,body').animate({scrollTop:$('.product_info_block').offset().top});})();
■「カートに入れる」ボタン自体へジャンプする場合
javascript:(function(){$('html,body').animate({scrollTop:$('input[value=カートに入れる]').offset().top});})();

Answer

https://shop.marianaocean.com/


ここのスライドの部分をYoutubeにアップしている動画に変更したいのですが、
それは可能ですか？

Answer

ECマスターズの田中です。

メールにてHTMLをお送りいただき、
ありがとうございました。

いただいたHTMLの場合、

上記行の下に

この１行を挿入していただきますようお願いします。

> ここのスライドの部分をYoutubeにアップしている動画に変更したいのですが、
> それは可能ですか？

YouTubeにアップロードしたままでは難しいですが、
PC内の動画ファイルをカラーミーのFTPサーバにアップロードしていただければ、
「BigVideo」というjQueryプラグインを利用して
背景として動画を表示させることができます。
https://www.saaria.info/archives/459

その際、
https://forum.ec-masters.net/post_view.php?id=7483
にてご案内差し上げた「Supersized」と
入替えていただく必要がございますので、
作業の際は、いつでも元に戻せるようバックアップを取っていただきつつ、
注意深く作業を行っていただきますようお願いします。

また、ファイルサイズの大きい動画をご利用されますと
ページの読み込み時、お客様に負担をかける可能性がございますので、
大きくて3MB程度の、なるべく軽い動画ファイルをご利用いただきますよう
お願いします。

Answer

かしこまりました。できたら動画とか載せたいのですが、
上手くいかない可能性高いですね。
教えていただきありがとうございます。

ちなみに以前聞いたカートに入れるスクリプトをいれたのですが、
ページを開いた瞬間、カートに入れるに移動して思った通りの動作はしませんでした。
例えばページ上部にカート入れるボタンを設置して、そこを押してもらったらカートに入れる
というのにしたいのですが、その場合どうすればいいでしょうか・。

Answer

ECマスターズの田中です。

> 例えばページ上部にカート入れるボタンを設置して、そこを押してもらったらカートに入れる
> というのにしたいのですが、その場合どうすればいいでしょうか・。

前回いただいた「商品詳細HTML.txt」の
169行目〜183行目、つまり

から

までの間に複製していただくことで、
カートに入れるボタンの設置をすることができますが、

オプション、購入数の部分は元の位置にあるままで、
それらも複製しようとすると、
２つある入力欄の値をJavaScriptを利用して同期する、など
複雑な処理が必要となってしまいます。

そのため、以前申し上げた、
カートに入れるボタンにジャンプさせる方法が望ましいと思うのですが、
> ページを開いた瞬間、カートに入れるに移動して思った通りの動作はしませんでした。
というのは、実際どのような動作でしたでしょうか。

リンクをクリックすると、同じページの「カートに入れる」ボタンに移動するのが
私の想定していた動作なのですが、
どうしてもそれではご希望に沿わない、ということでしょうか。