FROM CACHE - jp_header

follow on shopボタン

解決済

follow on shopボタン

tina241
新規メンバー
4 0 0

dawnのテーマにfollow on shopボタンをsnsリンクの横に埋め込む方法を教えてください。

1 件の受理された解決策
Qcoltd
Shopify Partner
1059 435 427

成功

@tina241 様

 

調査してみました。

しかし、繰り返しになりますが、私自身は、follow on shopを表示させる条件を把握できておらず、動作検証はできていないこと、ご留意ください。

 

Dawn 7.0.1であれば、全くカスタマイズしてない場合、

セクション > footer.liquidの149行目付近に下記のような記述があるはずです。

 

        {%- if section.settings.show_social -%}
          <ul class="footer__list-social list-unstyled list-social" role="list">
            {%- if settings.social_twitter_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_twitter_link }}" class="link list-social__link" >
                  {%- render 'icon-twitter' -%}
                  <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                </a>
              </li>

 

この記述を下記のように変更してみてはどうでしょうか?

 

        {%- if section.settings.show_social -%}
          <ul class="footer__list-social list-unstyled list-social" role="list">
            <li class="list-social__item">
                    {% # theme-check-disable %}
                    {{ shop | login_button: action: 'follow' }}
                    {% # theme-check-enable %}
            </li>
            {%- if settings.social_twitter_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_twitter_link }}" class="link list-social__link" >
                  {%- render 'icon-twitter' -%}
                  <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                </a>
              </li>

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

7件の返信7

Qcoltd
Shopify Partner
1059 435 427

@tina241 様

 

私自身は、follow on shopボタンの表示確認をできていないのですが、

Dawn11.0.0のコードを見る限り下記のコードがfollow on shopボタンを表示するコードのように思えましたので、こちらのコードをうまく利用されてはいかがでしょうか?

 

          {%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
            <div class="footer__follow-on-shop">
              {% comment %} TODO: enable theme-check once `login_button` is accepted as valid filter {% endcomment %}
              {% # theme-check-disable %}
              {{ shop | login_button: action: 'follow' }}
              {% # theme-check-enable %}
            </div>
          {%- endif -%}

 

 

このうち、常に、follow on shopボタンを表示するのであれば、最初のif文は不要です。

また、.footer__follow-on-shopのCSSもなくてもなんとかなるかもしれません。

そうしますと、ボタンを表示する本質的なコードは、下記のようになります。

(theme-check-disableとtheme-check-enableも不要そうですが、表示確認ができていないので念の為、外しておりません。)

              {% # theme-check-disable %}
              {{ shop | login_button: action: 'follow' }}
              {% # theme-check-enable %}

 

 

さて、フッターのSNSボタンの左横に表示する具体的な方法ですが、

Dawn11.0.0の場合、下記のようになるかと思います。

 

スニペット > social_icons.liquidの12行目付近の下記の記述を、

<ul class="list-unstyled list-social{% if class %} {{ class}}{% endif %}" role="list">
  {%- if settings.social_facebook_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_facebook_link }}" class="link list-social__link">
        {%- render 'icon-facebook' -%}
        <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
      </a>
    </li>

 下記のように書き換えます。

<ul class="list-unstyled list-social{% if class %} {{ class}}{% endif %}" role="list">
    <li class="list-social__item">
      {% # theme-check-disable %}
      {{ shop | login_button: action: 'follow' }}
      {% # theme-check-enable %}
    </li>
  {%- if settings.social_facebook_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_facebook_link }}" class="link list-social__link">
        {%- render 'icon-facebook' -%}
        <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
      </a>
    </li>

 

 

また、

セクション > footer.liquidの232行目の下記の記述を削除します。

          {%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
            <div class="footer__follow-on-shop">
              {% comment %} TODO: enable theme-check once `login_button` is accepted as valid filter {% endcomment %}
              {% # theme-check-disable %}
              {{ shop | login_button: action: 'follow' }}
              {% # theme-check-enable %}
            </div>
          {%- endif -%}

 

 

表示確認もできていないため、うまく機能するか分かりませんし、

表示するためだけの応急措置的なコードですが、

参考になれば幸いです。

 

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
tina241
新規メンバー
4 0 0

ご回答ありがとうございます。一番最初の{%- if shopから始まるコードはどの段に埋め込めばいいのでしょうか?早速試してみたいと思います。

Qcoltd
Shopify Partner
1059 435 427

@tina241 様

 

> さて、フッターのSNSボタンの左横に表示する具体的な方法ですが、

> Dawn11.0.0の場合、下記のようになるかと思います。

 

という記述以降を実施していただければ大丈夫です。

最初のコードは、説明用に記載しただけで、具体的なやり方は上記の記述以降にありますので、そちらをご覧ください。

 

キュー田辺

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
tina241
新規メンバー
4 0 0

説明不足ですみません、Dawn 7.0.1バージョンに埋め込みたいです。

Qcoltd
Shopify Partner
1059 435 427

@tina241 様

 

なるほどです。

再検証が必要になるので、少しお時間をいただくことになりそうです。

数日ほどかかるかもしれません。

 

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
Qcoltd
Shopify Partner
1059 435 427

成功

@tina241 様

 

調査してみました。

しかし、繰り返しになりますが、私自身は、follow on shopを表示させる条件を把握できておらず、動作検証はできていないこと、ご留意ください。

 

Dawn 7.0.1であれば、全くカスタマイズしてない場合、

セクション > footer.liquidの149行目付近に下記のような記述があるはずです。

 

        {%- if section.settings.show_social -%}
          <ul class="footer__list-social list-unstyled list-social" role="list">
            {%- if settings.social_twitter_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_twitter_link }}" class="link list-social__link" >
                  {%- render 'icon-twitter' -%}
                  <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                </a>
              </li>

 

この記述を下記のように変更してみてはどうでしょうか?

 

        {%- if section.settings.show_social -%}
          <ul class="footer__list-social list-unstyled list-social" role="list">
            <li class="list-social__item">
                    {% # theme-check-disable %}
                    {{ shop | login_button: action: 'follow' }}
                    {% # theme-check-enable %}
            </li>
            {%- if settings.social_twitter_link != blank -%}
              <li class="list-social__item">
                <a href="{{ settings.social_twitter_link }}" class="link list-social__link" >
                  {%- render 'icon-twitter' -%}
                  <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                </a>
              </li>

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
tina241
新規メンバー
4 0 0

変更できました。有難うございます!