ShopifyのYotpoのレビューをCSSのみでカード型に変更する:メモ

テスト的に作成したのでメモ。開発者ツールに入れて確認しただけので本番での不具合確認はしていません。

実現したいこと

• ShopifyでYotpoアプリを導入
• Yotpoウィジェットに並ぶレビューを縦一列から、カード型にして横並びに変更する
• CSSのみで対応

Yotpoのウィジェットの細かい設定変更の可否がわからず、とりあえずCSSで簡易対応できるか試す意図となります。

サンプルコード

.yotpo .yotpo-nav-content>div.yotpo-active {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.yotpo-reviews.yotpo-active > * {
    width: 100%
}
.yotpo-reviews.yotpo-active > [class*="yotpo-review"] {
    width: calc(33% - .5rem)
    margin: 0;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    padding: 1rem;
}
.yotpo-reviews.yotpo-active > [class*="yotpo-review"] .yotpo-main {
    margin: 1rem 0 0;
}

Yotpoのレビューだけを内包するラッパーがないため無理やりな作り方です。
とはいえレビューとレビューの間に別パーツが出力されない限りは試作したCSSで対応できるとは思いますが。

懸念点

冒頭に記載した通り、実際に設定した場合に問題があるかどうかの確認ができていません。

使用するウィジェットの種類や設定によって構造が変わるため適宜調整する必要がありますが、レビューとレビューの間に別要素が出力される設定もあるようで、その場合は当記事の方法は適用不可かもしれません。

結び

CSSだけでJSに絡んだ要素を後から無理やり変更すると予期せぬ不具合が発生する可能性があり、実用に耐えうるのかは不明です。

仮に現時点では問題なかったとしても、クラス名や構造が変われば成り立たない方法なので、表示がおかしくなったらCSSを撤去する前提となります。