• BLOCK SETUP GUIDES • SETUP GUIDE

How to Show Shopify Checkout Blocks Based on Device

By Rivio Support Team
2 min read

What you will achieve in this guide

Follow the feature-specific setup and testing instructions below. Check the supported pages and plan requirements before activating the feature.

EXPECTED SETUP TIME Varies by feature
COMPATIBILITY See requirements in this guide
TECHNICAL DIFFICULTY Zero Code Required

Display conditions control who sees a saved block and when it appears. They do not add the block to the editor.

How this feature works

Device conditions restrict a placed block using the supported device value. Inspect layout in the editor, then test visibility in actual phone and desktop shopper sessions.

Before you begin

Checkout-step visual blocks require Shopify Plus. Supported Thank you and Order status blocks are available on Basic and higher. Check the page labels on the block’s Rivio card; a card does not necessarily support every page.

Worked example: Show a mobile-specific message

Example setup: Banner Need help? Contact our store; phone and desktop browser.

Step-by-step instructions

  1. Open UI extension blocks and edit a supported Custom banner configuration.

  2. Enter the demonstration message and confirm the target page supports this condition.

  3. Choose the supported Device condition and Mobile value.

  4. Review all/AND versus any/OR only where the form exposes grouping controls. Use one condition for the first test.

  5. Save as Active and confirm the banner is placed and saved on the exact Shopify editor page.

  6. Run each matching and non-matching case on the actual customer page. Keep cart and customer context constant except for the input being tested.

Verify the result

Test case Expected result or verification
Actual phone checkout The mobile condition is tested in the shopper session.
Desktop checkout The mobile-only banner remains hidden.
Resized editor preview Use it for layout inspection; it is not a substitute for an actual device-matching test.

If the result is different

Check What it means / what to do
Unexpected buyer sees content Review all/AND versus any/OR and the selected condition values.
Customer tag does not match Test with the intended logged-in customer; anonymous checkout may lack tag context.
Condition works on another page only Check the page’s supported inputs; Profile ignores cart/order conditions and Order status lacks selected shipping method.

Check page-specific data

Customer-tag conditions require logged-in customer context. Selected shipping method is unavailable on Order status. Days since order is available only on Thank you/Order status. On Profile, only Customer, Language, Market, and Time on page conditions are evaluated; cart/order conditions are ignored.

Need help?

Email support@rivioapps.com with your store domain, feature name, target page, the relevant settings, and a screenshot of the actual result. Include the test cart, customer, or order details needed to reproduce the issue.

Screenshot reference

Screenshot to add: The saved settings described in this guide, with its selected conditions or scope visible.

Screenshot to add: The worked example’s actual customer result or saved Shopify record, including the relevant test inputs.