MENU
  1. ホーム
  2. Shopify
  3. 【コピペで実装】Shopifyで簡単にフロー（流れ）セクションを作成する方法

【コピペで実装】Shopifyで簡単にフロー（流れ）セクションを作成する方法

Shopify

こんにちは！Shopifyエンジニアのりょうま(@ryoo_black)です。

今回はShopifyで簡単にフローセクションを作る方法を解説します。

簡単にコピペで実装できるようにしていますので、コードを触るのが苦手な方でもすぐ実装できますので、是非参考にしてみてください！

目次

完成イメージ

今回は以下のようなセクションを実装します。

完成イメージ

実装方法

管理画面の「オンラインストア」の「テーマ」から「3点リーダー」をクリックし「コードを編集」を選択してください。

実装方法1

「sections」フォルダを選択して開き、「新しいセクションを追加する」から任意の名前でパーツのliquidファイルを制作してください。
ここでは「custom-flow.liquid」とします。

実装方法2

ファイルができたら、以下のコードをコピペし保存してください。

{% style %}
  .custom-flow-section {
    --grid-gap: 1.5rem;
  }

  .custom-flow-section__grid {
    display: grid;
    grid-template-columns: repeat({{ section.blocks.size }}, 1fr);
    gap: var(--grid-gap);
    position: relative;
  }

  .custom-flow-section__divider {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(to bottom, #ccc 50%, transparent 50%);
    background-size: 1px 8px;
    background-repeat: repeat-y;
    z-index: 1;
  }

  {% for i in (1..section.blocks.size) %}
    {% if forloop.index > 1 and forloop.index <= section.blocks.size %}
      .custom-flow-section__grid .custom-flow-section__divider:nth-of-type({{ forloop.index | minus: 1 }}) {
        left: calc({{ forloop.index | minus: 1 | times: 100 | divided_by: section.blocks.size }}% - 0.5px);
      }
    {% endif %}
  {% endfor %}

  .custom-flow-section__column {
    position: relative;
    text-align: center;
  }

  .custom-flow-section__number {
    position: absolute;
    bottom: 100%;
    top: 0;
    left: 0;
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: bold;
    color: {{ section.settings.number_color }};
    opacity: {{ section.settings.number_opacity | divided_by: 100.0 }};
    line-height: 1;
    z-index: 2;
    pointer-events: none;
  }

  .custom-flow-section__content {
    position: relative;
    z-index: 1;
  }

  .custom-flow-section__image-wrapper {
    margin-bottom: 1rem;
  }

  .custom-flow-section__image {
    width: 100%;
    height: auto;
    display: block;
  }

  .custom-flow-section__title {
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: bold;
    color: {{ section.settings.title_color }};
    margin-bottom: 0.5rem;
  }

  .custom-flow-section__text {
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: {{ section.settings.text_color }};
    line-height: 1.5;
  }

  @media screen and (max-width: 749px) {
    .custom-flow-section__grid {
      grid-template-columns: 1fr;
    }

    .custom-flow-section__divider {
      display: none;
    }

    .custom-flow-section__column {
      margin-bottom: 2rem;
    }

    .custom-flow-section__number {
      bottom: auto;
      top: -3rem;
    }
  }

  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }

  @media screen and (max-width: 749px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.sp_padding_top }}px;
      padding-bottom: {{ section.settings.sp_padding_bottom }}px;
    }
  }
{% endstyle %}

<section class="custom-flow-section page-width section-{{ section.id }}-padding" aria-label="{{ section.settings.section_title | escape }}">
  <div class="custom-flow-section__grid">
    {% for block in section.blocks %}
      {% if forloop.index > 1 %}
        <div class="custom-flow-section__divider" aria-hidden="true"></div>
      {% endif %}
      {% case block.type %}
        {% when 'column' %}
          <article class="custom-flow-section__column" {{ block.shopify_attributes }}>
            <div class="custom-flow-section__number" aria-hidden="true">{{ forloop.index | prepend: '0' }}</div>
            <div class="custom-flow-section__content">
              <div class="custom-flow-section__image-wrapper">
                {% if block.settings.image != blank %}
                  {{ block.settings.image | image_url: width: 800 | image_tag: class: 'custom-flow-section__image', widths: '200, 300, 400, 500', height: block.settings.image.height, width: block.settings.image.width, alt: block.settings.image.alt | default: block.settings.title, loading: 'lazy' }}
                {% else %}
                  {{ 'image' | placeholder_svg_tag: 'custom-flow-section__image placeholder' }}
                {% endif %}
              </div>
              {% if block.settings.title != blank %}
                <h2 class="custom-flow-section__title">{{ block.settings.title }}</h2>
              {% endif %}
              {% if block.settings.text != blank %}
                <div class="custom-flow-section__text">{{ block.settings.text }}</div>
              {% endif %}
            </div>
          </article>
      {% endcase %}
    {% endfor %}
  </div>
</section>

{% schema %}
  {
    "name": "カスタムフローセクション",
    "tag": "section",
    "class": "section",
    "settings": [
      {
        "type": "color",
        "id": "number_color",
        "label": "数字の色",
        "default": "#333333"
      },
      {
        "type": "range",
        "id": "number_opacity",
        "min": 10,
        "max": 100,
        "step": 10,
        "unit": "%",
        "label": "数字の不透明度",
        "default": 20
      },
      {
        "type": "color",
        "id": "title_color",
        "label": "タイトルの色",
        "default": "#333333"
      },
      {
        "type": "color",
        "id": "text_color",
        "label": "テキストの色",
        "default": "#666666"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "上部の余白",
        "default": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "下部の余白",
        "default": 36
      },
      {
        "type": "range",
        "id": "sp_padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "スマホ上部余白",
        "default": 36
      },
      {
        "type": "range",
        "id": "sp_padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "スマホ下部余白",
        "default": 36
      }
    ],
    "blocks": [
      {
        "type": "column",
        "name": "カラム",
        "limit": 6,
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "画像"
          },
          {
            "type": "text",
            "id": "title",
            "label": "タイトル",
            "default": "タイトルが入ります"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "テキスト",
            "default": "<p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキスト</p>"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "カスタムフローセクション",
        "blocks": [
          {
            "type": "column"
          },
          {
            "type": "column"
          },
          {
            "type": "column"
          },
          {
            "type": "column"
          }
        ]
      }
    ]
  }
{% endschema %}

保存ができたら、カスタマイズ画面で「カスタムフローセクション」を追加してみてください。

実装方法3

簡単に実装ができたと思います！

このセクションは以下の項目を設定可能ですので環境に合わせて設定してお使いください。

スクロールできます
設定項目説明デフォルト値
数字の色背景の大きな数字の色#333333
数字の不透明度背景の大きな数字の不透明度20%
タイトルの色各カラムのタイトルの色#333333
テキストの色各カラムの本文テキストの色#666666
上部の余白セクション上部の余白（デスクトップ）36px
下部の余白セクション下部の余白（デスクトップ）36px
スマホ上部余白セクション上部の余白（モバイル）36px
スマホ下部余白セクション下部の余白（モバイル）36px

まとめ

今回は、フロー（流れ）セクションを実装する方法を解説しました！

すごく簡単ですが、こういったセクション単位でのカスタマイズをしていくことで、無料テーマでもリッチなストアを作ることができますので、ぜひ参考にしてみてください。

また、このブログでは他にもShopifyのカスタマイズについて解説していますので、あわせて参考にしてみてください。

あわせて読みたい
【Shopify】左右が見切れているスライダーの実装方法 Shopifyのテーマのデフォルトスライダー、使いやすいけどもっとリッチにしたい！ どのサイトも似たような印象になってしまう… このような方のための記事です。 今回は、...
あわせて読みたい
【Shopify】お問い合わせフォームにラジオボタンの追加 Shopifyでお問い合わせの項目にラジオボタンの項目を追加したい… 簡単にカスタマイズする方法はある？ こんな方のための記事です。 Shopifyで人気の無料テーマDawnでは...
Shopify
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次