💭

Shopifyで商品ページにベストセラーでコレクション表示

2023/03/11に公開

CSS

この度Shopifyのテーマのカスタマイズで、商品ページに商品一覧の機能が無いということで、表示できるように作りました。
テーマのカスタマイズで、カスタムliquidのボックスを使って設置できます。
任意のコレクションのハンドル名を設定して頂けましたら、商品４つを表示します。

パソコンの場合は、横一列に４つの商品を表示ですが、スマホの場合は、２×２で表示できます。

<style>

  .it_box_index {
    margin-left: 5%;
  }

  .it_products-wrap {
    width: 90%;
    height: 100%;
    display: flex;
    align-items: baseline;
    gap: auto;
    margin-left: auto;
    margin-right: auto;

  }

  .it_product-item  h3 {
    font-size: small;
    overflow-wrap: normal;
    margin-bottom: 5px;
  }

  .it_product-item  p {
    font-size: small;
    margin-top: 5px;
  }


  .it_product-item a {
    text-decoration: none;
  }

  @media only screen and (max-width: 767px) {
    .it_products-wrap {
        width: 100%;
        flex-wrap: wrap;
        gap: 5px;
        margin-left: 10px;


    }

   .it_product-item {
      width: 46%;
   } 

    .it_product-item img {
      width: 96%;
    }
  }

  @media only screen and (min-width: 768px) {
    .it_products-wrap {
        justify-content: space-evenly;
    }

    .it_product-item {
        width: calc(100%/4);
    } 

    .it_product-item img {
      width: 90%;
    }

  }
</style>

<div class="it_box_index">
    <h2>○○○のおすすめ</h2>
</div>
<div class="it_products-wrap">
{% assign it_products = collections['表示したいハンドル名'].products | sort: 'best-selling'  | reverse %}
{% for it_product in it_products limit: 4 %}
  <div class="it_product-item">
    <a href="{{ it_product.url }}" title="{{ it_product.title }}">
      <img src="{{ it_product.featured_image.src | product_img_url: 'medium' }}" alt="{{ it_product.title }}" />
      <h3>{{ it_product.title }}</h3>
      <p>{{ it_product.price | money }}</p>
    </a>
  </div>
{% endfor %}
</div>

この部分が、ベストセラーで並べ替えの部分です。

sort: 'best-selling'

こちらの記事を参考にしました。
https://webutubutu.com/webdesign/9582

この部分は、こちらの記事を読むと他の並べ替えも確認できます。

Discussion