Liquid、JavaScriptなどに関する質問
お世話になります。
現在Be Yoursを使用しています。
スライドアウトカートに表示されるshippingとrecommendについて教えてください。
◆shippingが、国・都道府県、郵便番号の3つを選択しなければならないですが、
これを郵便番号だけ(もしくは都道府県だけ)の表示にしたいです。
もしくはshipping自体を非表示にしたいです。
どの様にしたら良いでしょうか。
◆recommendに出てくる商品をクリックしても
クリックした商品とは異なるページに飛ばされます。
正しい動きにするにはどこをどういう風に編集したら良いでしょうか。
またはスライドアウトカート内のrecommendを非表示にしたいです。
どうぞお知恵を貸してください。
よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
有料テーマのため、コード編集画面が開けないので、
ざっくりとした回答になってしまう上、
私が検証したのが、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
でコード内を検索いただくと目的のコードに辿り着きやすいかと思います。
以上です。
参考になれば幸いです。
(キュー田辺)
成功
有料テーマのため、コード編集画面が開けないので、
ざっくりとした回答になってしまう上、
私が検証したのが、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
でコード内を検索いただくと目的のコードに辿り着きやすいかと思います。
以上です。
参考になれば幸いです。
(キュー田辺)
キュー田辺 様
詳細ご教示くださいましてありがとうございます!
教えていただいた方法で2点とも解決いたしました。
ありがとうございました!
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025