テーマはDawnを使用しています。
モバイルからサイトを閲覧した場合の、ログイン/カート画面のテキストサイズを小さくしたいです。
Liquidのどこを編集すればいいか教えて頂ける方がいましたらご教示お願いします。
以下の全ての文言をそれぞれ少しづつ小さくしたいと考えております！
①ログイン画面
・ログイン
・メール
・パスワード
・パスワードをお忘れですか？
・ログイン
・アカウントを作成する
②カート画面
・カートは空です
・買い物を続ける
・アカウントをお持ちですか？
・ログインすることでチェックアウトがスピーディに行えます。
よろしくお願いします。
ご質問いただいています、モバイルで表示した際ログイン画面・カート画面でフォントサイズを変更したい件ですが、liquidファイルを変更するのではなくCSSの変更となりますので、管理画面から対応ページのカスタムCSSにモバイル用のCSSを追加することで対応が可能です。
下記対応方法となります。
ログイン画面
管理画面のカスタマイズから、『従来のお客様アカウント > お客様のログイン』を選択し左メニューの『ログイン』をクリック
カスタムCSSに下記CSSを追加し保存してください。
@media screen and (max-width: 750px) {
#login {
/*ログイン*/
font-size: 20px;
}
.customer .field label {
/*メール、パスワード*/
font-size: 12px;
top: calc(12px + var(--inputs-border-width));
}
.login a[href="#recover"] {
/*パスワードをお忘れですか？*/
font-size: 14px;
}
.customer button {
/*ログイン*/
font-size: 14px;
}
.login a[href="/account/register"] {
/*アカウントを作成する*/
font-size: 14px;
}
}
font-sizeの数値を任意の数値に変更ください。
メール、パスワードの12pxの数値はfont-sizeと同じ数値に設定してください。
カート画面
管理画面のカスタマイズから、『カート』を選択し左メニューの『アイテム』をクリック
カスタムCSSに下記CSSを追加し保存してください。
@media screen and (max-width: 750px) {
.cart__empty-text {
/*カートは空です*/
font-size: 20px;
}
.button {
/*買い物を続ける*/
font-size: 14px;
}
.cart__login-title {
/*アカウントをお持ちですか？*/
font-size: 14px;
}
.cart__login-paragraph {
/*ログインすることで、・・・*/
font-size: 14px;
}
}
font-sizeの数値を任意の数値に変更ください。
ご参考まで。
(キュー小坂)
いつもお世話になっております！
お忙しい中返信ありがとうございます！
・カート画面は修正できました。
・ログイン画面は "「お客様のログイン』を選択し左メニューの『ログイン』"が見当たりません。テーマによる違いでしょうか？
大変お手数ですが、もう少し詳しくご教示頂けますと幸いです。よろしくお願いします！
ログイン画面でログインが見当たらなかったとのことですが、
私の環境Dawn 10.0.0では添付画像の様に表示されておりました。
対象箇所がないとのことでしたら、もしかしたらバージョンの可能性もございます。
ログイン画面につきましては、『テーマ設定』のカスタムCSSに記載いただいても対応は可能かと思います。
上記でご提示させていただきましたCSSとは一部調整を加えておりますので、下記CSSをご利用ください。
@media screen and (max-width: 750px) {
.login #login {
/*ログイン*/
font-size: 20px;
}
.login .field label {
/*メール、パスワード*/
font-size: 12px;
top: calc(12px + var(--inputs-border-width));
}
.login a[href="#recover"] {
/*パスワードをお忘れですか？*/
font-size: 14px;
}
.login button {
/*ログイン*/
font-size: 14px;
}
.login a[href="/account/register"] {
/*アカウントを作成する*/
font-size: 14px;
}
}
ご参考まで。
(キュー小坂)
修正できました！
いつも本当にありがとうございます！