特定の要素を非表示

「特定の要素を非表示にする (開発者向け)」は、予約販売ルールを適用した商品の商品ページで、指定したHTML要素をCSSセレクタで非表示にする機能です。予約販売中だけでなく、条件を満たしていない状態でも状態ごとに設定できます。

• 予約商品で、スティッキーカートボタンを非表示にする

• 後払いの設定時に、特定の決済ボタンを非表示にする

• 限定販売商品で、SNS共有ボタンを非表示にする

• 販売終了商品で、価格表示を非表示にする

• 商品ページだけに対応しています

• スタータープラン以上で利用できます。旧ライトプランでは設定欄が操作できず、ストアにも反映されません。

• テーマで埋め込みアプリ「RuffRuff 予約販売」が有効になっている必要があります。

• アクションの「予約販売時」「条件外」「開始日前」「終了日後」の各タブで、個別に設定できます

• CSSセレクタで非表示にする要素を指定します。複数指定する場合はカンマで区切ります

• バリエーションを切り替えると、切り替え後の状態に応じて表示・非表示が自動で切り替わります

• 商品ページ内のカートボタンが予約販売のボタンへ切り替わるタイミングで非表示処理が動作します。カートボタンがページ下部にある場合は、ページを開いてから非表示になるまでに時間差が生じることがあります

非表示にする要素のCSSセレクタを、ブラウザの検証ツールで調べます。

(1) 対象の商品ページをブラウザで開く

(2) 非表示にする要素を右クリックして「検証」（デベロッパーツール）を開く

(3) 対象要素のIDまたはクラス名を確認し、CSSセレクタを控える

入力欄には「#express-payment, .payment-buttons」のような形式で入力します。

調べたCSSセレクタを、予約販売ルールの「アクション」で状態ごとに設定します。

(1) 対象の予約販売ルールを開く

(2) 「アクション」セクションで、非表示を適用する状態のタブを開く

タブは左から「予約販売時」「条件外」「開始日前」「終了日後」の順に並びます。「開始日前」「終了日後」のタブでは、先に「開始日前アクションを有効にする」「終了日後アクションを有効にする」にチェックを付けると、以降の設定項目が表示されます。

(3) 「詳細設定」にある「特定の要素を非表示にする (開発者向け)」にチェックを付ける

(4) 「CSSセレクタ」に非表示にする要素のセレクタを入力する

複数指定する場合はカンマで区切ります。

(5) 「保存」を選択する

非表示を解除するときは、チェックを外すだけでなく、「CSSセレクタ」の入力内容も空にしてから保存してください。チェックを外しても、入力済みのCSSセレクタは保存されたまま残り、ストアでは非表示のままになります。

(1) 対象の予約販売ルールを開き、該当するタブを開く

(2) 「特定の要素を非表示にする (開発者向け)」にチェックが付いた状態で、「CSSセレクタ」の入力内容をすべて削除する

(3) 「保存」を選択する

必要に応じて、そのあとにチェックを外してもう一度保存してください。

• アクション

• Shopifyテーマごとに利用できない機能