Question

我正在尝试通过在页面顶部的购物车图标左侧添加小链接来自定义shopify商店的标题栏。

Here's a quick example i got from http://www.homedepot.com/ of what i am looking to do.

小工具车/结帐图标左侧的“工具和卡车租赁|安装服务和维修|礼品卡|帮助”链接。

这正是我试图对我的页面做的事情，但我创建的链接不是水平的（即使在尝试CSS显示：内联后）并使购物车图标移出它的正确位置。

这是我尝试过的。我添加了一个名为“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'％}（这是我希望小链接的地方） < / p>

<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;
  }
}

出于某种原因，它一直没有为我工作。如果有人可以提供帮助，我们将不胜感激。

Answer 1

最简单的方法是启动Chrome，转到开发工具并手动添加内容。

然后尝试CSS使其工作。如果主题具有响应性，请确保在调整浏览器窗口大小时它可以正常工作。

找到所需内容后，只需将这些样式/ CSS复制到主题中即可。

这与Shopify没有任何关系，但这是一个CSS问题。如果您仍然无法使其正常工作，请将其发布在CSS中，并附上指向您网站的链接，其中有人会帮助您。

如何使用Liquid Markup添加到Shopify标题栏的链接？

1 个答案: