> For the complete documentation index, see [llms.txt](https://docs.webtonative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webtonative.com/shopify/native-device-visibilty.md).

# 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

<figure><img src="/files/aqlRsP1ZFkbDncAlF2RC" alt="" width="305"><figcaption></figcaption></figure>

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:

```html
<!-- 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.