shopifyテーマのtemplateディレクトリの中身を解説

{% if cart.item_count > 0 %}
  <form action="{{ routes.cart_url }}" method="post" class="cart-form" data-cart-form novalidate>

    <h1 class="h2">{{ 'cart.general.title' | t }}</h1>

    {% for item in cart.items %}
    <div class="cart-row" data-line="{{ forloop.index }}">
      <div class="grid">

        <div class="grid-item large--one-half">
          <div class="grid">

            <div class="grid-item one-third large--one-quarter">
              <a href="{{ item.url }}" class="cart-image">
                <img src="{{ item | img_url: 'medium' }}"  alt="{{ item.title | escape }}">
              </a>
            </div>

            <div class="grid-item two-thirds large--three-quarters">
              <a href="{{ item.url }}">
                {{ item.product.title }}
              </a>
              {% unless item.variant.title contains 'Default' %}
                <br>
                <small>{{ item.variant.title }}</small>
              {% endunless %}

              {% if settings.product_quantity_message and item.variant.inventory_management and item.variant.inventory_quantity <= 0 and item.variant.incoming %}
                {% assign date = item.variant.next_incoming_date | date: format: 'date' %}
                <p><small>{{ 'products.product.will_not_ship_until' | t: date: date }}</small></p>
              {% endif %}

              {% assign property_size = item.properties | size %}
              {% if property_size > 0 %}
                {% for p in item.properties %}
                  {% if forloop.first %}<br>{% endif %}
                  {% assign first_character_in_key = p.first | truncate: 1, '' %}
                  {% unless p.last == blank or first_character_in_key == '_' %}
                    {{ p.first }}:

                    {% if p.last contains '/uploads/' %}
                      <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                    {% else %}
                      {{ p.last }}
                    {% endif %}

                    <br>
                  {% endunless %}
                {% endfor %}
              {% endif %}
            </div>

          </div>
        </div>

        <div class="grid-item large--one-half medium--two-thirds push--medium--one-third cart-pricing">
          <div class="grid">

            <div class="grid-item one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="0" data-line="{{ forloop.index }}">
            </div>

            <div class="grid-item one-half medium-down--text-left text-right">

              {%- if item.original_line_price != item.final_line_price -%}
                <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
                <small><s class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</s></small>
                <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
                <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
              {%- else -%}
                <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
              {%- endif -%}

              {%- if item.variant.available and item.variant.unit_price_measurement -%}
                {% include 'product-unit-price' variant: item, available: item.variant.available %}
              {%- endif -%}

              {%- if item.line_level_discount_allocations != blank -%}
                <ul class="order-discount order-discount--list order-discount--cart-list order-discount--title" aria-label="{{ 'customer.order.discount' | t }}">
                  {%- for discount_allocation in item.line_level_discount_allocations -%}
                    <li class="order-discount__item">
                      <span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
                    </li>
                  {%- endfor -%}
                </ul>
              {%- endif -%}
            </div>

            <div class="grid-item one-sixth text-right">
              <a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" data-line="{{ forloop.index }}" class="icon-fallback-text btn-secondary remove">
                <span class="icon icon-x" aria-hidden="true"></span>
                <span class="fallback-text">{{ 'cart.general.remove' | t }}</span>
              </a>
            </div>

          </div>
        </div>

      </div>
    </div>

    {% endfor %}

    <div class="cart-row">
      <div class="grid">

        {% if settings.cart_notes_enable %}
          <div class="grid-item large--one-half">
            <label for="cartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
            <textarea name="note" class="input-full" id="cartSpecialInstructions">{{ cart.note }}</textarea>
          </div>
        {% endif %}

        <div class="grid-item text-right{% if settings.cart_notes_enable %} large--one-half{% endif %}">

          <div class="cart-subtotal{% if settings.cart_notes_enable %} cart-subtotal--notes-enabled{% endif %}">

            {%- if cart.cart_level_discount_applications != blank -%}
              <div class="order-discount-cart-wrapper">
                {%- for discount_application in cart.cart_level_discount_applications -%}
                  <span class="order-discount order-discount--title">
                    <span class="icon icon-saletag" aria-hidden="true"></span><span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span>{{- discount_application.title -}}
                  </span>
                  <span class="order-discount order-discount--cart-price">-{{ discount_application.total_allocated_amount | money }}</span>
                {%- endfor -%}
              </div>
            {%- endif -%}

            {{ 'cart.general.subtotal' | t }}
            <span class="h1 cart-subtotal--price">
              {% include 'price' with cart.total_price %}
            </span>
          </div>

          {%- capture taxes_shipping_checkout -%}
            {%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
              {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
            {%- elsif shop.taxes_included -%}
              {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
            {%- elsif shop.shipping_policy.body != blank -%}
              {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
            {%- else -%}
              {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
            {%- endif -%}
          {%- endcapture -%}

          <p class="cart__policies"><em>{{ taxes_shipping_checkout }}</em></p>

          <input type="submit" name="update" class="btn-secondary update-cart" value="{{ 'cart.general.update' | t }}">

          <button type="submit" name="checkout" class="btn">
            <span class="icon icon-cart"></span>
            {{ 'cart.general.checkout' | t }}
          </button>

          {% if additional_checkout_buttons %}
            <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
          {% endif %}

        </div>

      </div>
    </div>

  </form>

{% else %}

  <div id="EmptyCart">
    <h1 class="h2">{{ 'cart.general.title' | t }}</h1>
    <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
    <p class="cart--continue-message">{{ 'cart.general.continue_browsing_html' | t: link: routes.all_products_collection_url }}</p>
    <p class="cart--cookie-message">{{ 'cart.general.cookies_required' | t }}</p>
  </div>

{% endif %}

<h1>{{ 'customer.account.title' | t }}</h1>

<hr class="hr--small">

<div class="grid">

  <div class="grid-item two-thirds medium-down--one-whole">
    <h2 class="h4">{{ 'customer.orders.title' | t }}</h2>

    {% paginate customer.orders by 20 %}
    {% if customer.orders.size != 0 %}

      <table class="full">
        <thead>
          <tr>
            <th>{{ 'customer.orders.order_number' | t }}</th>
            <th>{{ 'customer.orders.date' | t }}</th>
            <th>{{ 'customer.orders.payment_status' | t }}</th>
            <th>{{ 'customer.orders.fulfillment_status' | t }}</th>
            <th>{{ 'customer.orders.total' | t }}</th>
          </tr>
        </thead>
        <tbody>
          {% for order in customer.orders %}
            <tr>
              <td>{{ order.name | link_to: order.customer_url }}</td>
              <td>{{ order.created_at | date: format: 'date' }}</td>
              <td>{{ order.financial_status_label }}</td>
              <td>{{ order.fulfillment_status_label }}</td>
              <td>{{ order.total_price | money }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>

    {% else %}

      <p>{{ 'customer.orders.none' | t }}</p>

    {% endif %}

    {% if paginate.pages > 1 %}
    <div class="text-center">
      {% include 'pagination-custom' %}
    </div>
    {% endif %}
    {% endpaginate %}
  </div>

  <div class="grid-item one-third medium-down--one-whole">
    <h2 class="h4">{{ 'customer.account.details' | t }}</h2>

    {{ customer.default_address | format_address }}

    <p><a href="{{ routes.account_addresses_url }}">{{ 'customer.account.view_addresses' | t }} ({{ customer.addresses_count }})</a></p>
  </div>

</div>

{% paginate customer.orders by 20 %}
{% if customer.orders.size != 0 %}

  <table class="full">
    <thead>
      <tr>
        <th>{{ 'customer.orders.order_number' | t }}</th>
        <th>{{ 'customer.orders.date' | t }}</th>
        <th>{{ 'customer.orders.payment_status' | t }}</th>
        <th>{{ 'customer.orders.fulfillment_status' | t }}</th>
        <th>{{ 'customer.orders.total' | t }}</th>
      </tr>
    </thead>
    <tbody>
      {% for order in customer.orders %}
        <tr>
          <td>{{ order.name | link_to: order.customer_url }}</td>
          <td>{{ order.created_at | date: format: 'date' }}</td>
          <td>{{ order.financial_status_label }}</td>
          <td>{{ order.fulfillment_status_label }}</td>
          <td>{{ order.total_price | money }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

{% else %}

  <p>{{ 'customer.orders.none' | t }}</p>

{% endif %}

{% if paginate.pages > 1 %}
<div class="text-center">
  {% include 'pagination-custom' %}
</div>
{% endif %}
{% endpaginate %}

<div class="grid">
  <div class="grid-item large--one-third push--large--one-third">

    <h1>{{ 'customer.activate_account.title' | t }}</h1>
    <p>{{ 'customer.activate_account.subtext' | t }}</p>

    {% form 'activate_customer_password' %}

      {% include 'form-errors-custom' %}

      <label for="customer_password">{{ 'customer.activate_account.password' | t }}</label>
      <input type="password" value="" name="customer[password]" id="customer_password">

      <label for="customer_password_confirmation">{{ 'customer.activate_account.password_confirm' | t }}</label>
      <input type="password" value="" name="customer[password_confirmation]" id="customer_password_confirmation">

      <div class="text-center">

          <p><input type="submit" class="btn" value="{{ 'customer.activate_account.submit' | t }}"></p>
          <p><input type="submit" class="btn-secondary" name="decline" id="customer_decline" value="{{ 'customer.activate_account.cancel' | t }}"></p>

      </div>
    {% endform %}

  </div>
</div>

<header class="section-header">
  <h1 class="section-header--left">{{ 'customer.account.title' | t }}</h1>
  <div class="section-header--right">
    <a href="#" class="btn btn--small" onclick="Shopify.CustomerAddress.toggleNewForm(); return false;">{{ 'customer.addresses.add_new' | t }}</a>
  </div>
</header>

<hr class="hr--small">

<div class="grid">

  <div class="grid-item one-third medium-down--one-whole">
    <p><a href="{{ routes.account_url }}">{{ 'customer.account.return' | t }}</a></p>
  </div>
  <div class="grid-item two-thirds medium-down--one-whole">
    {% form 'customer_address', customer.new_address %}

      <div id="add_address" {% unless form.errors %}style="display: none;"{% endunless %}>

        <h2>{{ 'customer.addresses.add_new' | t }}</h2>

        {% include 'form-errors-custom' %}

        <div class="grid">

          <div class="grid-item one-half small--one-whole">
            <label for="address_first_name_new">{{ 'customer.addresses.first_name' | t }}</label>
            <input type="text" id="address_first_name_new" class="address_form" name="address[first_name]" value="{{ form.first_name }}">
          </div>

          <div class="grid-item one-half small--one-whole">
            <label for="address_last_name_new">{{ 'customer.addresses.last_name' | t }}</label>
            <input type="text" id="address_last_name_new" class="address_form" name="address[last_name]" value="{{ form.last_name }}">
          </div>

        </div>

        <label for="address_company_new">{{ 'customer.addresses.company' | t }}</label>
        <input type="text" id="address_company_new" class="address_form" name="address[company]" value="{{ form.company }}">

        <label for="address_address1_new">{{ 'customer.addresses.address1' | t }}</label>
        <input type="text" id="address_address1_new" class="address_form" name="address[address1]" value=" {{ form.address1 }}">

        <label for="address_address2_new">{{ 'customer.addresses.address2' | t }}</label>
        <input type="text" id="address_address2_new" class="address_form" name="address[address2]" value=" {{ form.address2 }}">

        <div class="grid">
          <div class="grid-item large--one-half">
            <label for="address_city_new">{{ 'customer.addresses.city' | t }}</label>
            <input type="text" id="address_city_new" class="address_form" name="address[city]" value="{{ form.city }}">
          </div>

          <div class="grid-item large--one-half">
            <label for="address_country_new">{{ 'customer.addresses.country' | t }}</label>
            <select id="address_country_new" name="address[country]" data-default="{{ form.country }}">{{ all_country_option_tags }}</select>
          </div>

          <div class="grid-item" id="address_province_container_new" style="display:none">
            <label for="address_province_new">{{ 'customer.addresses.province' | t }}</label>
            <select id="address_province_new" class="address_form" name="address[province]" data-default="{{ form.province }}"></select>
          </div>

          <div class="grid-item large--one-half">
            <label for="address_zip_new">{{ 'customer.addresses.zip' | t }}</label>
            <input type="text" id="address_zip_new" class="address_form" name="address[zip]" value="{{ form.zip }}" autocapitalize="characters">
          </div>

          <div class="grid-item large--one-half">
            <label for="address_phone_new">{{ 'customer.addresses.phone' | t }}</label>
            <input type="tel" id="address_phone_new" class="address_form" name="address[phone]" value="{{ form.phone }}" placeholder="555-555-1234">
          </div>
        </div>

        <p>
          {{ form.set_as_default_checkbox }}
          <label for="address_default_address_new" class="inline">{{ 'customer.addresses.set_default' | t }}</label>
        </p>

        <input type="submit" class="btn" value="{{ 'customer.addresses.add' | t }}">
        <span class="form-spacer">{{ 'customer.addresses.or' | t }}</span>
        <a href="#" onclick="Shopify.CustomerAddress.toggleNewForm(); return false;">{{ 'customer.addresses.cancel' | t }}</a>

        <hr>
      </div>
    {% endform %}

    <h2>{{ 'customer.addresses.title' | t }}</h2>

    {% paginate customer.addresses by 5 %}
      {% for address in customer.addresses %}

        <h3>
          {{ address.first_name | capitalize }} {{ address.last_name | capitalize }}
          {% if address == customer.default_address %}<em>({{ 'customer.addresses.default' | t }})</em>{% endif %}
        </h3>

        {{ address | format_address }}

        <p>
          {{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }} |
          {{ 'customer.addresses.delete' | t | delete_customer_address_link: address.url }}
        </p>

        {% form 'customer_address', address %}
          <div id="edit_address_{{ address.id }}" {% unless form.errors %}style="display:none;"{% endunless %}>

            <h4>{{ 'customer.addresses.edit_address' | t }}</h4>
            {% include 'form-errors-custom' %}
            <div class="grid">

              <div class="grid-item one-half small--one-whole">
                <label for="address_first_name_{{ form.id }}">{{ 'customer.addresses.first_name' | t }}</label>
                <input type="text" id="address_first_name_{{ form.id }}" class="address_form" name="address[first_name]" value="{{ form.first_name }}">
              </div>

              <div class="grid-item one-half small--one-whole">
                <label for="address_last_name_{{ form.id }}">{{ 'customer.addresses.last_name' | t }}</label>
                <input type="text" id="address_last_name_{{ form.id }}" class="address_form" name="address[last_name]" value="{{ form.last_name }}">
              </div>

            </div>

            <label for="address_company_{{ form.id }}">{{ 'customer.addresses.company' | t }}</label>
            <input type="text" id="address_company_{{ form.id }}" class="address_form" name="address[company]" value="{{ form.company }}">

            <label for="address_address1_{{ form.id }}">{{ 'customer.addresses.address1' | t }}</label>
            <input type="text" id="address_address1_{{ form.id }}" class="address_form" name="address[address1]" value="{{ form.address1 }}">

            <label for="address_address2_{{ form.id }}">{{ 'customer.addresses.address2' | t }}</label>
            <input type="text" id="address_address2_{{ form.id }}" class="address_form" name="address[address2]" value="{{ form.address2 }}">

            <label for="address_city_{{ form.id }}">{{ 'customer.addresses.city' | t }}</label>
            <input type="text" id="address_city_{{ form.id }}" class="address_form" name="address[city]" value="{{ form.city }}">

            <label for="address_country_{{ form.id }}">{{ 'customer.addresses.country' | t }}</label>
            <select id="address_country_{{ form.id }}" name="address[country]" data-default="{{ form.country }}">{{ all_country_option_tags }}</select>

            <div id="address_province_container_{{ form.id }}" style="display:none">
              <label for="address_province_{{ form.id }}">{{ 'customer.addresses.province' | t }}</label>
              <select id="address_province_{{ form.id }}" class="address_form" name="address[province]" data-default="{{ form.province }}"></select>
            </div>

            <div class="grid">
              <div class="grid-item one-half small--one-whole">
                <label for="address_zip_{{ form.id }}">{{ 'customer.addresses.zip' | t }}</label>
                <input type="text" id="address_zip_{{ form.id }}" class="address_form" name="address[zip]" value="{{ form.zip }}" autocapitalize="characters">
              </div>

              <div class="grid-item one-half small--one-whole">
                <label for="address_phone_{{ form.id }}">{{ 'customer.addresses.phone' | t }}</label>
                <input type="tel" id="address_phone_{{ form.id }}" class="address_form" name="address[phone]" value="{{ form.phone }}" placeholder="555-555-1234">
              </div>
            </div>

            <p>
              {{ form.set_as_default_checkbox }}
              <label for="address_default_address_new" class="inline">{{ 'customer.addresses.set_default' | t }}</label>
            </p>

            <input type="submit" class="btn" value="{{ 'customer.addresses.update' | t }}">
            {{ 'customer.addresses.or' | t }} <a href="#" onclick="Shopify.CustomerAddress.toggleForm({{ form.id }}); return false;">{{ 'customer.addresses.cancel' | t }}</a>

            <hr>
          </div>
        {% endform %}

        <script>
          // Setup province selector on each customer address
          new Shopify.CountryProvinceSelector('address_country_{{ address.id }}', 'address_province_{{ address.id }}', {
            hideElement: 'address_province_container_{{ address.id }}'}
          );
        </script>

      {% endfor %}

      {% if paginate.pages > 1 %}
      <div class="text-center">
        {% include 'pagination-custom' %}
      </div>
      {% endif %}

    {% endpaginate %}
  </div>

</div>


<script>
  // Initialize observers on address selectors
  new Shopify.CountryProvinceSelector('address_country_new', 'address_province_new', {
    hideElement: 'address_province_container_new'
  });

  // Contents of customer_area.js (global asset)
  Shopify.CustomerAddress = {
    toggleForm: function(id) {
      var editEl = document.getElementById('edit_address_'+id);
      editEl.style.display = editEl.style.display == 'none' ? '' : 'none';
      return false;
    },

    toggleNewForm: function() {
      var el = document.getElementById('add_address');
      el.style.display = el.style.display == 'none' ? '' : 'none';
      return false;
    },

    destroy: function(url, confirm_msg) {
      if (confirm(confirm_msg || {{ 'customer.addresses.delete_confirm' | t | json }})) {
        Shopify.postLink(url, {'parameters': {'_method': 'delete'}});
      }
    }
  }
</script>

<div class="grid">

  <div class="grid-item large--one-third push--large--one-third text-center">

    <div class="note form-success" id="resetSuccess" style="display:none;">
      We've sent you an email with a link to update your password.
    </div>

    {% form 'customer_login' %}

      <h1>{{ 'customer.login.title' | t }}</h1>

      {% include 'form-errors-custom' %}

      <label for="customer_email" class="hidden-label">{{ 'customer.login.email' | t }}</label>
      <input type="email" value="" name="customer[email]" id="customer_email" placeholder="{{ 'customer.login.email' | t }}" {% if form.errors contains "email" %} class="error"{% endif %} autocorrect="off" autocapitalize="off" autofocus>

      {% if form.password_needed %}

        <label for="customer_password" class="hidden-label">{{ 'customer.login.password' | t }}</label>
        <input type="password" value="" name="customer[password]" id="customer_password" placeholder="{{ 'customer.login.password' | t }}" {% if form.errors contains "password" %} class="error"{% endif %}>

        <p>
          <a href="#" onclick="showRecoverPasswordForm();return false;">{{ 'customer.login.forgot_password' | t }}</a>
        </p>

      {% endif %}

        <p>
          <input type="submit" class="btn" value="{{ 'customer.login.sign_in' | t }}">
        </p>
        {{ 'customer.login.or' | t }} <a href="{{ shop.url }}">{{ 'customer.login.cancel' | t }}</a>

    {% endform %}


    {% comment %}
      This page uses JavaScript to show/hide the recover password form
    {% endcomment %}
    <div id="recover_password" style="display: none;">

      <h2>{{ 'customer.recover_password.title' | t }}</h2>
      <p>{{ 'customer.recover_password.subtext' | t }}</p>

      {% form 'recover_customer_password' %}

        {% include 'form-errors-custom' %}

        {% if form.posted_successfully? %}
          {% assign reset_success = true %}
        {% endif %}

        <label for="recover-email" class="hidden-label">{{ 'customer.recover_password.email' | t }}</label>
        <input type="email" value="" name="email" id="recover-email" placeholder="{{ 'customer.recover_password.email' | t }}" autocorrect="off" autocapitalize="off">

        <p>
          <input type="submit" class="btn" value="{{ 'customer.recover_password.submit' | t }}">
        </p>
        {{ 'customer.login.or' | t }} <a href="#" onclick="hideRecoverPasswordForm();return false;">{{ 'customer.recover_password.cancel' | t }}</a>
        
      {% endform %}

    </div>

    {% if shop.checkout.guest_login %}
      <hr>

      <h2>{{ 'customer.login.guest_title' | t }}</h2>

      {% form 'guest_login' %}
        <input  type="submit" class="btn" value="{{ 'customer.login.guest_continue' | t }}">
      {% endform %}
      
    {% endif %}

  </div>

</div>



<script>
  /*
    Show/hide the recover password form when requested.
  */
  function showRecoverPasswordForm() {
    document.getElementById('recover_password').style.display = 'block';
    document.getElementById('customer_login').style.display='none';
  }

  function hideRecoverPasswordForm() {
    document.getElementById('recover_password').style.display = 'none';
    document.getElementById('customer_login').style.display = 'block';
  }

  // Allow deep linking to the recover password form
  if (window.location.hash == '#recover') { showRecoverPasswordForm() }

  // reset_success is only true when the reset form is
  {% if reset_success %}
    document.getElementById('resetSuccess').style.display = 'block';
  {% endif %}
</script>

<header class="site-header" role="banner" data-section-id="{{ section.id }}" data-section-type="header-section">
  <div class="wrapper">

    <div class="grid--full">
      <div class="grid-item large--one-half">
        {% if request.page_type == 'index' %}
          <h1 class="header-logo" itemscope itemtype="http://schema.org/Organization">
        {% else %}
          <div class="h1 header-logo" itemscope itemtype="http://schema.org/Organization">
        {% endif %}
          {% if section.settings.logo %}
          {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
          {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
          <a href="{{ routes.root_url }}" itemprop="url">
            <div class="lazyload__image-wrapper no-js header-logo__image" style="max-width:{{ section.settings.logo_max_width }}px;">
              <div style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
                <img class="lazyload js"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ logo_alt | escape }}"
                  style="width:{{ section.settings.logo_max_width }}px;">
              </div>
            </div>
            <noscript>
              {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
              <img src="{{ section.settings.logo | img_url: image_size }}"
                srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                alt="{{ logo_alt | escape }}"
                itemprop="logo"
                style="max-width:{{ section.settings.logo_max_width }}px;">
            </noscript>
          </a>
          {% else %}
            <a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
          {% endif %}
        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>

      <div class="grid-item large--one-half text-center large--text-right">
        {% if section.settings.show_announcement or shop.customer_accounts_enabled %}
          <div class="site-header--text-links{% if section.settings.announcement_text == blank %} medium-down--hide{% endif %}">
            {% if section.settings.show_announcement %}
              {% if section.settings.announcement_link != blank %}
                <a href="{{ section.settings.announcement_link }}">
              {% endif %}

                <p>{{ section.settings.announcement_text | escape }}</p>

              {% if section.settings.announcement_link != blank %}
                </a>
              {% endif %}
            {% endif %}

            {% if shop.customer_accounts_enabled %}
              <span class="site-header--meta-links medium-down--hide">
                {% if customer %}
                  {% capture first_name %}<a href="{{ routes.account_url }}">{{ customer.first_name }}</a>{% endcapture %}
                  {{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} &middot; {{ 'layout.customer.log_out' | t | customer_logout_link }}
                {% else %}
                  {{ 'layout.customer.sign_in' | t | customer_login_link }}
                  <span class="site-header--spacer">{{ 'layout.customer.or' | t }}</span>
                  {{ 'layout.customer.create_account' | t | customer_register_link }}
                {% endif %}
              </span>
            {% endif %}
          </div>

          <br class="medium-down--hide">
        {% endif %}

        {% include 'search-bar' %}

        <a href="{{ routes.cart_url }}" class="header-cart-btn cart-toggle">
          <span class="icon icon-cart"></span>
          {{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
        </a>
      </div>
    </div>

  </div>
</header>

<div id="mobileNavBar">
  <div class="display-table-cell">
    <button class="menu-toggle mobileNavBar-link" aria-controls="navBar" aria-expanded="false"><span class="icon icon-hamburger" aria-hidden="true"></span>{{ 'layout.navigation.mobile_menu' | t }}</button>
  </div>
  <div class="display-table-cell">
    <a href="{{ routes.cart_url }}" class="cart-toggle mobileNavBar-link">
      <span class="icon icon-cart"></span>
      {{ 'layout.cart.cart' | t }} <span class="cart-count {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
    </a>
  </div>
</div>

<nav class="nav-bar" id="navBar" role="navigation">
  <div class="wrapper">
    {% include 'search-bar' %}
    {% include 'mobile-nav' %}
    {% include 'site-nav' %}
  </div>
</nav>

※shema部分は省略してます。

<div class="grid">

  <div class="grid-item large--one-third push--large--one-third text-center">

    <h1>{{ 'customer.register.title' | t }}</h1>

    {% form 'create_customer' %}

      {% include 'form-errors-custom' %}

      <label for="first_name" class="hidden-label">{{ 'customer.register.first_name' | t }}</label>
      <input type="text" value="" name="customer[first_name]" id="first_name" placeholder="{{ 'customer.register.first_name' | t }}" {% if form.errors contains "first_name" %} class="error"{% endif %} autofocus>

      <label for="last_name" class="hidden-label">{{ 'customer.register.last_name' | t }}</label>
      <input type="text" value="" name="customer[last_name]" id="last_name" placeholder="{{ 'customer.register.last_name' | t }}" {% if form.errors contains "last_name" %} class="error"{% endif %}>

      <label for="email" class="hidden-label">{{ 'customer.register.email' | t }}</label>
      <input type="email" value="" name="customer[email]" id="email" placeholder="{{ 'customer.register.email' | t }}" {% if form.errors contains "email" %} class="error"{% endif %} autocorrect="off" autocapitalize="off">

      <label for="password" class="hidden-label">{{ 'customer.register.password' | t }}</label>
      <input type="password" value="" name="customer[password]" id="create_password" placeholder="{{ 'customer.register.password' | t }}" {% if form.errors contains "password" %} class="error"{% endif %}>
      <p>
        <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
      </p>
      {{ 'customer.register.or' | t }} <a href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>

    {% endform %}

  </div>

</div>

<div class="grid">
  <div class="grid-item large--one-third push--large--one-third">

    {% form 'reset_customer_password' %}

      <h1>{{ 'customer.reset_password.title' | t }}</h1>

      <p>{{ 'customer.reset_password.subtext' | t: email: email }}</p>

      {% include 'form-errors-custom' %}

      <label for="reset_password">{{ 'customer.reset_password.password' | t }}</label>
      <input type="password" value="" name="customer[password]" id="reset_password" {% if form.errors contains "password" %} class="error"{% endif %}>

      <label for="password_confirmation">{{ 'customer.reset_password.password_confirm' | t }}</label>
      <input type="password" value="" name="customer[password_confirmation]" id="password_confirmation" {% if form.errors contains "password_confirmation" %} class="error"{% endif %}>

      <div class="text-center">
        <input type="submit" class="btn" value="{{ 'customer.reset_password.submit' | t }}">
      </div>

    {% endform %}

  </div>
</div>

{{ content_for_index }}

<form action=“{{ routes.search_url }}” method=“get” class=“search-bar” role=“search”>
  <input type=“hidden” name=“type” value=“product”>

  <input type=“search” name=“q” value=“{{ search.terms | escape }}” placeholder=“{{ ‘layout.search_bar.placeholder’ | t }}” aria-label=“{{ ‘layout.search_bar.placeholder’ | t }}“>
  <button type=“submit” class=“search-bar--submit icon-fallback-text”>
    <span class=“icon icon-search” aria-hidden=“true”></span>
    <span class=“fallback-text”>{{ ‘layout.search_bar.submit’ | t }}</span>
  </button>
</form>