3ステップカートのレスポンシブ対応について
e-shopsカートSでご提供しているショッピングカート「3ステップカート」につきまして、2023年5月に実施予定のシステムメンテナンスにおいてレスポンシブ対応を行いました。
レスポンシブ対応にあたっては、基本的にショップ様による設定変更は不要でメンテナンス終了後に自動的に3ステップカートおよび定期購入カートの注文手続き画面がレスポンシブ対応しております。
（※ゼロステップカートをご利用中の場合には、影響ございません。）
対象 |
全てのご利用ショップ様 |
|---|---|
対応時期 |
2023年5月30日（火）のシステムメンテナンス以降 |
対応内容 |
・3ステップカート画面（買い物カゴの中身画面～STEP4注文完了画面まで）のレスポンシブ対応 ・定期購入用カート画面（買い物カゴの中身画面～STEP4注文完了画面まで）のレスポンシブ対応 ・3ステップカートおよび定期購入カート画面内にある各リンク先ページ（特定商取引法に基づく表記、送料について、会員規約、個人情報保護方針、IDを忘れた方はコチラ、パスワードを忘れた方はコチラ） 定期購入カートはスタンダードプラン以上でご利用いただける機能です |
【注意①】下記設定を行われているショップ様はメンテナンス終了後、必ず3ステップカート画面の表示をご確認ください
- ・「コンテンツ」＞「注文画面設定」＞「上部HTML」および「下部HTML」
- ・「コンテンツ」＞「アンケート」＞「購入者へのコメント」
において、HTMLを利用し設定を行われている場合には3ステップカートのレスポンシブ対応後に設定内容がレイアウト崩れ等を起こしてしまう可能性がございます。そのため、メンテナンス終了後は必ずショップ様自身で実際に3ステップカート画面をご確認いただき、表示等に問題がないかなどをご確認くださいますようお願いいたします。
［2023/05/22 追加の変更点］
【注意②】買い物カゴの中身画面で表示されるボタンをオリジナル画像でご設定されている場合
買い物カゴの中身画面にて表示される注文手続きボタン・買い物を続けるボタンをオリジナル画像にてご設定中の場合には5/30以降、以下のようなルールで表示されます。（コンテンツ＞アイコン設定）
| オリジナル画像の元サイズ | PC（画面幅980px以上）の時の表示サイズ | 画面幅979px以下の時の表示サイズ |
|---|---|---|
| 横幅201px以上の画像 | そのままのサイズで表示 | 縦横比率を保ったまま横幅200px固定で表示 |
| 横幅200px以下の画像 | そのままのサイズで表示 | そのままのサイズで表示 |
※定期購入カートにて表示可能な定期購入手続きへボタンについても上記ルールで表示されます。
※レスポンシブ対応に伴うレイアウト調整により、登録しているオリジナルボタン画像のサイズや3ステップカートデザイン設定での文字サイズ、本体幅の設定値によっては、レイアウト崩れ等を起こしてしまう可能性もございますので、メンテナンス終了後にショップ様自身でも実際の表示についてご確認をお願いいたします。
レスポンシブ対応後の表示について
3ステップカートのレスポンシブ対応に際しては、主に画面幅が979px以下となった時に閲覧時の画面幅にあわせて表示されるレイアウトが大きく変更されます。PC（画面幅980px以上）で閲覧した際のレイアウトについては、大きなレイアウト変更はございませんが、レスポンシブ対応にあたり細かいデザインの調整を行わせていただきます。各画面での変更点は以下の通りです。
なお、定期購入カートについても基本的には以下でご案内する変更点と同じになります。
閲覧端末によっては端末やOSの仕様により、以下でご案内する画面例の表示と異なる場合がございますので予めご了承ください。
- PCで閲覧した際の表示
- 買い物かごの中身画面
- STEP1 購入者情報入力画面
- STEP2 支払・配送選択画面
- STEP3 確認画面
- STEP4 注文完了画面
- 定期購入カートについて
- 特商法などカート内からのリンク先ページ
PC（画面幅980px以上）で閲覧した際の変更点
レスポンシブ対応に伴い、今までPCでの閲覧時でも小さかった入力欄（テキストボックス）やセレクタ、ボタンのサイズを変更いたします。また、併せて3ステップカート内のリンク色や郵便番号変換ボタンの変更を行います。
※1 デザイン＞3ステップカート画面＞ステップ画像で設定するボタン（戻る・次へ・注文する・決済へ・確定する・注文を確定して決済へ）については、レスポンシブ対応に伴うサイズ変更はございません。
また、コンテンツ＞アイコン設定＞ログインボタンをオリジナル画像でご設定中の場合は従来どおり、設定中の画像サイズで表示されます。
※2 レスポンシブ対応に伴い、今まで購入者情報入力欄の外に表示されていた例文は入力欄内に表示する仕様へ変更いたしますので、デザイン＞3ステップカート画面＞例文文字色で指定されている文字色は適用されなくなります。なお、メンテナンス終了後、例文文字色の項目は「注意書き文字色」として項目名を変更いたします。「注意書き文字色」として指定した文字色が反映される箇所は以下3箇所になります。
【5/30以降、注意書き文字色が反映される箇所（旧例文文字色）】
・STEP1 新規会員登録用入力欄の注意書き
・STEP3トークン式クレジットカード決済選択時のクレジットカード情報入力欄の注意書き
・PC用会員マイページ＞会員情報変更画面での例文
買い物かごの中身画面（画面幅979px以下）の変更点
※3 デザイン＞3ステップカート画面＞カゴヘッダー出力設定が「サイト作成で設定したヘッダーデザインを利用する」で設定中の場合、画面幅が979px以下になるとサイト作成機能で設定されているキャッチコピーは非表示となります。画面幅が979px以下となってもキャッチコピーを表示させたい場合には、お手数ですが、ヘッダー画像に直接キャッチコピーを入れた画像をご作成のうえご設定ください。
※4 コンテンツ＞注文画面設定＞上部HTMLおよび下部HTMLにて画像が表示されるようご設定されている場合やHTMLを利用して表示内容をご設定いただいている場合にレスポンシブ対応に伴い、表示に影響が出る可能性がございます。そのため、お手数ですが5/30実施予定のメンテナンス終了後に必ずショップ様自身にて表示に問題がないかどうかご確認くださいますようお願いいたします。
STEP1 購入者情報入力画面（画面幅979px以下）の変更点
※5 デザイン＞3ステップカート画面＞ステップ画像で設定するボタン（戻る・次へ・注文する・決済へ・確定する・注文を確定して決済へ）については、レスポンシブ対応に伴うサイズ変更はございません。
また、コンテンツ＞アイコン設定＞ログインボタンをオリジナル画像でご設定中の場合は従来どおり、設定中の画像サイズで表示されます。
※6 レスポンシブ対応に伴い、今まで購入者情報入力欄の外に表示されていた例文は入力欄内に表示する仕様へ変更いたしますので、デザイン＞3ステップカート画面＞例文文字色で指定されている文字色は適用されなくなります。なお、メンテナンス終了後、例文文字色の項目は「注意書き文字色」として項目名を変更いたします。「注意書き文字色」として指定した文字色が反映される箇所は以下3箇所になります。
【5/30以降、注意書き文字色が反映される箇所（旧例文文字色）】
・STEP1 新規会員登録用入力欄の注意書き
・STEP3トークン式クレジットカード決済選択時のクレジットカード情報入力欄の注意書き
・PC用会員マイページ＞会員情報変更画面での例文
STEP2 支払・配送選択画面（画面幅979px以下）の変更点
STEP3 確認画面（画面幅979px以下）の変更点
STEP4 注文完了画面（画面幅979px以下）
※7 クロネコwebコレクト（API方式）をご利用中の場合、注文確定後に表示されるコンビニ選択画面や決済完了画面についてもレスポンシブ対応いたします。
定期購入カートについて（画面幅979px以下）
定期購入カートについては、基本的には前述でご案内のSTEP1～STEP4までと同じようにレスポンシブ対応いたしますが、定期購入特有の項目（2回目以降の配送選択・確認画面の定期購入情報）については下図のようにレスポンシブ対応いたします。
特商法などカート内からのリンク先ページ（画面幅979px以下）
カート内にある固定の各リンク先ページ（特商法など）についても、下図のようにレスポンシブ対応いたします。
| 特定商取引法に基づく表記 | 送料について |
|---|---|
現状では未記入の項目についても項目名のみ表示されておりましたが、5/30以降は未記入の項目は非表示となります。 |
 |
| 会員規約 | 個人情報保護方針 |
 |
 |
| IDを忘れた方はコチラ | パスワードを忘れた方はコチラ |
PC用会員マイページのログイン画面にある「IDを忘れた方はコチラ」のリンク先ページはレスポンシブ非対応のままとなります。 |
PC用会員マイページのログイン画面にある「パスワードを忘れた方はコチラ」のリンク先ページはレスポンシブ非対応のままとなります。 |
