FROM CACHE - jp_header
解決済

【dawnテーマ】 コラージュセクションの各ブロックの上に見出しを表示させたい。

rinkeikai
Shopify Partner
5 0 1

現在dawnテーマを使って実装中です。
コラージュセクションを利用して、ランキング表示を行いたいと考えています。

その為こちらの画像の赤四角の場所のように、

各商品ブロックの上に見出しで(第1位、第2位、第3位)と表示させたいです。

ご助言お願い致します。

スクリーンショット 2023-11-06 1.04.37.png

2 件の受理された解決策

福水正太
Shopify Expert
63 24 23

成功

おはようございます。

株式会社ファイブビットの福水と申します。

 

コラージュセクションにランキング表示をするということで、下記の手順をお試しください。

(コード編集前に、必ずメモ帳などにバックアップをとってから作業を開始してください)

 

------------------------------------------------------------------------------------------------------------

1. 管理画面「オンラインストア」→「テーマ」→「コードを編集」→コード編集画面から「collage.liquid」を検索し、下記コードとファイルの中身をそっくり入れ替えた上で、保存

 

 

 

{{ 'collage.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-modal-video.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient isolate">
  <div class="page-width section-{{ section.id }}-padding">
    {%- if section.settings.heading != blank -%}
      <h2 class="collage-wrapper-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
        {{ section.settings.heading }}
      </h2>
    {%- endif -%}
    <div class="collage{% if section.settings.mobile_layout == 'collage' %} collage--mobile{% endif %}">
      {%- for block in section.blocks -%}
        <div
          class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {{ block.shopify_attributes }}
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: {{ forloop.index }};"
          {% endif %}
        >
        {% if section.settings.display_rank %}
          <div class="collage-rank">第{{ forloop.index }}位</div>
        {% endif %}
          {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
          {%- case block.type -%}
            {%- when 'image' -%}
              <div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}card-wrapper {{ section.settings.card_styles }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
                <div
                  class="media media--transparent ratio"
                  {% if block.settings.image != blank %}
                    style="--ratio-percent: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%"
                  {% else %}
                    style="--ratio-percent: 100%"
                  {% endif %}
                >
                  {%- if block.settings.image != blank -%}
                    {%- liquid
                      if section.settings.desktop_layout == 'left'
                        assign large_block = forloop.first
                      else
                        assign large_block = forloop.last
                      endif

                      assign grid_space_desktop = settings.spacing_grid_horizontal | divided_by: 2 | append: 'px'
                      assign grid_space_mobile = settings.spacing_grid_horizontal | divided_by: 4 | append: 'px'
                    -%}
                    {%- if large_block -%}
                      {%- capture sizes -%}
                        {% if section.blocks.size == 1 -%}(min-width: {{ settings.page_width }}px) calc({{ settings.page_width }}px - 100px){% else %}(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %},
                        {% if section.blocks.size == 1 -%}(min-width: 750px) calc(100vw - 100px){% else %}(min-width: 750px) calc((100vw - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %},
                        {% if section.blocks.size == 2 and section.settings.mobile_layout == 'collage' -%}calc((100vw - 30px) / 2){% else %}calc(100vw - 30px){% endif %}
                        {%- endcapture -%}
                      {{
                        block.settings.image
                        | image_url: width: 3200
                        | image_tag:
                          sizes: sizes,
                          widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
                      }}
                    {%- else -%}
                      {%- capture sizes -%}
                           (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 1 / 3 - {{ grid_space_desktop }}),
                           (min-width: 750px) calc((100vw - 100px) * 1 / 3 - {{ grid_space_desktop }}),
                           {% if section.settings.mobile_layout == 'collage' %}calc((100vw - 30px) / 2 - {{ grid_space_mobile }}){% else %}calc(100vw - 30px){% endif %}
                        {%- endcapture -%}
                      {{
                        block.settings.image
                        | image_url: width: 3200
                        | image_tag:
                          sizes: sizes,
                          widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
                      }}
                    {%- endif -%}
                  {%- else -%}
                    {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            {%- when 'product' -%}
              {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
              {% render 'card-product',
                card_product: block.settings.product,
                media_aspect_ratio: 'adapt',
                show_secondary_image: block.settings.second_image,
                extend_height: true,
                placeholder_image: placeholder_image
              %}
            {%- when 'collection' -%}
              {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
              {% render 'card-collection',
                card_collection: block.settings.collection,
                media_aspect_ratio: 'adapt',
                columns: 2,
                extend_height: true,
                wrapper_class: section.settings.card_styles,
                placeholder_image: placeholder_image
              %}
            {%- when 'video' -%}
              <div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}{{ section.settings.card_styles }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
                <noscript>
                  <a
                    href="{{ block.settings.video_url }}"
                    class="collage-card__link"
                  >
                    <div
                      class="media media--transparent ratio"
                      {% if block.settings.cover_image != blank %}
                        style="--ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%"
                      {% else %}
                        style="--ratio-percent: 100%"
                      {% endif %}
                    >
                      {%- if block.settings.cover_image != blank -%}
                        {%- capture sizes -%}
                          (min-width: {{ settings.page_width }}px)
                          {% if section.blocks.size == 1 -%}
                            calc({{ settings.page_width }}px - 100px)
                          {%- else -%}
                            {{- settings.page_width | minus: 100 | times: 0.67 | round }}px
                          {%- endif -%}
                          , (min-width: 750px)
                          {%- if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif -%}
                          , calc(100vw - 30px)
                        {%- endcapture -%}
                        {{
                          block.settings.cover_image
                          | image_url: width: 3000
                          | image_tag: sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
                        }}
                      {%- else -%}
                        {{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                      {%- endif -%}
                    </div>
                  </a>
                </noscript>
                <modal-opener class="no-js-hidden" data-modal="#PopupModal-{{ block.id }}">
                  <div class="deferred-media">
                    <button
                      class="deferred-media__poster full-unstyled-link"
                      type="button"
                      aria-label="{{ 'sections.video.load_video' | t: description: block.settings.description | escape }}"
                      aria-haspopup="dialog"
                      data-media-id="{{ block.settings.video_url.id }}"
                    >
                      <div
                        class="media media--transparent ratio"
                        {% if block.settings.cover_image != blank %}
                          style="--ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%"
                        {% else %}
                          style="--ratio-percent: 100%"
                        {% endif %}
                      >
                        <span class="deferred-media__poster-button motion-reduce">
                          {%- render 'icon-play' -%}
                        </span>

                        {%- if block.settings.cover_image != blank -%}
                          {%- capture sizes -%}
                            (min-width: {{ settings.page_width }}px)
                            {% if section.blocks.size == 1 -%}
                              calc({{ settings.page_width }}px - 100px)
                            {%- else -%}
                              {{- settings.page_width | minus: 100 | times: 0.67 | round }}px
                            {%- endif -%}
                            , (min-width: 750px)
                            {%- if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif -%}
                            , calc(100vw - 30px)
                          {%- endcapture -%}
                          {{
                            block.settings.cover_image
                            | image_url: width: 3000
                            | image_tag: sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
                          }}
                        {%- else -%}
                          {{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                        {%- endif -%}
                      </div>
                    </button>
                  </div>
                </modal-opener>
                <modal-dialog
                  id="PopupModal-{{ block.id }}"
                  class="modal-video media-modal color-{{ settings.color_schemes | first }}"
                >
                  <div
                    class="modal-video__content"
                    role="dialog"
                    aria-label="{{ block.settings.description | escape }}"
                    aria-modal="true"
                    tabindex="-1"
                  >
                    <button
                      id="ModalClose-{{ block.id }}"
                      type="button"
                      class="modal-video__toggle"
                      aria-label="{{ 'accessibility.close' | t }}"
                    >
                      {% render 'icon-close' %}
                    </button>
                    <div class="modal-video__content-info">
                      <deferred-media class="modal-video__video template-popup">
                        <template>
                          {%- if block.settings.video_url.type == 'youtube' -%}
                            <iframe
                              src="https://www.youtube.com/embed/{{ block.settings.video_url.id }}?enablejsapi=1"
                              class="js-youtube"
                              allow="autoplay; encrypted-media"
                              allowfullscreen
                              title="{{ block.settings.description | escape }}"
                            ></iframe>
                          {%- else -%}
                            <iframe
                              src="https://player.vimeo.com/video/{{ block.settings.video_url.id }}"
                              class="js-vimeo"
                              allow="autoplay; encrypted-media"
                              allowfullscreen
                              title="{{ block.settings.description | escape }}"
                            ></iframe>
                          {%- endif -%}
                        </template>
                      </deferred-media>
                    </div>
                  </div>
                </modal-dialog>
              </div>
          {%- endcase -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.collage.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "heading",
      "default": "Multimedia collage",
      "label": "t:sections.collage.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "desktop_layout",
      "options": [
        {
          "value": "left",
          "label": "t:sections.collage.settings.desktop_layout.options__1.label"
        },
        {
          "value": "right",
          "label": "t:sections.collage.settings.desktop_layout.options__2.label"
        }
      ],
      "default": "left",
      "label": "t:sections.collage.settings.desktop_layout.label"
    },
    {
      "type": "select",
      "id": "mobile_layout",
      "options": [
        {
          "value": "collage",
          "label": "t:sections.collage.settings.mobile_layout.options__1.label"
        },
        {
          "value": "column",
          "label": "t:sections.collage.settings.mobile_layout.options__2.label"
        }
      ],
      "default": "column",
      "label": "t:sections.collage.settings.mobile_layout.label"
    },
    {
      "type": "select",
      "id": "card_styles",
      "options": [
        {
          "value": "none",
          "label": "t:sections.collage.settings.card_styles.options__1.label"
        },
        {
          "value": "product-card-wrapper",
          "label": "t:sections.collage.settings.card_styles.options__2.label"
        }
      ],
      "default": "product-card-wrapper",
      "info": "t:sections.collage.settings.card_styles.info",
      "label": "t:sections.collage.settings.card_styles.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
    {
      "type": "checkbox",
      "id": "display_rank",
      "label": "ランキング表示",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "t:sections.collage.blocks.image.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.collage.blocks.image.settings.image.label"
        }
      ]
    },
    {
      "type": "product",
      "name": "t:sections.collage.blocks.product.name",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "t:sections.collage.blocks.product.settings.product.label"
        },
        {
          "type": "checkbox",
          "id": "second_image",
          "default": false,
          "label": "t:sections.collage.blocks.product.settings.second_image.label"
        }
      ]
    },
    {
      "type": "collection",
      "name": "t:sections.collage.blocks.collection.name",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "t:sections.collage.blocks.collection.settings.collection.label"
        }
      ]
    },
    {
      "type": "video",
      "name": "t:sections.collage.blocks.video.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "cover_image",
          "label": "t:sections.collage.blocks.video.settings.cover_image.label"
        },
        {
          "type": "video_url",
          "id": "video_url",
          "accept": ["youtube", "vimeo"],
          "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
          "label": "t:sections.collage.blocks.video.settings.video_url.label",
          "placeholder": "t:sections.collage.blocks.video.settings.video_url.placeholder",
          "info": "t:sections.collage.blocks.video.settings.video_url.info"
        },
        {
          "type": "text",
          "id": "description",
          "default": "Describe the video",
          "label": "t:sections.collage.blocks.video.settings.description.label",
          "info": "t:sections.collage.blocks.video.settings.description.info"
        }
      ]
    }
  ],
  "max_blocks": 3,
  "presets": [
    {
      "name": "t:sections.collage.presets.name",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "product"
        },
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

 

 

 

実際の操作の流れは下記動画にまとめているので、ご参照ください。

動画:https://gyazo.com/07e01c320fe51e0f36d7f4d4d15d2ac9

 

2. 管理画面「オンラインストア」→「テーマ」→「カスタマイズ」からコラージュセクションを表示して、「第〇位」が表示されることを確認してください。

動画:https://gyazo.com/809c4102336c1eaeb115a9878a1dd1bb

※デザインは「カスタムCSS」より調整してください

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/

元の投稿で解決策を見る

福水正太
Shopify Expert
63 24 23

成功

先日ご提示させていただいた下記動画のように、各セクションにランキング表示を制御するためのチェックボックスが表示されておりませんでしょうか?

--------------------------------------------------------------------------------------

管理画面「オンラインストア」→「テーマ」→「カスタマイズ」からコラージュセクションを表示して、「第〇位」が表示されることを確認してください。

動画:https://gyazo.com/809c4102336c1eaeb115a9878a1dd1bb

※デザインは「カスタムCSS」より調整してください

--------------------------------------------------------------------------------------

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/

元の投稿で解決策を見る

7件の返信7

福水正太
Shopify Expert
63 24 23

成功

おはようございます。

株式会社ファイブビットの福水と申します。

 

コラージュセクションにランキング表示をするということで、下記の手順をお試しください。

(コード編集前に、必ずメモ帳などにバックアップをとってから作業を開始してください)

 

------------------------------------------------------------------------------------------------------------

1. 管理画面「オンラインストア」→「テーマ」→「コードを編集」→コード編集画面から「collage.liquid」を検索し、下記コードとファイルの中身をそっくり入れ替えた上で、保存

 

 

 

{{ 'collage.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-modal-video.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient isolate">
  <div class="page-width section-{{ section.id }}-padding">
    {%- if section.settings.heading != blank -%}
      <h2 class="collage-wrapper-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
        {{ section.settings.heading }}
      </h2>
    {%- endif -%}
    <div class="collage{% if section.settings.mobile_layout == 'collage' %} collage--mobile{% endif %}">
      {%- for block in section.blocks -%}
        <div
          class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {{ block.shopify_attributes }}
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: {{ forloop.index }};"
          {% endif %}
        >
        {% if section.settings.display_rank %}
          <div class="collage-rank">第{{ forloop.index }}位</div>
        {% endif %}
          {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
          {%- case block.type -%}
            {%- when 'image' -%}
              <div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}card-wrapper {{ section.settings.card_styles }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
                <div
                  class="media media--transparent ratio"
                  {% if block.settings.image != blank %}
                    style="--ratio-percent: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%"
                  {% else %}
                    style="--ratio-percent: 100%"
                  {% endif %}
                >
                  {%- if block.settings.image != blank -%}
                    {%- liquid
                      if section.settings.desktop_layout == 'left'
                        assign large_block = forloop.first
                      else
                        assign large_block = forloop.last
                      endif

                      assign grid_space_desktop = settings.spacing_grid_horizontal | divided_by: 2 | append: 'px'
                      assign grid_space_mobile = settings.spacing_grid_horizontal | divided_by: 4 | append: 'px'
                    -%}
                    {%- if large_block -%}
                      {%- capture sizes -%}
                        {% if section.blocks.size == 1 -%}(min-width: {{ settings.page_width }}px) calc({{ settings.page_width }}px - 100px){% else %}(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %},
                        {% if section.blocks.size == 1 -%}(min-width: 750px) calc(100vw - 100px){% else %}(min-width: 750px) calc((100vw - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %},
                        {% if section.blocks.size == 2 and section.settings.mobile_layout == 'collage' -%}calc((100vw - 30px) / 2){% else %}calc(100vw - 30px){% endif %}
                        {%- endcapture -%}
                      {{
                        block.settings.image
                        | image_url: width: 3200
                        | image_tag:
                          sizes: sizes,
                          widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
                      }}
                    {%- else -%}
                      {%- capture sizes -%}
                           (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 1 / 3 - {{ grid_space_desktop }}),
                           (min-width: 750px) calc((100vw - 100px) * 1 / 3 - {{ grid_space_desktop }}),
                           {% if section.settings.mobile_layout == 'collage' %}calc((100vw - 30px) / 2 - {{ grid_space_mobile }}){% else %}calc(100vw - 30px){% endif %}
                        {%- endcapture -%}
                      {{
                        block.settings.image
                        | image_url: width: 3200
                        | image_tag:
                          sizes: sizes,
                          widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
                      }}
                    {%- endif -%}
                  {%- else -%}
                    {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
            {%- when 'product' -%}
              {%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
              {% render 'card-product',
                card_product: block.settings.product,
                media_aspect_ratio: 'adapt',
                show_secondary_image: block.settings.second_image,
                extend_height: true,
                placeholder_image: placeholder_image
              %}
            {%- when 'collection' -%}
              {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
              {% render 'card-collection',
                card_collection: block.settings.collection,
                media_aspect_ratio: 'adapt',
                columns: 2,
                extend_height: true,
                wrapper_class: section.settings.card_styles,
                placeholder_image: placeholder_image
              %}
            {%- when 'video' -%}
              <div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}{{ section.settings.card_styles }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
                <noscript>
                  <a
                    href="{{ block.settings.video_url }}"
                    class="collage-card__link"
                  >
                    <div
                      class="media media--transparent ratio"
                      {% if block.settings.cover_image != blank %}
                        style="--ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%"
                      {% else %}
                        style="--ratio-percent: 100%"
                      {% endif %}
                    >
                      {%- if block.settings.cover_image != blank -%}
                        {%- capture sizes -%}
                          (min-width: {{ settings.page_width }}px)
                          {% if section.blocks.size == 1 -%}
                            calc({{ settings.page_width }}px - 100px)
                          {%- else -%}
                            {{- settings.page_width | minus: 100 | times: 0.67 | round }}px
                          {%- endif -%}
                          , (min-width: 750px)
                          {%- if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif -%}
                          , calc(100vw - 30px)
                        {%- endcapture -%}
                        {{
                          block.settings.cover_image
                          | image_url: width: 3000
                          | image_tag: sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
                        }}
                      {%- else -%}
                        {{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                      {%- endif -%}
                    </div>
                  </a>
                </noscript>
                <modal-opener class="no-js-hidden" data-modal="#PopupModal-{{ block.id }}">
                  <div class="deferred-media">
                    <button
                      class="deferred-media__poster full-unstyled-link"
                      type="button"
                      aria-label="{{ 'sections.video.load_video' | t: description: block.settings.description | escape }}"
                      aria-haspopup="dialog"
                      data-media-id="{{ block.settings.video_url.id }}"
                    >
                      <div
                        class="media media--transparent ratio"
                        {% if block.settings.cover_image != blank %}
                          style="--ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%"
                        {% else %}
                          style="--ratio-percent: 100%"
                        {% endif %}
                      >
                        <span class="deferred-media__poster-button motion-reduce">
                          {%- render 'icon-play' -%}
                        </span>

                        {%- if block.settings.cover_image != blank -%}
                          {%- capture sizes -%}
                            (min-width: {{ settings.page_width }}px)
                            {% if section.blocks.size == 1 -%}
                              calc({{ settings.page_width }}px - 100px)
                            {%- else -%}
                              {{- settings.page_width | minus: 100 | times: 0.67 | round }}px
                            {%- endif -%}
                            , (min-width: 750px)
                            {%- if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif -%}
                            , calc(100vw - 30px)
                          {%- endcapture -%}
                          {{
                            block.settings.cover_image
                            | image_url: width: 3000
                            | image_tag: sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
                          }}
                        {%- else -%}
                          {{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                        {%- endif -%}
                      </div>
                    </button>
                  </div>
                </modal-opener>
                <modal-dialog
                  id="PopupModal-{{ block.id }}"
                  class="modal-video media-modal color-{{ settings.color_schemes | first }}"
                >
                  <div
                    class="modal-video__content"
                    role="dialog"
                    aria-label="{{ block.settings.description | escape }}"
                    aria-modal="true"
                    tabindex="-1"
                  >
                    <button
                      id="ModalClose-{{ block.id }}"
                      type="button"
                      class="modal-video__toggle"
                      aria-label="{{ 'accessibility.close' | t }}"
                    >
                      {% render 'icon-close' %}
                    </button>
                    <div class="modal-video__content-info">
                      <deferred-media class="modal-video__video template-popup">
                        <template>
                          {%- if block.settings.video_url.type == 'youtube' -%}
                            <iframe
                              src="https://www.youtube.com/embed/{{ block.settings.video_url.id }}?enablejsapi=1"
                              class="js-youtube"
                              allow="autoplay; encrypted-media"
                              allowfullscreen
                              title="{{ block.settings.description | escape }}"
                            ></iframe>
                          {%- else -%}
                            <iframe
                              src="https://player.vimeo.com/video/{{ block.settings.video_url.id }}"
                              class="js-vimeo"
                              allow="autoplay; encrypted-media"
                              allowfullscreen
                              title="{{ block.settings.description | escape }}"
                            ></iframe>
                          {%- endif -%}
                        </template>
                      </deferred-media>
                    </div>
                  </div>
                </modal-dialog>
              </div>
          {%- endcase -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.collage.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "heading",
      "default": "Multimedia collage",
      "label": "t:sections.collage.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "desktop_layout",
      "options": [
        {
          "value": "left",
          "label": "t:sections.collage.settings.desktop_layout.options__1.label"
        },
        {
          "value": "right",
          "label": "t:sections.collage.settings.desktop_layout.options__2.label"
        }
      ],
      "default": "left",
      "label": "t:sections.collage.settings.desktop_layout.label"
    },
    {
      "type": "select",
      "id": "mobile_layout",
      "options": [
        {
          "value": "collage",
          "label": "t:sections.collage.settings.mobile_layout.options__1.label"
        },
        {
          "value": "column",
          "label": "t:sections.collage.settings.mobile_layout.options__2.label"
        }
      ],
      "default": "column",
      "label": "t:sections.collage.settings.mobile_layout.label"
    },
    {
      "type": "select",
      "id": "card_styles",
      "options": [
        {
          "value": "none",
          "label": "t:sections.collage.settings.card_styles.options__1.label"
        },
        {
          "value": "product-card-wrapper",
          "label": "t:sections.collage.settings.card_styles.options__2.label"
        }
      ],
      "default": "product-card-wrapper",
      "info": "t:sections.collage.settings.card_styles.info",
      "label": "t:sections.collage.settings.card_styles.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
    {
      "type": "checkbox",
      "id": "display_rank",
      "label": "ランキング表示",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "t:sections.collage.blocks.image.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.collage.blocks.image.settings.image.label"
        }
      ]
    },
    {
      "type": "product",
      "name": "t:sections.collage.blocks.product.name",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "t:sections.collage.blocks.product.settings.product.label"
        },
        {
          "type": "checkbox",
          "id": "second_image",
          "default": false,
          "label": "t:sections.collage.blocks.product.settings.second_image.label"
        }
      ]
    },
    {
      "type": "collection",
      "name": "t:sections.collage.blocks.collection.name",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "t:sections.collage.blocks.collection.settings.collection.label"
        }
      ]
    },
    {
      "type": "video",
      "name": "t:sections.collage.blocks.video.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "cover_image",
          "label": "t:sections.collage.blocks.video.settings.cover_image.label"
        },
        {
          "type": "video_url",
          "id": "video_url",
          "accept": ["youtube", "vimeo"],
          "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
          "label": "t:sections.collage.blocks.video.settings.video_url.label",
          "placeholder": "t:sections.collage.blocks.video.settings.video_url.placeholder",
          "info": "t:sections.collage.blocks.video.settings.video_url.info"
        },
        {
          "type": "text",
          "id": "description",
          "default": "Describe the video",
          "label": "t:sections.collage.blocks.video.settings.description.label",
          "info": "t:sections.collage.blocks.video.settings.description.info"
        }
      ]
    }
  ],
  "max_blocks": 3,
  "presets": [
    {
      "name": "t:sections.collage.presets.name",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "product"
        },
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

 

 

 

実際の操作の流れは下記動画にまとめているので、ご参照ください。

動画:https://gyazo.com/07e01c320fe51e0f36d7f4d4d15d2ac9

 

2. 管理画面「オンラインストア」→「テーマ」→「カスタマイズ」からコラージュセクションを表示して、「第〇位」が表示されることを確認してください。

動画:https://gyazo.com/809c4102336c1eaeb115a9878a1dd1bb

※デザインは「カスタムCSS」より調整してください

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
rinkeikai
Shopify Partner
5 0 1

御回答有難うございます。
参考にさせて頂きます。

Qcoltd
Shopify Partner
1051 429 417

@rinkeikai

 

ご質問いただいている、コラージュセクションで見出しを表示させたい件ですが、コラージュセクションを利用した際、必ずご指定の赤枠部分に(第1位、第2位、第3位)と表示されてよろしければ、下記CSSをテンプレートに追記いただけましたら、表示することができるかと思います。

※Dawn 12.0.0のテーマを元にご説明させていただきます。

 

CSS追加方法

1.テーマ>コードを編集>をクリック

Qcoltd_0-1699259464910.png

 

2.左上の検索欄に『collage.liquid』を入力し、ソートされたcollage.liquidをクリック

Qcoltd_1-1699259464910.png

 

3.collage.liquidの最下部に下記CSSを追記し、保存ボタンをクリック

Qcoltd_2-1699259464798.png

 

4.以上で下記画像のように各画像の左上に(第1位、第2位、第3位)と表示されます。

Qcoltd_3-1699259464453.png

 

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
rinkeikai
Shopify Partner
5 0 1

ありがとうございます。
無事表示されました。

rinkeikai
Shopify Partner
5 0 1

先日は御回答頂き有難うございました。


御回答いただいた内容で無事表示することはできました。
ただ新たなセクションとして『collage.liquid』のコードをコピぺしてファイルを作成したのですが、
新しく作成したセクションだけでなく、オリジナルの『collage.liquid』のセクション(ランキング表記をさせたくないセクション)まで表示されてしまいます。
オリジナルのセクションに干渉させない解決方法はございますでしょうか?


アドバイス頂けましたら幸いです。
宜しくお願い致します。

福水正太
Shopify Expert
63 24 23

成功

先日ご提示させていただいた下記動画のように、各セクションにランキング表示を制御するためのチェックボックスが表示されておりませんでしょうか?

--------------------------------------------------------------------------------------

管理画面「オンラインストア」→「テーマ」→「カスタマイズ」からコラージュセクションを表示して、「第〇位」が表示されることを確認してください。

動画:https://gyazo.com/809c4102336c1eaeb115a9878a1dd1bb

※デザインは「カスタムCSS」より調整してください

--------------------------------------------------------------------------------------

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
rinkeikai
Shopify Partner
5 0 1

お忙しいところご返信いただき有難うございます。
無事切り替え完了致しました。

もう一つご相談なのですが、
同じような実装を、『featured-collection.liquid』でも可能でしょうか?

宜しくお願い致します。