無料の Shopify テーマ向けに再入荷ボタンとフォームをスタイル設定する方法

推定 1 分で読めます

更新日 2025年7月7日 0:00 EST

このページで学べること

無料の Shopify テーマごとに行うべき主な変更点について学び、再入荷ボタンとフォームをショップのテーマにすばやく一致させましょう。Klaviyo の「再入荷通知」ボタンとフォームは細かな設定が可能でデザインの好みに合わせて、色、フォント、テキスト、その他の要素を変更できます。

再入荷のインストールは、一部の無料 Shopify テーマでのみサポートされており、カスタムテーマを使用している Shopify ストアではサポートされていません。現時点では、Klaviyo サポートは、カスタムテーマを使用しているストアでの再入荷の実装を支援できません。ストアで使用している Shopify テーマを確認するには、Shopify テーマ検出ツールを使用できます。

始める前に

まだの方は、この記事を読み進める前に、まず連携手順を段階的に説明した Shopify のスタートガイドをお読みください。

再入荷機能の概要と有効化方法の詳細については、Shopify 向けの再入荷のインストールガイドをご覧ください。

ボタンとフォームのスタイル設定方法

スニペットをインストールするときは、この記事で無料テーマのスタイル設定スニペットを見つけてください。
デフォルトのスニペットを以下に示します。スタイリングスニペットに表示されている内容に従って、デフォルトのスニペット内の trigger: {} と modal: {} セクションのラインアイテムを更新（または追加）します。
1. たとえば、Crave テーマを使用している場合は、モーダルセクション内に次の行を追加するだけで済みます。 font_family: '"Archivo", serif;'
必要に応じて、明細項目のスタイルを任意で更新してください。

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "PUBLIC_API_KEY",
      platform: "shopify"
    });
    klaviyo.enable("backinstock",{ 
    trigger: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: false
    },
    modal: {
     headline: "{product_name}",
     body_content: "Register to receive a notification when this item comes back in stock.",
     email_field_label: "Email",
     button_label: "Notify me when available",
     subscription_success_label: "You're in! We'll let you know when it's back.",
     footer_content: '',
     additional_styles: "@import url('https://fonts.googleapis.com/css2?family=Roboto+wght@400;700&display=swap');",
     drop_background_color: "#000",
     background_color: "#fff",
     text_color: "#222",
     button_text_color: "#fff",
     button_background_color: "#439fdb",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

Crave

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Archivo", serif;'
}

Dawn

trigger: {
 product_page_class: 'button'
},
modal: {
font_family: '"Assistant", sans-serif;' 
}

スタジオ

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Electra", serif;' 
}

カラーブロック

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Futura", sans-serif;' }

センス

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Harmonia Sans", sans-serif;'
}

テイスト

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Anonymous Pro", sans-serif;'
}

作成

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Quattrocento Sans", sans-serif;'
}

Ride

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Avenir Next", sans-serif;'
}

再読み込み

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Questrial", sans-serif;'
}

シンプル

ビューティー

modal: {
 font_family: '"PT Serif",serif;'
}

Pop

ボーン

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Raleway');",
 font_family: '"Raleway","HelveticaNeue","Helvetica Neue",sans-serif;'
}

おもちゃ

trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

白黒

trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

鮮やか

trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

ベンチャー

スノーボード

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Karla');",
 font_family: '"Karla","HelveticaNeue","Helvetica Neue",sans-serif;'
}

アウトドア

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
 font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}

ボクシング

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');",
 font_family: '"Source Sans Pro","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Debut

デフォルト

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Work+Sans');",
 font_family: '"Work Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

ライト

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Muli');",
 font_family: '"Muli","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Supply

ライト

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
 font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}

青色

trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Montserrat');",
 font_family: '"Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;'
}

ナラティブ

ウォーム

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Avenir');",
 font_family: '"Avenir","HelveticaNeue","Helvetica Neue",sans-serif;'
}

ライト

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Cold

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Lato');",
 font_family: '"Lato","HelveticaNeue","Helvetica Neue",sans-serif;'
}

ブルックリン

クラシック

modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",
 font_family: '"Arapey",serif;'
}

最小

モダン

modal: {
 font_family: '"PT Serif",serif;'
}

ヴィンテージ

modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

ファッション

modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

達成できること

Shopify ストアの再入荷ボタンとフォームのスタイルを更新しました。

その他のリソース

How to create unique coupon codes for Shopify
Learn how to create single-use coupon codes for your Shopify store so that each customer receives their own unique coupon code for a given promotion on your site. This feature provides an alternative to creating a generic, also known as a static, coupon code, so you don't have to worry about codes being shared.

この記事は役に立ちましたか？

この記事へのフィードバックには、このフォームのみを使用してください。サポートへの連絡方法.

Klaviyo の詳細を見る

コミュニティ

同業者、パートナー、Klaviyo のエキスパートとつながり、インスピレーションを得たり、インサイトを共有したり、あらゆる質問への回答を得たりできます。

コミュニティにアクセスする

パートナー

特定のタスクのサポートや継続的なマーケティング管理のために、Klaviyo 認定エキスパートを雇いましょう。

パートナーを雇う

サポート

アカウントからサポートにアクセスしてください。

メールサポート (無料トライアルと有料アカウント) 24 時間 365 日利用可能

チャット/バーチャルアシスタント
利用可否は地域およびプランタイプによって異なります

ログイン