コレクションページ 商品ページに関して

Flowのテーマを使用しております。

下記のカスタマイズを行いたいのですが、方法をご存じの方いらっしゃいますでしょうか。

■コレクションページで、商品画像を横幅いっぱいに表示する

■コレクションページで、商品画像内(下部)に商品クレジットを表示する

■コレクションページで、商品クレジットを左寄せにする(通常中央揃え)

■商品ページで、商品画像を横幅いっぱいに表示する

恐れ入りますが、ご確認よろしくお願いいたします。

Ad2678さま

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

テーマによってカスタマイズ方法が違うのでややこしいですよね。

■コレクションページで、商品画像を横幅いっぱいに表示する

■商品ページで、商品画像を横幅いっぱいに表示する

横幅いっぱいというのは、以下画像のグレーの範囲いっぱいにということでしょうか?

弊社環境でFlowテーマを試したところ、どのサイズの画像も横幅いっぱいに表示されていました。

■コレクションページで、商品画像内(下部)に商品クレジットを表示する

商品ごとに異なるテキストを表示されたいという認識でよろしいでしょうか?

一番シンプルな方法ですと販売元の入力欄を使用する形で表示できるかと思います。

  1. 商品管理 → 商品を選択 → 販売元に任意のテキストを入力

  2. コレクションのカスタマイズ画面のCollection gridでProduct vendorというブロックを追加し、画像の下にドラッグ&ドロップ

■コレクションページで、商品クレジットを左寄せにする(通常中央揃え)

(もしProduct vendorを使ってクレジット表記された場合) デフォルトで中央寄せなので、以下CSSを当てれば左寄せに調整できます。

.product-grid–vendor-text {
margin-bottom: 5px;
text-align: left;
}

ご参考になりましたでしょうか。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

フルバランス 渡邉様

ご丁寧にご返信いただきありがとうございます。

下記ご相談内容になります。

ご確認よろしくお願いいたします。

■コレクションページで、商品画像を横幅いっぱいに表示する

■商品ページで、商品画像を横幅いっぱいに表示する

こちらですが、添付頂いた画像で、グレーの範囲の左右にある白枠まで画像をいっぱいに表示したいです。スマホで見た際、下記のように両サイドすべて画像になるイメージです。

■コレクションページで、商品画像内(下部)に商品クレジットを表示する

クレジットは通常でも表示されているので、画像内に表示させたかったのですが、

こちらは可能でしょうか?下記のイメージです。

■コレクションページで、商品クレジットを左寄せにする(通常中央揃え)

上記の画像内の表記が難しい場合、通常のクレジットを左に寄せる場合はどのようにすればよろしいでしょうか?

CSSの追加場所もご教授いただけますと幸いです。

お忙しい中大変恐れ入りますが、ご確認よろしくお願いいたします。