FROM CACHE - jp_header
解決済

スライドアウトカート内の編集について

misa_h
観光客
7 0 2

お世話になります。

現在Be Yoursを使用しています。

スライドアウトカートに表示されるshippingとrecommendについて教えてください。

 

◆shippingが、国・都道府県、郵便番号の3つを選択しなければならないですが、

これを郵便番号だけ(もしくは都道府県だけ)の表示にしたいです。

もしくはshipping自体を非表示にしたいです。

どの様にしたら良いでしょうか。

misa_h_0-1661927243167.png

 

◆recommendに出てくる商品をクリックしても

クリックした商品とは異なるページに飛ばされます。

正しい動きにするにはどこをどういう風に編集したら良いでしょうか。

またはスライドアウトカート内のrecommendを非表示にしたいです。

misa_h_1-1661927396730.png

 

どうぞお知恵を貸してください。

よろしくお願いいたします。

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 431 418

成功

有料テーマのため、コード編集画面が開けないので、

ざっくりとした回答になってしまう上、

私が検証したのが、Be Yoursの最新版(5.4.0)であるためか質問者さまに提示いただいているデザインと若干異なるため、私のやり方で質問者さまも、うまくいくか自信がないのですが、

参考になるかもしれないので、調査結果をご報告いたします。

 

[Shippingを非表示にする]

※郵便番号だけにした際に、うまく動くか分からなかったので、Shippingそのものを非表示にする方法をお伝えします。

 

ストア管理画面 > オンラインストア > テーマ > 現在のテーマの「アクション」 > コードを編集

をから、コード編集画面に進んでいただき、

おそらく、アセット(assets)に、

component-cart-drawer.css

というファイルがあると思いますので、そちらを修正します。

 

.mini-cart__actions details + details {
  border-inline-start: 0.1rem solid rgb(var(--color-border));
}

という記述があると思いますので、こちらを下記のようにすることで、Shippingを非表示にできるはずです。

.mini-cart__actions details + details {
  border-inline-start: 0.1rem solid rgb(var(--color-border));
    display: none;
}

 

上記のコードそのままではないかもしれないので、

.mini-cart__actions details + details

などで、検索すると見つけやすいかと思います。

 

 

[Recommendを非表示にする]

同じく、アセット(assets)のcomponent-cart-drawer.cssを編集します。

 

.cart-recommendations {
  position: relative;
  display: block;
  margin-top: 1rem;
  border-top: 0.1rem solid rgb(var(--color-border));
}

上記のコードを下記のようにします。

.cart-recommendations {
  position: relative;
  display: none;
  margin-top: 1rem;
  border-top: 0.1rem solid rgb(var(--color-border));
}

 

こちらも、

.cart-recommendations

でコード内を検索いただくと目的のコードに辿り着きやすいかと思います。

 

 

以上です。

参考になれば幸いです。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1051 431 418

成功

有料テーマのため、コード編集画面が開けないので、

ざっくりとした回答になってしまう上、

私が検証したのが、Be Yoursの最新版(5.4.0)であるためか質問者さまに提示いただいているデザインと若干異なるため、私のやり方で質問者さまも、うまくいくか自信がないのですが、

参考になるかもしれないので、調査結果をご報告いたします。

 

[Shippingを非表示にする]

※郵便番号だけにした際に、うまく動くか分からなかったので、Shippingそのものを非表示にする方法をお伝えします。

 

ストア管理画面 > オンラインストア > テーマ > 現在のテーマの「アクション」 > コードを編集

をから、コード編集画面に進んでいただき、

おそらく、アセット(assets)に、

component-cart-drawer.css

というファイルがあると思いますので、そちらを修正します。

 

.mini-cart__actions details + details {
  border-inline-start: 0.1rem solid rgb(var(--color-border));
}

という記述があると思いますので、こちらを下記のようにすることで、Shippingを非表示にできるはずです。

.mini-cart__actions details + details {
  border-inline-start: 0.1rem solid rgb(var(--color-border));
    display: none;
}

 

上記のコードそのままではないかもしれないので、

.mini-cart__actions details + details

などで、検索すると見つけやすいかと思います。

 

 

[Recommendを非表示にする]

同じく、アセット(assets)のcomponent-cart-drawer.cssを編集します。

 

.cart-recommendations {
  position: relative;
  display: block;
  margin-top: 1rem;
  border-top: 0.1rem solid rgb(var(--color-border));
}

上記のコードを下記のようにします。

.cart-recommendations {
  position: relative;
  display: none;
  margin-top: 1rem;
  border-top: 0.1rem solid rgb(var(--color-border));
}

 

こちらも、

.cart-recommendations

でコード内を検索いただくと目的のコードに辿り着きやすいかと思います。

 

 

以上です。

参考になれば幸いです。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
misa_h
観光客
7 0 2

キュー田辺 様

詳細ご教示くださいましてありがとうございます!

教えていただいた方法で2点とも解決いたしました。
ありがとうございました!