AppSections
Download AppSectionsWebsite
  • HOME
  • GETTING STARTED
    • Get Started Here
    • Installation
    • Themes Compatibility
  • IN-APP
    • Application Overview
    • Library
      • Sections Library
      • Templates Library (Coming Soon)
      • Brand Styles Library
      • Wishlist
      • My Library
        • My Sections
        • My Templates (Coming Soon)
        • My Brand Styles
    • Switching Shopify Themes
    • Switching Pricing Plans
    • Uninstallation
  • Basics
    • Layers
    • Styles
      • Add Brand Style
      • Duplicate Brand Style
      • Hide Brand Style
      • Move Brand Style
      • Remove Brand Style
    • Templates (Coming Soon)
      • Add Template (Coming Soon)
      • Duplicate Template (Coming Soon)
      • Hide Template (Coming Soon)
      • Move Template (Coming Soon)
      • Remove Template (Coming Soon)
    • Sections
      • Add Section
      • Duplicate Section
      • Hide Section
      • Move Section
      • Remove Section
    • Groups
      • Add Group Block
      • Duplicate Group Block
      • Hide Group Block
      • Move Group Block
      • Remove Group Block
    • Blocks
      • Add Content Block
      • Duplicate Content Block
      • Hide Content Block
      • Move Content Block
      • Remove Content Block
  • Settings
    • Layout
      • Sections / Blocks
        • Column Widths Repartition
        • Display Device
    • Content
      • Sections / Blocks
        • Button Content
          • Button Layout
          • Button Style
          • Content
          • Custom Icon
          • Icon Button Presets
          • New Tab
          • URL
        • Color Content
          • Background Fill
          • Pattern Presets
          • Pattern Scale
          • Swap Color Order
        • Headline Content
          • Content
          • Select the Headline Font
        • Image Cover Content
          • Brightness
          • Select Image
        • Image Parallax
          • Brightness
          • Direction X
          • Direction Y
          • Distance
          • Movement
          • Select Image
        • Text Content
          • Content
          • Select the Text Font
        • Video Content
          • Brightness
          • Controls
          • Select Poster
          • Select Video
          • Style
        • YouTube Content
          • Autoplay ?
          • Brightness
          • Select Video
    • Slider
      • Styles
        • Effect
        • Position
        • Infinite Loop ?
        • Autoplay ?
        • Autoplay Delay
        • Pagination
        • Navigation ?
        • Pagination ?
      • Sections / Blocks
        • Type
        • Custom (Coming Soon)
        • Direction
        • Slide Number
    • Colors
      • Styles
        • Primary Color Schema
        • Secondary Color Schema
        • Tertiary Color Schema
        • Neutral Color Schema
      • Sections / Blocks
        • Alpha
        • Color Schema
        • Color Schema Hover
        • Lightness
    • Typographies
      • Styles
        • Body
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • Button
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • External Custom Fonts
        • Heading
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • Overwrite current font
    • Font Scales
      • Styles
        • Body
          • Font Size
          • Letter Spacing
          • Line Height
        • Button
          • Font Size
          • Letter Spacing
          • Line Height
        • Heading
          • Font Size
          • Letter Spacing
          • Line Height
    • Texts
      • Styles
        • Link
          • Custom Underline Thickness
          • Underline Skip Ink
          • Underline Style
          • Underline Thickness
        • Text Case
        • Underline
          • Underline Skip Ink
          • Underline Style
          • Underline Thickness
          • Custom Underline Thickness
    • Icons
      • Styles
        • Icon
        • Icon Custom
    • Design / Shapes
      • Styles
        • Border Width
        • Custom Shape
        • Shape Accentuation
        • Shape Preset
        • Shape Standard Direction
      • Sections / Blocks
        • Design Direction
        • Select Shape
    • Size
      • Styles
        • Button Size
          • Min-Width
        • Sections Width
      • Sections / Blocks
        • Button Size
        • Button Width
        • Full Height
        • Min Height
        • Width
    • Margin
      • Styles
        • Margin Top/Bottom
      • Sections / Blocks
        • Extra Margin Bottom
        • Extra Margin Top
    • Padding
      • Styles
        • Padding Right/Left
      • Sections / Blocks
        • Horizontal Padding
        • Vertical Padding
    • Positionning
      • Styles
        • Buttons Positionning
          • Horizontal Alignment
          • Horizontal Padding
          • Text Align
          • Vertical Alignment
          • Vertical Padding
      • Sections / Blocks
        • Horizontal Alignment
        • Position
        • Text Align
        • Vertical Alignment
        • Z Index
    • Gap
      • Styles
        • Horizontal Gap
        • Vertical Gap
      • Sections / Blocks
        • Gap
    • Slider Gap
      • Styles
        • Gap
      • Sections / Blocks
        • Gap
    • Transform
      • Sections / Blocks
        • Perspective
        • Rotate X
        • Rotate Y
        • Rotate Z
    • Media Adjustment
      • Sections / Blocks
        • Horizontal Adjustment
        • Media Zoom
        • Vertical Adjustment
    • Shadows
      • Styles
        • Alpha
        • Blur
        • X
        • Y
      • Sections / Blocks
        • Shadow
    • Children Alignment
      • Sections / Blocks
        • Align
        • Direction
        • Distribute
        • Relative Behavior
    • Sticky
      • Sections / Blocks
        • Sticky Behavior
        • Sticky Position
    • Animations
      • Styles
        • Appear Animation
          • Amplitude
          • Delay
          • Duration
          • Once?
          • Opacity Start
          • Timing Function
        • Hover Color Animation
          • Animation Duration
          • Hover Primary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Secondary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Tertiary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Neutral Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
        • Triggered Animations
          • Amplitude
          • Duration
          • Infinite?
          • Preset & Variant
          • Timing Function
          • Trigger
      • Sections / Blocks
        • Appear Animation
        • Appear Animation Direction
        • Triggered Animation
    • Code Overrides
      • Sections / Blocks
        • Code Overrides / Custom CSS
    • Extra Style
      • Styles
        • Custom Cursor
          • Activate Custom Cursor
          • Icon Custom Cursor
          • Icon Custom Cursor on Click
          • Cursor Background
          • Cursor Size
        • Custom Scrollbar
          • Activate Custom Scrollbar
          • Scrollbar Color
          • Scrollbar Background
          • Scrollbar Width
  • Resources
    • Helpful resources
    • Privacy Policy
    • Changelog
    • Affiliate Program
    • AppSections Shopify Apps
    • AppSections Website
    • BlockLoads Website
    • AppSections Instagram
    • BlockLoads YouTube
    • BlockLoads Threads
    • BlockLoads X (Twitter)
    • AppSections Pinterest
    • AppSections Facebook
    • AppSections Linkedin
    • BlockLoads Linkedin
    • AppSections Tiktok
Powered by GitBook
On this page
  • Understanding Display Device Settings in Sections and Blocks
  • Display Device Options
  • Applying Display Device Settings to Sections and Blocks
  • Ensuring Optimal User Experience

Was this helpful?

  1. Settings
  2. Layout
  3. Sections / Blocks

Display Device

Understanding Display Device Settings in Sections and Blocks

The Display Device setting in AppSections allows you to control the visibility of sections and blocks on different devices. This setting ensures that your Shopify store provides an optimized user experience across various devices. Here is an explanation of the different options available in the Display Device setting:

Display Device Options

  1. All:

    • Purpose: The section or block is visible on all devices.

    • Usage: Use this setting when you want the section or block to be accessible and visible regardless of the device type, ensuring consistent user experience across all platforms.

  2. Mobile Only:

    • Purpose: The section or block is visible only on mobile devices.

    • Usage: Select this option when the section or block is specifically designed for or only needed on mobile devices. This is useful for mobile-specific features or content.

  3. Desktop Only:

    • Purpose: The section or block is visible only on desktop devices.

    • Usage: Choose this setting when the section or block is relevant only for desktop users. This can be used for elements that require a larger screen or are part of a desktop-specific design.

  4. None:

    • Purpose: The section or block is hidden on all devices.

    • Usage: Use this option to completely hide the section or block from all devices. This is useful for temporarily disabling elements without deleting them or for elements that are no longer needed.

Applying Display Device Settings to Sections and Blocks

  1. Select the Section or Block:

    • Open your Shopify theme editor.

    • Navigate to the section or block you want to adjust.

    • Select the section or block by clicking on it.

  2. Open Settings:

    • In the right-hand pane, navigate to the settings of the selected section or block.

    • Locate the Display Device parameter.

  3. Choose Display Device Option:

    • Select one of the four options (All, Mobile Only, Desktop Only, None) based on where you want the section or block to be visible.

Ensuring Optimal User Experience

  1. Preview Changes:

    • After adjusting the Display Device setting, preview your store on different devices (mobile and desktop) to ensure the sections and blocks are displayed as intended.

    • Verify that the visibility settings enhance the user experience without causing layout issues.

  2. Consistent Design:

    • Use the Display Device settings strategically to maintain a consistent and optimized design across different devices, ensuring that your store looks professional and functions well on all platforms.

By understanding and correctly applying these Display Device options to sections and blocks, you can tailor your Shopify store's content to different devices, providing an optimized user experience for all visitors. If you have any questions or need further assistance, please contact our customer support team.

Last updated 9 months ago

Was this helpful?