# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webtonative.com/shopify/native-device-visibilty.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.