>> Udemyのセール!Shopify講座が2,000円から!6/2まで

【Shopify】有料テーマBaselineの通貨・言語セレクターをスニペット化して任意の場所で表示させる方法

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ カスタマイズ

有料テーマBaselineの通貨・言語セレクターをフッター以外の場所に表示したい。
ウェブサイト内の任意の場所に、通貨・言語セレクターを出したい。

こんなことを考えている方へ。
この記事のポイントは以下です。

①有料テーマBaselineの通貨・言語セレクターをスニペット化する方法
②スニペット化した通貨・言語セレクターをウェブサイトの任意の場所に表示する方法

Shopify飯店

Shopify飯店

🔽Shopifyを学びたい方へ👇
私はShopifyを独学しましたが、いま思えば効率が悪かったと思います。
自身の経験を踏まえて、おすすめの学習方法を以下の記事にまとめました。

Shopifyの学習方法まとめ
🔽その他のおすすめ記事はこちら👇
・おすすめの書籍こちら📚
・おすすめのUdemy動画教材こちら🎦
独学ロードマップはこちら🖥
・おすすめオンラインスクールまとめはこちら📖
スクールの中でもデイトラがおすすめです🏫

 

スポンサーリンク

【Shopify】有料テーマBaselineの通貨・言語セレクターをスニペット化して任意の場所で表示させる方法

Shopifyの有料テーマBaselineの通貨・言語セレクターをスニペット化する方法を解説します。

通常、Baselineの通貨・言語セレクターはフッターの決まった位置にしか出せません。
しかし、Liquidコードをカスタマイズして通貨・言語セレクターをスニペット化することで、サイト内の自由な場所に通貨・言語セレクターを表示することができます。

この作業を行うことで、次のようなニーズに対応できます。

・フッターだと発見されにくいので、通貨・言語セレクターを別の場所に表示したい
・デザインの調整で通貨・言語セレクターをヘッダーやドロワー内などの別の場所に表示したい

では、手順を解説します。

 

①Baselineのデフォルトの通貨・言語セレクターはフッターにしか出せない

まず、デフォルトの通貨・言語セレクターについて確認しましょう。
デフォルトでは、フッターの右下に表示されます。

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ

【関連記事】【Shopify】テーマストアのデモサイトのURLまとめ【iframeで使いにくい】

【Shopify】テーマストアのデモサイトのURLまとめ【iframeで使いにくい】
Shopifyのテーマストアに掲載されている無料テーマ、有料テーマのデモサイトのURLまとめました。テーマストアのプレビューからサイトを見ることができますが、iframeで表示されているので使いにくいです。そこで、各テーマのURLを自分用にまとめることにしました。

公式テーマのデモサイトには通貨セレクタしかでいていません。
ただ実際は、管理画面から操作することで「言語セレクター」も出すことができます。

Show language selector
Show country/region selector

の両方にチェックを入れればOKです。

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ

こんな感じで表示されます。

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ

 

②【コピペ可能】Baselineの通貨・言語セレクターをスニペット化する

では、コードをスニペット化してみます。
Baselineの通貨・言語セレクターのコードはこちらです。

<div class="" data-section-id="LocalizationSelector" data-section-type="footer" data-color-scheme="footer">
 {%- form 'localization', data-disclosure-form: '' -%}
 <div class="inline-block {% if country_selector and locale_selector %}mr-4{% endif %}">
  <h2 class="visually-hidden" id="lang-heading">
   {{ 'general.language.dropdown_label' | t }}
  </h2>
  <div class="relative" data-disclosure-locale>
   <button type="button" class="text-sm border-b-text border-scheme-text py-1" aria-expanded="false" aria-controls="lang-list" aria-describedby="lang-heading" data-disclosure-toggle>
    {{ form.current_locale.endonym_name }}
    <span class="inline-block ml-1 w-3 fill-current">
     {% render 'icon-chevron-down' %}
    </span>
   </button>
   <ul id="lang-List" class="disclosure-list absolute bg-scheme-background opacity-0 top-0 lg:left-auto lg:right-0 transform transition-opacity border-text border-theme-color py-2" data-disclosure-list inert>
    {% for locale in form.available_locales %}
    <li class="text-sm">
     <a class="block p-2" href="#" lang="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %} data-value="{{ locale.iso_code }}" data-disclosure-option>
      <span class="{% if locale.iso_code == form.current_locale.iso_code %}border-scheme-text border-b-text{% else %}border-transparent border-b-text{% endif %}">{{ locale.endonym_name }}</span>
     </a>
    </li>
    {%- endfor -%}
   </ul>
   <input type="hidden" name="locale_code" id="LocaleSelector" value="{{ form.current_locale.iso_code }}" data-disclosure-input/>
  </div>
 </div> 
 <div class="inline-block">
  <h2 class="visually-hidden" id="country-heading">
   {{ 'general.country.dropdown_label' | t }}
  </h2>
  <div class="relative" data-disclosure-country>
   <button type="button" class="text-sm border-b-text border-scheme-text py-1" aria-expanded="false" aria-controls="country-list" aria-describedby="country-heading" data-disclosure-toggle>
    {{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
    <span class="inline-block ml-1 w-3 fill-current">
     {% render 'icon-chevron-down' %}
    </span>
   </button>
   <ul id="country-list" class="disclosure-list absolute bg-scheme-background opacity-0 top-0 left-0 lg:left-auto lg:right-0 transform transition-opacity border-text border-theme-color py-2" data-disclosure-list inert>
    {% for country in localization.available_countries %}
    <li class="text-sm w-40">
     <a class="block p-2" href="#" {% if country.iso_code == localization.country.iso_code %}aria-current="true"{% endif %} data-value="{{ country.iso_code }}" data-disclosure-option>
      <span class="{% if country.iso_code == localization.country.iso_code %}border-scheme-text border-b-text{% else %}border-transparent border-b-text{% endif %}">{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
     </a>
    </li>
    {%- endfor -%}
   </ul>
   <input type="hidden" name="country_code" id="CountrySelector" value="{{ localization.country.iso_code }}" data-disclosure-input/>
  </div>
 </div>
 {%- endform -%}
</div>

これをスニペット化するだけでOKです。

オンラインストア>テーマ>コードを編集 へと進みます。

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ

「新しいスニペットを追加する」を押します。

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ

「localization-selector.liquid」と名前をつけて作成します。
ここのスニペット名はなんでもいいです。

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ

先ほどのコードを丸っと貼り付けます。
そして「保存」を押します。

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ

これで保存ができました。

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ

 

③スニペット化したコードを任意の場所に表示する

あとは、このスニペットを好きな場所に表示するだけです。
スニペットを呼び出すには、

{% render 'ファイル名(.liquid部分は不要)' %}

を使います。

今回だと、

{% render 'localization-selector' %}

です。

たとえば、ヘッダーに入れたかったら、header.liquidを探して・・・

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ

たとえばスタイリング用に<div>で囲って・・・

<div class="header-LocalizationSelector">
 {% render 'localization-selector' %}
</div>

コードを挿入すればOKです。
これで完了です。

Shopify 有料テーマ Baseline 言語・通貨セレクター カスタマイズ

【関連記事】Shopifyのおすすめ有料テーマを紹介【実際に案件で使用】

Shopifyのおすすめ有料テーマを紹介【実際に案件で使用】
私が今まで使ったことのあるShopifyの有料テーマを紹介します。実案件で使用した実体験に基づく情報です。テーマによって合う商材と合わない商材があります。構築要件と照らし合わせながら、最適なテーマを選びましょう。

 

スポンサーリンク

参考:Shopifyを学ぶ方法まとめ|本・動画教材・オンラインスクール

Shopify飯店

Shopifyを本格的に学ぶためにはネットの情報だけは足りません。本(参考書)、動画教材(Udemy)、オンラインスクールを活用して、効果的に学習しましょう。

思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。

仕事でShopifyを扱っている筆者が、おすすめの学習教材をまとめました。くわしくは以下の記事をご覧ください。

【関連記事】【2023年最新】Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】

Shopifyのおすすめ学習方法まとめ【オンラインスクール紹介】
現役フリーランスエンジニアがShopifyの勉強方法をまとめました。オンラインスクールで学ぶ、本で学ぶ、Udemyで学ぶ、公式のYoutubeで学ぶの4つです。おすすめはオンラインスクールで学ぶことです。

【関連記事】【2023年最新】デイトラShopifyコースは買うべき?【レビュー】
※2コース目以降の追加受講は5000円引き!

デイトラShopifyコースは買うべきか?徹底レビュー【2023年最新】
デイトラShopifyコースを大解剖します。内容、強み、評判、身につくスキルをShopify構築を仕事にしている筆者が解説します。

【関連記事】【2023年最新】Shopifyの学習におすすめの動画教材(Udemy)まとめ

【日本語のみ】Shopifyの学習に最適なUdemyの教材まとめ【2023年最新】
日本語で受講できるUdemyのShopify講座をまとめました。新講座が出るたびに随時、記事を更新します。初心者向けの講座から上級者向けの講座まで紹介しています。また、筆者が実際にUdemyの講座を受講したレビューも紹介しています。

【関連記事】【2023年最新】Shopifyの学習におすすめの本まとめ

Shopifyの学習におすすめの本まとめ【参考書7選を紹介】
本記事ではShopifyを学ぶのにオススメな本・参考書をまとめています。

【関連記事】【2023年最新】【Shopifyの独学】勉強方法のまとめ【初心者向け】

【Shopifyの独学】勉強方法のまとめ【初心者向け】
本記事ではShopifyの独学方法をロードマップとしてまとめています。筆者はShopifyを独学して3年ほど経ちました。ノウハウが溜まってきたので、Shopify独学のロードマップを整理して記事にしました。
【Udemyでセールが開催中!】
2023年6月2日(金)まで、Shopifyの動画教材が2,000円から買える!
Udemyはセールのタイミングに買うべきです。通常1万〜2万円の商品がセール中だと80%OFF〜90%OFF程度の値段で購入できます。
・Udemyでセール中のShopifyの講座一覧をまとめて見る icon

 

スポンサーリンク

まとめ

本記事のポイントをまとめます。

①Baselineの通貨・言語セレクターのコードはこちら
②そのコードをスニペット化する
③{% render ‘ファイル名’ %}で好きな場所に出力する

これで完了です。
今回の記事はここまでです。

タイトルとURLをコピーしました