[戻る]
No.5593

サイト内の修正

AOさん  投稿日:2021/08/24(Tue) 19:47
key

できるできない合わせてお聞きできればと思います。

1.スマホで商品画像をタップした時に左右の矢印がoverで表示されますが、それを常時表示させたい

.lb-nav a.lb-next {
opacity: 1!important;}

.lb-nav a.lb-prev {
opacity: 1!important;}

上記をCSSに追記したのですが
これだと反映されませんでした。

2.商品画像のサムネイルが二列になっていますが一列にしてスライドされるように表示したい

3.スマホで画面をスライドしていくとカートに入れるという部分が下部に固定されるようにしたい

4.ヘッダーにお気に入りにと買い物かごに入れたものがわかるようなアイコンとそれぞれ入れている数を表示させたい

以上アドバイスいただければ幸いです。

Re: サイト内の修正

おたすけマイショップさん  2021/08/25(Wed) 15:35 No.5598
key

お問い合わせについてインラインにて失礼いたします。

>1.スマホで商品画像をタップした時に左右の矢印がoverで
> 表示されますが、それを常時表示させたい

下記スタイルにて、スマートフォン表示時に商品画像クリック後の左右画像切替の矢印を常に表示できます。
なお、システムの都合上テンプレートへ追加されないとCSSが反映されません。
登録箇所は下記URLをご参照ください。

 サイトにCSS(スタイルシート)を追加する
 https://emshelp.easy-myshop.jp/c-item-detail?ic=site-style

■スマートフォン表示で商品画像クリック後の左右画像切替の矢印を常に表示するスタイル
@media screen and (max-width: 700px) {
.lb-nav a.lb-next{
opacity: 1!important;
}
.lb-nav a.lb-prev {
opacity: 1!important;
}
}


>2.商品画像のサムネイルが二列になっていますが一列にして
> スライドされるように表示したい

商品画像のサムネイルを2列表示とせず、スライドさせる機能は現状ございませんことをご了承ください。

以下のスタイルを追加していただくことで似た表示は可能となります。

@media screen and (max-width: 700px) {
.thumbnail_group_all.thumbnail_group_origin {
display: flex;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.item_detail .item_image_thumbnail .item_image_thumbnail_frame { /* サムネイル画像を大きく */
width: 68px;
height: 68px;
flex: 0 0 68px;
}
}

スタイルの追加方法は前述のヘルプページの手順と同じです。

[スタイル追加に関するご注意]
 標準で提供する機能及び設定ではございませんので今後のバージョンアップにて上記スタイルが正常に適用されない場合がございます。
 以上をご了承いただいた上でスタイルの追加を行ってください。


>3.スマホで画面をスライドしていくとカートに入れるという部分が
> 下部に固定されるようにしたい

恐れ入りますが、画面スクロール時にカートに入れるボタンを追従させる設定はございませんことをご了承ください。

動作保証はできませんが、カートボタンを一定の画面スクロール後に追従させる方法はございます。
プログラム等を使用する方法(イージーマイショップでは非推奨の方法)となりますので、ご希望の場合はお問合せフォームからご連絡ください。
サンプルのコードを案内いたします。


>4.ヘッダーにお気に入りにと買い物かごに入れたものがわかるような
> アイコンとそれぞれ入れている数を表示させたい

カート情報に関しては、ページレイアウト管理(拡張設定>デザイン設定)で「未使用パーツ」の[新規作成]から
「ウェルカムメッセージ(ログイン、カート情報)」や「カート情報」パーツにある「□カート情報(レジ リンク)」にて表示が可能です。
パーツ作成後、表示させたい場所へパーツを配置してください。

また、お気に入り数を表示させることはできませんが、お気に入りへのリンクはページレイアウト管理(拡張設定>デザイン設定)で
「未使用パーツ」の[新規作成]で「ウェルカムメッセージ(ログイン、カート情報)」にある「□お気に入り リンク」にて表示が可能です。


最後に、基本的に弊社サポート範囲はイージーマイショップ上で予め用意している機能の設定や操作方法となります。
CSSによる設定はサポート外の部分もあり、設定のご案内ができない場合もございますことを予めご了承ください。



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

無料で本格的なネットショップ開業できるのは『イージーマイショップ』