Native Device Visibilty

Overview

The Native Device Visibility feature allows you to control which sections of your Shopify store appear on different mobile platforms. This provides the flexibility to create platform-specific experiences for your iOS and Android users.

Accessing Native Device Visibility Settings

Step 1: Navigate to Theme Customization

1. Log in to your Shopify admin panel

2. Go to Online Store > Themes

3. Click Customize next to your current theme

Step 2: Access App Embeds Section

1. In the theme editor, locate and click on the App Embeds section

2. Find and enable the Native Device Visibility block

Understanding CSS Classes for Device Visibility

The Native Device Visibility feature uses specific CSS classes to control section visibility across different platforms:

Available CSS Classes

• ios_wrapper: Makes a section visible only on iOS devices

• android_wrapper: Makes a section visible only on Android devices

• ios_wrapper android_wrapper: Makes a section visible on both iOS and Android devices

• No class applied: Section will be visible on all devices (default behavior)

Implementing Device-Specific Visibility

For Theme Sections

To control the visibility of theme sections:

1. In the theme editor, select the section you want to modify

2. Add the appropriate CSS class(es) to the section's custom class field:

   • Add ios_wrapper for iOS-only visibility

   • Add android_wrapper for Android-only visibility

   • Add both ios_wrapper android_wrapper to ensure visibility on mobile apps only

   • Leave empty for visibility across all platforms

Note: If any native classes such as ios_wrapper or android_wrapper are detected, the section will be hidden on the web/desktop mode.

For Custom HTML Elements

If you're working with custom HTML within your theme:

<!-- iOS-only content -->
<div class="ios_wrapper">
  <p>This content will only be visible on iOS devices</p>
</div>

<!-- Android-only content -->
<div class="android_wrapper">
  <p>This content will only be visible on Android devices</p>
</div>

<!-- Mobile app-only content (both iOS and Android) -->
<div class="ios_wrapper android_wrapper">
  <p>This content will be visible on both iOS and Android devices</p>
</div>

<!-- Content visible everywhere -->
<div>
  <p>This content will be visible on all devices</p>
</div>

Use Cases for Device-Specific Visibility

Platform-Specific Features

• Display iOS-specific payment options only to Apple users

• Show Android-specific navigation instructions only to Android users

Optimized User Experience

• Create different layouts optimized for each platform's design guidelines

• Display different promotional content based on platform-specific user behaviors

Technical Compatibility

• Hide features that may not work properly on specific platforms

• Display alternative options when platform limitations exist

Testing Device Visibility

To verify your device visibility settings:

1. Preview your store on different devices or use device simulators

2. Check that content appears only on the intended platforms

3. Ensure the user experience remains cohesive regardless of platform

Best Practices for Device Visibility

1. Use Sparingly: Only create platform-specific content when necessary for functionality or user experience

2. Maintain Consistency: Ensure your brand message remains consistent across all platforms

3. Test Thoroughly: Verify visibility settings on actual devices when possible

4. Plan for Updates: Document which sections have platform-specific visibility for easier maintenance

By effectively implementing Native Device Visibility, you can create tailored experiences that take advantage of platform-specific features while maintaining a consistent brand presence across all devices.