サブスク購入ボタンをカスタマイズしたい

• サブスク購入ボタンの画像を非表示にしたり、文字を非表示にしたりする方法を説明します。
• こちらをご覧になり、CSSを作成していただくことで、ボタンをカスタマイズができます。
• サブスク購入ボタンのカスタマイズは、弊社のサポート対象外となります。

サブスク購入ボタンにオリジナルの画像をアップロードする

1. Shopify→[オンラインストア]→[テーマ]→[…]→[複製]をクリックして、バックアップを取ります。

• ファイル名は、覚えやすいものに変更してください。
• 例として、「Craft[かんたんサブスク]サブスクアイコンPNG」としました。

2. [カスタマイズ]をクリックします。

3. サブスクを設定した商品をクリックします。

4. サブスクリプション購入ブロックをクリックします。

5. [画像を選択]をクリックします。

6. [画像を追加]をクリックして画像をアップロードします。

• アップロードした画像にチェックを付けます。
• [完了]をクリックします。
• アップロードが完了しました。

サブスク購入画面の画像をカスタマイズする

細かいCSSの設定については、弊社ではサポート対象外となります。

1. Shopify→[オンラインストア]→[テーマ]→[…]→[コードを編集]をクリックします。

2. 左上の検索画面で、「base」と入力して、base.cssファイルを開きます。

base.cssには、テーマのCSSが入っています。そこにCSSを追加していただくことでサブスク購入ボタンの表示のカスタマイズができます。

3. base.cssファイルの一番下にCSSを追加します。

右上の[ストアをプレビュー]をクリックして、プレビュー画面を見ながら作業してください。

サブスクボタンの画像サイズをカスタマイズする

• サブスクボタン画像のサイズをカスタマイズする場合は、次のCSSを追加してください。
• 0%にすると表示されません。

.sengine-subscription-buy-button svg {
    FONT-WEIGHT: 500; 
    width: 50% !important; /* サブスクボタン画像サイズカスタマイズ　0%にすると表示されません*/
    height: auto;
    margin-bottom: 1em;
}

サブスクボタンの枠線の太さををカスタマイズする

• 枠線の太さをカスタマイズできます。
• 0pxにすると表示されません。

.sengine-subscription-buy-button a, .sengine-subscription-buy-button label {
    display: flex; 
    border: 0px solid #000000 !important;  /* サブスクボタン枠線カスタマイズ　0pxにすると表示されません*/
    margin: 2px;
    padding: 6px;
    border-collapse: collapse;
    text-decoration: none;
    background: #fff;
    color: #000000;
}

サブスクボタンの高さをカスタマイズする

高さを指定できます。

サブスクボタンの文字をカスタマイズする

0emにすると文字が表示されません。

.sengine-subscription-buy-button {
    display: flex;
    height: 160px !important; /* サブスクボタン高さカスタマイズ */
    text-align: center;
    font-size: 0em; !important; /* サブスクボタン文字消去カスタマイズ　0emにすると表示されません*/
}

サブスクボタンのアクティブ時のカラーをカスタマイズする

rgbの数字を変更することで、カラーをカスタマイズできます。

.sengine-subscription-buy-button .active {
    border-color: #0075f6;
    color: #0075f6;
    /* background: rgba(0, 117, 246, 0.2); */
    background: rgb(204, 227, 253) !important; /* サブスクボタンアクティブカラーカスタマイズ */
}

その他の部分のカスタマイズ

1. Google Chromeで、商品詳細ページを表示して、右クリック→[検証]をクリックすると、次のような画面が表示されます。

2. カスタマイズしたい部分をクリックすると、ソースコードとCSSが表示されますので、該当分のCSSをコピーして、base.cssに貼り付けると、その他の部分をカスタマイズすることができます。

関連ページ

• [Online Store 2.0]商品ページのサブスクリプション購入ブロックのカスタマイズ
• お客様マイページやログイン画面、サンキュー画面をカスタマイズしたい