単品画像ウィジェット：デザイン
読了時間：3分
下記のオプションを利用して単品画像ウィジェットを最適化しましょう。
背景・枠線
- 背景の不透明度・色：カラーボックスをクリックし、背景色を選択します。スライダーをドラッグして不透明度を調整します。
- 枠線の太さ（px）・色：カラーボックスをクリックしてウィジェットの枠線の色を選択し、スライダーをドラッグして枠線の太さを調節します。
- 区切り線の太さ（px）・色：カラーボックスをクリックしてウィジェットの区切り線の色を選択し、スライダーをドラッグして区切り線の太さを調節します。(一部のレイアウトで使用可能)
- 区切り線の長さ（px）：スライダーをドラッグして商品名と価格の間の区切り線の長さを調節します。(一部のレイアウトで使用可能)
テキスト
テキストの色を選択し、テキストアイコン 
をクリックして下記それぞれのフォントを選択します：
をクリックして下記それぞれのフォントを選択します： - 商品名
- 価格
- 価格内訳（例：￥200/g ）
- 在庫なしのメッセージ
ボタン
- ボタンスタイル：ボタンのスタイルをクリックして選択します。
- 色・不透明度：カラーボックスをクリックしてボタンの背景色を選択し、スライダーをドラッグして不透明度を変更します。
- 枠線の色・不透明度：カラーボックスをクリックしてボタンの枠線の色を選択し、スライダーをドラッグして枠線の不透明度を変更します。
- 角の丸み（px）：スライダーをドラッグしてボタンの角の丸みを変更します（半径が大きいほどボタンは丸くなります）。
- ボタンサイズ：スライダーでボタンのサイズを変更します。
- テキストフォント・色：カラーボックスをクリックしてテキストの色を選択し、テキストアイコン をクリックしてボタンのフォントを選択します。
ホバー
顧客がマウスオーバーした際のウィジェットのアクションを設定します：
- なし：ウィジェットは変更しません。
- オーバーレイ：
- カラーボックスをクリックし、オーバーレイ色を選択します。スライダーをドラッグして不透明度を調整します。
- （オプション）カラーボックスをクリックして枠線色を選択し、スライダーをドラッグして枠線の太さを設定します。
- （オプション）「マウスオーバーでズーム」トグルをクリックします。：
- オン：顧客が画像をマウスオーバーすると、ズーム表示されます。
- オフ：顧客が画像をマウスオーバーしても、ズーム表示されません。
- ズーム：マウスオーバーすると画像はズーム表示されます。
- （オプション）カラーボックスをクリックし、オーバーレイ色を選択します。スライダーをドラッグして不透明度を調整します。
- （オプション）カラーボックスをクリックして枠線色を選択し、スライダーをドラッグして枠線の太さを設定します。
- マウスオーバーでズームトグル：ズームが機能するには、有効化されていることを確認してください。
- 枠線：マウスオーバーすると商品情報の周りに枠線が表示されます。
- （オプション）カラーボックスをクリックし、オーバーレイ色を選択します。スライダーをドラッグして不透明度を調整します。
- カラーボックスをクリックして枠線の色を選択し、スライダーをドラッグして枠線の太さを設定します。
- （オプション）「マウスオーバーでズーム」トグルをクリックします。：
- オン：顧客が画像をマウスオーバーすると、ズーム表示されます。
- オフ：顧客が画像をマウスオーバーしても、ズーム表示されません。
リボン
リボンのデザインを設定します。商品にリボンを追加する方法はこちらをご覧ください。
- ボタンの色・不透明度：カラーボックスをクリックしてリボンの色を選択し、スライダーをドラッグして不透明度を変更します。
- 文字色：リボンの文字色を選択します。
お役に立ちましたか？
|