Liquid、JavaScriptなどに関する質問
<details-modal class="header__search"> <details> <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label="{{ 'general.search.search' | t }}" > <span> <span class="svg-wrapper"> {{- 'icon-search.svg' | inline_asset_content -}} </span> <span class="svg-wrapper header__icon-close"> {{- 'icon-close.svg' | inline_asset_content -}} </span> </span> </summary> <style> <div class="search-modal modal__content gradient" role="dialog" aria-modal="true" aria-label="{{ 'general.search.search' | t }}" > <div class="modal-overlay"></div> <div class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}" tabindex="-1" > {%- if settings.predictive_search_enabled -%} <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}"> {%- else -%} <search-form class="search-modal__form"> {%- endif -%} <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form"> <div class="field"> <input class="search__input field__input" id="{{ input_id }}" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.search' | t }}" {%- if settings.predictive_search_enabled -%} role="combobox" aria-expanded="false" aria-owns="predictive-search-results" aria-controls="predictive-search-results" aria-haspopup="listbox" aria-autocomplete="list" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" {%- endif -%} > <label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label> <input type="hidden" name="options[prefix]" value="last"> <button type="reset" class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}" aria-label="{{ 'general.search.reset' | t }}" > <span class="svg-wrapper"> {{- 'icon-reset.svg' | inline_asset_content -}} </span> </button> <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}"> <span class="svg-wrapper"> {{- 'icon-search.svg' | inline_asset_content -}} </span> </button> </div> {%- if settings.predictive_search_enabled -%} <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search> {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%} </div> <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span> {%- endif -%} </form> {%- if settings.predictive_search_enabled -%} </predictive-search> {%- else -%} </search-form> {%- endif -%} <button type="button" class="search-modal__close-button modal__close-button link link--text focus-inset" aria-label="{{ 'accessibility.close' | t }}" > <span class="svg-wrapper"> {{- 'icon-close.svg' | inline_asset_content -}} </span> </button> </div> </div> </details> </details-modal>
テーマはDAWNを使用しています。
虫眼鏡のマークを選択すると、検索窓が出現するようになっているのですが、
この検索窓がヘッダーのほかの要素の上に出現し、文字などがかぶった状態で出てしまいます。
また、検索窓を閉じるための「×」ボタンも2つ出現しています。
バージョンは15を使用しています。どなたか解決方法をご存知の方がいらっしゃいましたら
ご教示いただけますと幸いです。
解決済! ベストソリューションを見る。
成功
@uf2 様
問題があるとすると、貼っていただいたHTMLではなく、CSSの方ではないかと思います。
しかし、CSSを記載いただいたとしても、その情報から何が問題かを見つけるのは難しいのではないかと思います。
開発パートナーがいらっしゃるようでしたら、そちらに相談するのがおすすめですが、
もしいらっしゃらないようなら、プライベートメッセージでやりとりさせていただいて、
問題が発生しているページを実際に拝見できれば、
具体的な解決策をご提示できる可能性があります。
(解決のお約束はできませんが。)
ご参考まで。
(キュー田辺)
成功
@uf2 様
問題があるとすると、貼っていただいたHTMLではなく、CSSの方ではないかと思います。
しかし、CSSを記載いただいたとしても、その情報から何が問題かを見つけるのは難しいのではないかと思います。
開発パートナーがいらっしゃるようでしたら、そちらに相談するのがおすすめですが、
もしいらっしゃらないようなら、プライベートメッセージでやりとりさせていただいて、
問題が発生しているページを実際に拝見できれば、
具体的な解決策をご提示できる可能性があります。
(解決のお約束はできませんが。)
ご参考まで。
(キュー田辺)
株式会社Q
田辺様
ご確認いただきありがとうございます。
フロント部分はほかにも修正したいと思っていた箇所があったため、これを機にオリジナルのDAWNテーマを再度
反映させることにいたしました…!
ご親切にご回答いただきありがとうございました。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024