予約販売バッジを装飾する

予約販売バッジの見た目をカスタムCSSで変更する方法を説明します。

予約販売バッジのデザインはカスタムCSSで変更できます。Shopifyテーマの「カスタムCSS」に下記のコードを追加してください。

バッジの表示設定については「予約販売バッジを表示する」をご覧ください。

予約販売バッジのデフォルト設定は、商品名の末尾に予約販売バッジに設定した文言が表示されます。

予約販売バッジは、カスタムCSSに下記で紹介するサンプルコードを挿入することで装飾できます。

検証テーマ: Dawn 12.0.0

🔗 デモページを確認する

CSS

検証テーマ: Dawn 10.0.0

デモページを確認する

CSS

検証テーマ: Dawn 10.0.0

デモページを確認する

CSS

リボン形式のCSSジェネレーター

様々なデザインのリボン用CSSを下記のサイトで生成できます。

https://css-generators.com/ribbon-shapes/