shopify - Liquid Markupを使用してShopifyのヘッダーバーにリンクを追加する方法は?

Question

ページの一番上にあるショッピング カート アイコンの左側に小さなリンクを追加して、Shopify ストアのヘッダー バーをカスタマイズしようとしています。

これは、私がやろうとしていることの http://www.homedepot.com/ から得た簡単な例です。

小さなショッピング カート/チェックアウト アイコンの左側にある「ツール & トラック レンタル | インストール サービスと修理 | ギフト カード | ヘルプ」リンク。

それはまさに私が自分のページでやろうとしていることですが、作成したリンクは水平ではなく (CSS display:inline を試した後でも)、ショッピング カートのアイコンが適切な場所から移動します。

これは私が試したことです。コードで「header-bar-nav.liquid」というスニペットを追加しました。

  <ul class="header-bar-nav" id="AccessibleNav">
      {% for link in linklists.header-bar.links %}
        {% comment %}
          Create a dropdown menu by naming a linklist the same as a link in the parent nav

          More info on dropdowns:
            - http://docs.shopify.com/manual/your-website/navigation/create-drop-down-menu
        {% endcomment %}
        {% assign child_list_handle = link.title | handleize %}
        {% if linklists[child_list_handle].links != blank %}
          <li class="header-bar-nav--has-dropdown{% if link.active %} header-bar-nav--active{% endif %}" aria-haspopup="true">
            <a href="{{ link.url }}" class="header-bar-nav__link">
              {{ link.title }}
              <span class="icon-fallback-text">
                <span class="icon icon-arrow-down" aria-hidden="true"></span>
              </span>
            </a>
            <ul class="header-bar-nav__dropdown">
              {% for childlink in linklists[child_list_handle].links %}
                <li{% if childlink.active %} class="header-bar-nav--active"{% endif %}>
                  <a href="{{ childlink.url }}" class="header-bar-nav__link">{{ childlink.title | escape }}</a>
                </li>
              {% endfor %}
            </ul>
          </li>
        {% else %}
          <li {% if link.active %}class="header-bar-nav--active"{% endif %}>
            <a href="{{ link.url }}" class="header-bar-nav__link">{{ link.title }}</a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>

そして、実際の「header-bar.liquid」で {% include 'header-bar-nav' %} を実行しました (小さなリンクを配置したい場所です)。

<div class="header-bar">
  <div class="wrapper medium-down--hide">
    <div class="large--display-table">
      <div class="header-bar__left large--display-table-cell">
        {% if settings.header_message != blank %}
        <div class="header-bar__module header-bar__message">
          {{ settings.header_message }}
        </div>
        {% elsif cart.announcements.size > 0 %}
        <div class="header-bar__module header-bar__message">
          {{ cart.announcements.first }}
        </div>
        {% endif %}
      </div>

       {% include 'header-bar-nav'%}

      <div class="header-bar__right large--display-table-cell">
        <div class="header-bar__module">
          <a href="/cart" class="cart-toggle">
            <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
            {{ 'layout.cart.title' | t }}
            <span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
          </a>
        </div>

        {% if shop.customer_accounts_enabled %}
          <span class="header-bar__sep" aria-hidden="true">|</span>
          <ul class="header-bar__module header-bar__module--list">
            {% if customer %}
              <li>
                <a href="/account">{{ 'layout.customer.account' | t }}</a>
              </li>
              <li>
                {{ 'layout.customer.log_out' | t | customer_logout_link }}
              </li>
            {% else %}
              <li>
                {{ 'layout.customer.log_in' | t | customer_login_link }}
              </li>
            {% endif %}
          </ul>
        {% endif %}

        {% if settings.header_search_enable %}
          <div class="header-bar__module header-bar__search">
            {% include 'search-bar' with 'header' %}
          </div>
        {% endif %}



      </div>
    </div>
  </div>
  <div class="wrapper large--hide">
    <button type="button" class="mobile-nav-trigger" id="MobileNavTrigger">
      <span class="icon icon-hamburger" aria-hidden="true"></span>
      {{ 'layout.navigation.menu' | t }}
    </button>
    <a href="/cart" class="cart-toggle mobile-cart-toggle">
      <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
      {{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
    </a>
  </div>
  {% include 'mobile-nav' %}
</div>

そして、.header-bar-nav クラスを使用し、「Assets」の下の timber.scss.liquid に CSS を追加しました。

.header-bar-nav {
  font-size: em(16px);
  cursor: default;
  margin: 0 auto;
  text-align: center;

  li {
    margin: 0;
    display: block;
  }

  & > li {
    position: relative;
    display: inline-block;



    &:first-child .header-bar-nav__dropdown {
      left: - $gutter / 2;
    }

    &:last-child > a {
      padding-right: 0;
    }
  }

  @include at-query ($min, $large) {
    margin: 0;
    text-align: right;
  }
}

.header-bar-nav__link {
  display: block;
  text-decoration: none;
  padding: $gutter / 2;
  white-space: nowrap;
  color: $colorNavText;

  &:hover,
  &:active,
  &:focus {
    color: $colorPrimary;
  }


  .icon-arrow-down {
    font-size: 0.7em;
    color: $colorPrimary;
  }
}

何らかの理由で、それは私のために働いていません。誰かがそれを助けることができれば、それは大歓迎です。