公開日：2023.07.21

Shopifyのテーマ「Dawn」で特集コレクションの商品をランダム表示するための設定例

UI/UX改善

用途

商品画像管理

実装方法

LIQUID
Javascript

詳細を表示する

Shopifyの「特集コレクション」で商品をランダムに表示するための設定例です。キャッシュが強固なliquidでアクセスするたびに内容が更新されるようにするため、テーマ「Prestige」で採用されているcart attributesを使った手法を参考に実験的に組んでみたものです。

テーマDawnで特集コレクションの商品をランダム表示するための設定方法

設定手順①「featured-collection.liquid」にschemeを、「ja.schema.json」にラベルを追加

設定手順②「featured-collection.liquid」を修正（その１）

設定手順③「featured-collection.liquid」を修正（その２）、「main-cart-items.liquid」を修正

設定手順④テーマの特集セクションの設定項目で表示するコレクションを選択し、「ランダムで表示する」をオンにする

ご購入（すべて¥0です）いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ：Dawn/Rise 15.2.0

「featured-collection.liquid」にschemeを追加

{
	"type": "checkbox",
	"id": "display_at_random",
	"label": "t:sections.featured-collection.settings.display_at_random.label",
	"default": false
},

「ja.schema.json」にラベルを追加

"display_at_random": {
	"label": "商品をランダムで表示する"
},

「featured-collection.liquid」を修正（その１）

</div>
      <div class="related-post" >
        <a href="https://x.com/sh_sakamoto/status/1682303302229446658" target="_blank" class="list-social__link link">
          <span class="svg-wrapper"><svg class="icon icon-twitter" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M7.273 2.8 10.8 7.822 15.218 2.8h1.768l-5.4 6.139 5.799 8.254h-4.658l-3.73-5.31-4.671 5.31H2.558l5.654-6.427L2.615 2.8zm6.242 13.125L5.07 4.109h1.405l8.446 11.816z" clip-rule="evenodd"/></svg>
</span>
          <span class="text">関連ポスト</span>
        </a>
      </div>

<product-modal id="ProductModal-template--18774038970619__main" class="product-media-modal media-modal">
  <div
    class="product-media-modal__dialog color-scheme-1 gradient"
    role="dialog"
    aria-label="メディアギャラリー"
    aria-modal="true"
    tabindex="-1"
  >
    <button
      id="ModalClose-template--18774038970619__main"
      type="button"
      class="product-media-modal__toggle"
      aria-label="閉じる"
    >
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-close" viewBox="0 0 18 17"><path fill="currentColor" d="M.865 15.978a.5.5 0 0 0 .707.707l7.433-7.431 7.579 7.282a.501.501 0 0 0 .846-.37.5.5 0 0 0-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 1 0-.707-.708L8.991 7.853 1.413.573a.5.5 0 1 0-.693.72l7.563 7.268z"/></svg>

    </button>

    <div
      class="product-media-modal__content color-scheme-1 gradient"
      role="document"
      aria-label="メディアギャラリー"
      tabindex="0"
    >
<img
    class="global-media-settings global-media-settings--no-shadow"
    srcset="//store-dojo.com/cdn/shop/files/2023-07-21.png?v=1737900414&width=550 550w,//store-dojo.com/cdn/shop/files/2023-07-21.png?v=1737900414&width=1100 1100w,//store-dojo.com/cdn/shop/files/2023-07-21.png?v=1737900414&width=1445 1445w,//store-dojo.com/cdn/shop/files/2023-07-21.png?v=1737900414&width=1680 1680w,//store-dojo.com/cdn/shop/files/2023-07-21.png?v=1737900414&width=2048 2048w,//store-dojo.com/cdn/shop/files/2023-07-21.png?v=1737900414 2050w
    "
    sizes="(min-width: 750px) calc(100vw - 22rem), 1100px"
    src="//store-dojo.com/cdn/shop/files/2023-07-21.png?v=1737900414&width=1445"
    alt="Shopifyのテーマ「Dawn」で特集コレクションの商品をランダム表示するための設定例"
    loading="lazy"
    width="1100"
    height="736"
    data-media-id="37970877317371"
  ></div>
  </div>
</product-modal>


    
<script src="//store-dojo.com/cdn/shop/t/2/assets/product-modal.js?v=116616134454508949461734250597" defer="defer">