Shopifyでオリジナルテーマを作成しよう～No.6[Aboutページの作成]～

{% section 'about-header' %}
{% render 'breadcrumbs' %}
{% section 'about-content' %}

{% render 'xxxxxx' %}

<div class="subpage_bg_img d-flex justify-content-center align-items-center" style="background-image: url('{{section.settings.about_header_image | img_url: '1920x'}}');">
  <h2 class="f36">ABOUT</h2>
</div>

{% schema %}
{
	"name": "About Header Image",
	"settings": [
		{
			"type": "image_picker",
			"id": "about_header_image",
			"label": "About Header Image"
		}
	]
}
{% endschema %}

<div class="main">
  <div class="container">
    <h3 class="text-center mb-5 f36">Shopify-Trainingとは</h3>
    <div class="row">
      <div class="col">
        <img src="{{section.settings.about_content_image1 | img_url: '1920x'}}" alt="" width="100%" height="300px" class="cove_img">
      </div>
      <div class="col">
        <img src="{{section.settings.about_content_image2 | img_url: '1920x'}}" alt="" width="100%" height="300px" class="cove_img">
      </div>
    </div>
    <div class="mt-3">
      <p>{{section.settings.about_content_text}}</p>
    </div>
  </div>
</div>


{% schema %}
{
	"name": "About Content",
	"settings": [
		{
			"type": "image_picker",
			"id": "about_content_image1",
			"label": "About Content Image1"
		},
		{
			"type": "image_picker",
			"id": "about_content_image2",
			"label": "About Content Image2"
		},
		{
			"type": "textarea",
			"id": "about_content_text",
			"label": "About Content Text"
		}
	]
}
{% endschema %}

{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <a href="/" title="Home">Home</a>
  {% if template contains 'page' %}
    <span aria-hidden="true">›</span>
    <span>{{ page.title }}</span>
  {% elsif template contains 'product' %}
    {% if collection.url %}
      <span aria-hidden="true">›</span>
      {{ collection.title | link_to: collection.url }}
    {% endif %}
    <span aria-hidden="true">›</span>
    <span>{{ product.title }}</span>
  {% elsif template contains 'collection' and collection.handle %}
    <span aria-hidden="true">›</span>
    {% if current_tags %}
      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
      {{ collection.title | link_to: url }}
      <span aria-hidden="true">›</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
      <span>{{ collection.title }}</span>
    {% endif %}
  {% elsif template == 'blog' %}
    <span aria-hidden="true">›</span>
    {% if current_tags %}
      {{ blog.title | link_to: blog.url }}
      <span aria-hidden="true">›</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
    <span>{{ blog.title }}</span>
    {% endif %}
  {% elsif template == 'article' %}
    <span aria-hidden="true">›</span>
    {{ blog.title | link_to: blog.url }}
    <span aria-hidden="true">›</span>
    <span>{{ article.title }}</span>
  {% else %}
   <span aria-hidden="true">›</span>
   <span>{{ page_title }}</span>
  {% endif %}
</nav>
{% endunless %}

{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}
<nav class="mb-5" role="navigation" aria-label="breadcrumbs">
  <ol class="breadcrumb bg-white d-flex justify-content-center">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    {% if template contains 'page' %}
    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
    {% elsif template contains 'product' %}
    {% if collection.url %}
    <li class="breadcrumb-item active" aria-current="page">{{ collection.title | link_to: collection.url }}</li>
    {% endif %}
    <li class="breadcrumb-item active" aria-current="page">{{ product.title }}</li>
    {% elsif template contains 'collection' and collection.handle %}
    {% if current_tags %}
    {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
    <li class="breadcrumb-item">{{ collection.title | link_to: url }}</li>
    <li class="breadcrumb-item active">{{ current_tags | join: " + " }}</li>
    {% else %}
    <li class="breadcrumb-item active" aria-current="page">{{ collection.title }}</li>
    {% endif %}
    {% elsif template == 'blog' %}
    {% if current_tags %}
    <li class="breadcrumb-item">{{ blog.title | link_to: blog.url }}</li>
    <li class="breadcrumb-item active">{{ current_tags | join: " + " }}</li>
    {% else %}
    <li class="breadcrumb-item active" aria-current="page">{{ blog.title }}</li>
    {% endif %}
    {% elsif template == 'article' %}
    <li class="breadcrumb-item">{{ blog.title | link_to: blog.url }}</li>
    <li class="breadcrumb-item active" aria-current="page">{{ article.title }}</li>
    {% else %}
    <li class="breadcrumb-item active" aria-current="page">{{ page_title }}</li>
    {% endif %}
  </ol>
</nav>
{% endunless %}