カラーミーのスマホ向けページ表示

Question

いつもお世話になっております

現在SEOナチュラルのテンプレートを使用しておりますが
スマホで見ると、商品説明の欄の右側にある（＋）マークを押さなくては
説明が見られない状態になっています。

これを、マークをクリックしなくても最初から展開しているようなデザインに
変更することは可能でしょうか？


もうひとつの質問はPC版の表示についてですが
商品ページに入った右側の欄（商品詳細が表示される部分）の
横幅を拡げたいと考えています
設定の仕方があれば教えてください

Answer

ECマスターズの田中です。


＞マークをクリックしなくても最初から展開しているようなデザインに
＞変更することは可能でしょうか？

たとえば、ページを読み込むと同時に
マークをクリックさせ、
最初から展開していたように見せることができます。

https://shop-pro.jp/manual/s_design_tmpl_lst
上記、スマートフォン デザイン設定の
「デザイン設定」ボタン→「4.商品詳細」用の「HTML CSS編集ボタン」
より、HTML編集の任意の場所（先頭、末尾など）に
下記内容を挿入してください。

= この下の行から ====================

// スマホ用商品説明を最初から展開
$(function(){
  $('div.more_btn').click();
});

= この上の行まで ====================


＞PC版の表示についてですが 
＞商品ページに入った右側の欄（商品詳細が表示される部分）の 
＞横幅を拡げたいと考えています 
＞設定の仕方があれば教えてください 

商品詳細テンプレート・初級モードの中に設定がない場合、
上級モードでスタイルシートの編集をお願いします。

最初に、
https://shop-pro.jp/manual/design_tmpl_lst_sub1
上記、デザイン設定（初級）にて、
「1.共通」用の「項目編集」に
幅の設定があるかどうかご確認いただき、
ある場合は設定をお願いします。

ない場合は、
https://shop-pro.jp/manual/design_tmpl_lst_sub2
上記、デザイン設定（上級）にて、
「1.共通」用の「HTML CSS編集」ボタンより
CSSの編集をお願いします。

※以下、商品ページに入った右側の欄を「コンテンツ」と呼びます。

jfさんのショップのPC用テンプレートでは、
レフトナビ＋コンテンツの幅、レフトナビの幅、コンテンツの幅が
それぞれ定義されております。

コンテンツの幅だけを増やす際に、
レフトナビ＋コンテンツの幅を超えてしまうと
レフトナビがコンテンツの下に移動してしまいますので、
レフトナビ＋コンテンツの幅も同じだけ拡げてください。

それぞれの幅がスタイルシートの中で定義されている場所についてですが、
コンテンツの幅は
#contents #inn-box に対する規則内の width
で、レフトナビ＋コンテンツの幅は
#contents に対する規則内の width
で、それぞれ定義されておりますので、これらを同じ量だけご変更ください。

スタイルシートの変更方法など、
不明な点がありましたら再度ご返信ください。

Answer

ありがとうございます！
スマホ向けの表示が希望通りのものに設定できました。
表示領域につきましてはいったん別方法をとることにしたので
今回はこのままいくことになりましたがまた機会があればアドバイスお願いします

弊社の新商品に少しランディングページを作ったのですが
商品説明欄に3枚の長い画像を貼りつけているような状態です
カートまでが遠いため、カラーミーに貼り付けた後
画像1と２の間、そして画像２と３の間に何かボタン素材を置いて
そこに【カートに入れる】や【カートに飛ぶ】のリンクを貼りたいと思っています。
その際のタグ等教えていただければ助かります。
よろしくお願い致します。

Answer

ECマスターズの田中です。

以下の文字列を、リンク先のURLに設定したリンクを作っていただけますでしょうか。

■カートに入れる用
javascript:(function(){$('html,body').animate({scrollTop: $('.spec, .wrap:has(.cart)').offset().top}, 500, 'swing');})();
■カートに飛ぶ用
javascript:(function(){$('.cart_button button, .cart input').click();})();

使用例：
カートに入れる

Answer

ありがとうございました。
貼ってみます！