言語セレクターの移動

日本語 ディスカッション 技術的なQ＆A
1

言語セレクターをフッターからヘッダーへ移動したいのですが

shopifyヘルプ曰く、コード編集が必要とのことでした。どなたかご教授いただければ幸いです。

テーマはCRAFTを使っています。

よろしくおねがいします

2

HTMLやCSSの編集も必要になるかと思いますが、

どのように表示したいかによってコードが変わってきてしまうため、

どの部分のどのコードをどこに持っていけば良いかを、ひとまず、お伝えします。

(1)

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

からコード編集画面に入ります。

(2)

セクション(sections) から、footer.liquidを探します。

(3)

footer.lqiuidの下記の行(229行目-318行目)が、該当のコードになります。こちらを切り取ります。


        {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
          
          
        {%- endif -%}

        {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
          

          
        {%- endif -%}

(4)

セクション(sections) から、header.liquidを探し、表示させたいと思われる箇所に、上記のコードを挿入します。

(5)

セクション(sections) のfooter.liquidに戻り、下記の2つのコードを切り取ります。

(538行目-543行目)

{
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_country_selector.label"
    },

(549行目-554行目)

{
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_language_selector.label"
    },

(6)

セクション(sections) のheader.liquidに戻り、下記のコードのあたりに、上記2つを貼り付けます。

"name": "t:sections.header.name",
  "class": "section-header",
  "settings": [

// この辺りに貼り付けます

    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },

以上で、ヘッダーに持っていくことはできると思います。

また、

ストア管理画面 > オンラインストア > テーマ > Craft > カスタマイズ

から、

「ヘッダー」を選択することで、

言語セレクターと国セレクターの表示のON/OFFが可能です。

(元々フッターにあったものを、5と6の手順で、ヘッダーに持ってきました。)

スタイル調整に詰まることがありましたら、

お気軽にご質問ください。

(必ず解決できるとは限りませんが。)

ご参考まで。

(キュー田辺)

1 Like
3

ありがとうございます

大変助かりました

1 Like