【Shopify】特集コレクションの幅を広げスライダーボタンを商品画像左右に配置

この記事を書いた人

パピティー

htmlとCSSのきほん本を3冊読んだだけの初心者が、やりたいことベースで、shopifyとwordpressに奮闘中。

基本的にトップや各種ページの設定は、カスタマイズ画面で必要画像を選んで、テキストを入力して完成！としたいものの、特集コレクションセクションでカルーセルOKに設定したら、PC画面ではなぜかたっぷりある左側の余白と、ページネーションやスライダーボタンの上下にある余白が気になる・・・

今回のゴールは

特集コレクションの左側の余白を詰める
スライダーボタンのprevとnextの位置を画面の左右端にそれぞれ配置する

↓以下はPC画面ですが、【特集コレクション】が今回のコードを使用したもの、【Best sellers】がデフォルトです。

CSSだけではなく、htmlにclass追加も必要になるため（カスタムCSSでprevとnextの位置をいじろうとしたら、スライドショー箇所にも影響が出た）、新しいliquidテンプレートを作ることにしました。

カスタム特集コレクションセクションの作り方
まとめ

カスタム特集コレクションセクションの作り方

流れは以下の通りです。

セクション箇所にliquidファイルを新設（名称は自分でわかりやすいものでOK）
特集コレクション(collection-template.liquid)のコードを新設ファイルにコピペ
html箇所に固有のclassを追記
style箇所にCSSを追記

ではそれぞれ見ていきましょう。

1.セクションのliquidファイル新設

オンラインストア＞テーマ＞…＞コードを編集＞「新しいセクションを追加」して、「liquid」を選択し、わかりやすい名称のファイル名にして「完了」

2.特集コレクション(collection-template.liquid)のコードを新設ファイルにコピペ

新設すると表示されるコードは消して、「collection-template.liquid」のコードを貼り付け（デフォルトのコードを指します。編集を加えている場合には新たに追記するコードと競合しないように要注意）

3.html箇所に固有のclassを追加

追記箇所は以下2箇所です。

↓

「grid–{{ section.settings.columns_mobile }}-col-tablet-down{% endif %」の後ろに

「 custom-slider-ul」を追記。

※この時、custom-slider-ulの前に半角スペースを入れることをお忘れなく！

4.style箇所にCSSを追記

以下のコードをコピーしてstyle箇所に貼り付けます。

{% comment %}スライダー調整ここから{% endcomment %}
.custom-slider-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: calc(100%);  /*左右10pxずつ余白を追加 */
    top: 35%;
    transform: translateY(-50%);
   padding: 0 10px;   /*ボタンに余白を追加 */
  }

.custom-slider-buttons .slider-button–prev,
  .custom-slider-buttons .slider-button–next {
    padding: 0;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: absolute;
    text-shadow: 2px 2px 5px gray;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
  }
  .custom-slider-buttons .slider-button–prev .icon,
.custom-slider-buttons .slider-button–next .icon {
  height: 20px;
  color: mediumseagreen;
}
  .custom-slider-buttons .slider-counter.caption {
    display: none;
  }

.custom-slider-buttons .slider-button–prev {
 left: -10px;
}

.custom-slider-buttons .slider-button–next {
  right: 0;
}

/* カルーセル全幅設定 */
  .slider-component.slider-component-full-width {
    width: 100%;
    margin: 0; 
    overflow: hidden;
  }

/* スライダーのアイテム調整 */
  .slider__slide {
   margin-left: 0; /* 左に余白を追加 */
   margin-right: 0;
  }

.custom-slider-ul.slider–desktop .slider__slide:first-child {
  margin-left: 20px;
}
.custom-slider-ul.slider–desktop .slider__slide:first-child {
  margin-left: 20px;
}
  {% comment %} スライダー調整ここまで{% endcomment %}

保存してカスタマイズ画面のセクションに反映していれば成功！

カスタマイズ画面でPC、SPともにカルーセルに☑して完了です。

まとめ

shopifyのDawnテーマ（バージョン15）で特集コレクションをカルーセル表示する際の画像リストの幅を広げる方法、スライダーボタンの位置を画像リストの左右に移動させる方法を紹介しました。ほかのセクションに影響を及ぼさないように、セクションのliquidファイル新設が便利でおすすめです。

shopifyの特集コレクションセクションでスライダーボタンを画像の高さの左右端に設置する方法

カスタム特集コレクションセクションの作り方

1.セクションのliquidファイル新設

2.特集コレクション(collection-template.liquid)のコードを新設ファイルにコピペ

3.html箇所に固有のclassを追加

4.style箇所にCSSを追記

まとめ

shopifyの特集コレクションセクションで
スライダーボタンを画像の高さの
左右端に設置する方法