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
  • Sliders Gap Setting in Group Slider Block
  • Sliders Gap Options
  • Options:
  • Steps to Adjust the Sliders Gap Setting
  • Summary

Was this helpful?

  1. Settings
  2. Slider Gap
  3. Sections / Blocks

Gap

Sliders Gap Setting in Group Slider Block

The "Sliders Gap" setting within the Group Slider block allows you to select the spacing between slider items, using the standardized gap options defined in your Brand Style settings. This setting provides flexibility in choosing the right amount of space between slides, ensuring a consistent and visually appealing layout across your store.

Sliders Gap Options

  • Purpose: This setting allows you to choose the spacing between the slides within your slider. The available options correspond to the standardized gap sizes set in your Brand Style settings, allowing for consistency across your store’s design.

  • Usage: Select the desired gap option to control the space between slider items, enhancing the overall visual balance and readability of your content.

Options:

  1. None:

    • Description: The None option removes any space between the slides, allowing them to appear directly next to each other. This setting is ideal for designs where you want a seamless flow between content items, without any visible gaps.

  2. Small:

    • Description: The Small option applies a minimal amount of space between the slides. This setting provides a slight separation between items, which can be useful for maintaining a clean and compact layout while still distinguishing individual slides.

  3. Medium:

    • Description: The Medium option provides a moderate amount of space between slides. This is a versatile option that offers a good balance between spacing and content density, making it suitable for most layouts where readability and visual clarity are important.

  4. Large:

    • Description: The Large option creates the most space between slides, giving each item more room to breathe. This setting is ideal for layouts where you want to emphasize separation between content items or create a more spacious and open feel.

Steps to Adjust the Sliders Gap Setting

  1. Select the Group Slider Block:

    • Open your Shopify theme editor.

    • Navigate to the specific section containing the Group Slider block.

  2. Locate the Sliders Gap Setting:

    • Within the Group Slider block settings, find the "Sliders Gap" option.

  3. Choose the Desired Gap Option:

    • Select one of the four available options—None, Small, Medium, or Large—to control the spacing between slider items.

    • Ensure that the selected gap aligns with the overall design and content presentation goals of your section.

  4. Preview Changes:

    • After selecting the gap option, preview your store to observe how the spacing affects the appearance of your slider.

    • Adjust the setting if necessary to achieve the desired visual effect.

Ensuring the Right Sliders Gap

  1. Preview Changes:

    • After adjusting the sliders gap setting, preview your store to see how the spacing between slider items affects the overall layout and user experience.

  2. Check Consistency:

    • Ensure that the selected gap is consistent with your brand’s design language and complements the content being displayed. The gap should contribute to a balanced and visually appealing presentation.

  3. Test Across Devices:

    • Verify that the sliders gap setting is responsive and maintains its intended effect across different screen sizes, ensuring a cohesive experience on both desktop and mobile devices.

Summary

By using the "Sliders Gap" setting in the Group Slider block, you can control the spacing between slider items using standardized gap sizes defined in your Brand Style settings. This feature allows you to create a visually consistent and appealing slider layout that enhances the overall user experience across all devices.

If you have any questions or need further assistance, please contact our customer support team.

Last updated 9 months ago

Was this helpful?