> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://revolution-slider.crisp.help/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Responsive & Mobile Optimization Guide for Slider Revolution 7 (Shopify Edition) Over **75% of Shopify store traffic** originates from smartphones and mobile devices. A banner that looks stunning on a 27-inch desktop monitor can easily feel cramped, unreadable, or slow on a phone screen if not properly optimized. This comprehensive guide teaches you how to tailor your **Slider Revolution 7 (SR7)** modules for smartphones and tablets. You will master the 4 device breakpoints, per-device typography scaling, hiding heavy layers on mobile, enabling touch swipe gestures, and using native Shopify theme responsive toggles. --- ### Key Mobile Optimization Goals * **Readability:** Headlines and product prices must be instantly legible without zooming. * **Conversion:** "Add to Cart" and "Buy Now" buttons must meet thumb-friendly tap target sizes (minimum 44px height). * **Speed:** Heavy background videos, floating particles, and dense text should be hidden on phones to ensure fast mobile page loading and strong Core Web Vitals. * **Layout Stability:** Text must wrap naturally rather than overflowing or overlapping adjacent layers. --- ## Part 1: The 4 Device Breakpoints in SR7 Slider Revolution 7 features a responsive viewport engine with 4 standard device breakpoints: | Device Viewport | Standard Width | Intended Devices | | ---- | | **🖥️ Desktop** | `1240px` (or custom) | Standard desktop monitors, iMacs, external displays | | **💻 Notebook** | `1024px` | Laptops, MacBooks (13" & 14"), iPad Pro in landscape | | **📱 Tablet** | `778px` | Standard iPad, iPad Mini, Android tablets in portrait | | **📲 Mobile** | `480px` | Modern smartphones (iPhone, Samsung Galaxy, Google Pixel) | ### How to Switch Between Devices in the Editor At the top center of the SR7 editor toolbar, locate the dimensions display (e.g., `1240px × 549px`). Clicking this area opens the **Device Switcher** dropdown: ![Top Bar Device Switcher & Breakpoints](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_vob3mb.png =900x337) > [!IMPORTANT] > **The Golden Rule of Per-Device Editing:** > When you select **Mobile (480px)** in the top bar, any changes you make to layer positions, margins, font sizes, or button padding apply **ONLY to Mobile**. Your Desktop and Notebook designs remain completely untouched! --- ## Part 2: Customizing Typography & Layer Layout for Mobile When shrinking from a 1240px desktop canvas down to a 480px mobile screen, desktop font sizes (e.g., 48px or 60px) will either clip off the edge or occupy the entire viewport. ### Step 1: Switch to Mobile View In the top bar, select **Mobile** from the device dropdown. The stage canvas will narrow to a smartphone screen width. ### Step 2: Adjust Headline Font Size 1. Click on your headline or title layer (e.g., `{{title}}` or your main promo headline). 2. In the right-hand sidebar under **Layer > TEXT**, reduce the font size to fit mobile screens: * **Desktop recommendation:** `36px` to `48px` * **Mobile recommendation:** `20px` to `26px` 3. Adjust line height accordingly (e.g., `1.2` or `1.3`) so multiline headlines have comfortable breathing room. ![Mobile Typography & Scaling Settings](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1hh9lho.png =900x388) ### Step 3: Enable "Line Wrap" Under the **POSITION & SIZE** section in the right sidebar: * Set **Line Wrap** to **ON (Auto)**. * Setting Line Wrap ensures longer product titles break cleanly onto 2 or 3 lines instead of running off the side of the screen. ### Step 4: Adjust Layer Offsets and Stacking * If elements overlap on mobile, click and drag them or adjust the **Y Offset** in the position panel. * If you are using Row and Column layouts, SR7 can automatically stack columns vertically on mobile so images sit neatly on top of text and buttons. --- ## Part 3: Hiding Clutter on Mobile via the Visibility Panel Mobile screens have limited visual real estate. Keeping every single decorative element, subtitle paragraph, and secondary badge from desktop creates visual clutter and slows down mobile rendering. Use the **Visibility Panel** to selectively hide secondary layers on mobile. ![Layer Visibility Panel Device Toggles](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_19q4azb.png =900x390) ### How to Hide a Layer on Mobile: 1. Select the layer on the canvas or in the **Layers** panel (e.g., a secondary description paragraph, background decorative shape, or floating sticker icon). 2. In the right-hand inspector panel, click the **Visibility** tab (eye icon). 3. Under the **Visibility Section**, you will see checkboxes for each device: * `[x] Wide Screen` * `[x] Desktop` * `[x] Notebook` * `[x] Tablet` * `[ ] Mobile` ← **Uncheck this box!** 4. The layer will instantly disappear on the mobile canvas, but will remain visible on Desktop, Notebook, and Tablet! > [!TIP] > **What to Keep vs. What to Hide on Mobile:** > * **KEEP on Mobile:** High-quality Product Image, Product Title, Price / Discount Badge, and Call-to-Action Button ("Add to Cart" / "Buy Now"). > * **HIDE on Mobile:** Long multi-sentence description excerpts, decorative particle add-ons, extra star rating review counts, and heavy animated graphics. --- ## Part 4: Touch Gestures & Thumb-Friendly CTA Sizing Mobile shoppers interact with their fingers, not a precision mouse cursor. A mobile-optimized slider must respond to touch and accommodate natural hand ergonomics. ![Mobile Storefront Preview & Touch Navigation](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/responsive05mobilestorefrontpr_ur9wz0.png =900x589) ### 1. Touch Swipe Acceleration Slider Revolution 7 features built-in hardware-accelerated touch swipe gestures. Shoppers on iPhones and Android devices can swipe left and right to glide through slides smoothly. * Under **Module Settings > Navigation**, confirm touch swipe navigation is enabled. ### 2. Thumb-Friendly Button Sizing (Minimum 44px) According to mobile usability standards (Apple Human Interface & Google Material guidelines), interactive buttons must be at least **44 × 44 pixels**: * In the **Layer > Style** panel for your CTA button, ensure vertical padding is at least `12px` to `16px`. * Set button text to at least `15px` or `16px` font size with bold weight so it is immediately legible and easy to press with one thumb while walking or multitasking. ### 3. Streamlining Arrows & Bullet Dots on Mobile * On narrow mobile screens, bulky left/right arrow buttons can cover product images and cause accidental clicks. * In **Navigation Settings**, you can hide arrow buttons on mobile viewports and rely on natural touch swipe gestures, or reduce arrow size to `24px` and position them outside the product image frame. --- ## Part 5: Shopify Theme App Block Responsive Controls In addition to editor-level settings, Slider Revolution 7 includes native responsive controls inside the **Shopify Theme Customizer**. When you add a **General Slider** or **Dynamic Product Slider** app block in your theme, check the settings panel on the left: ![Shopify Theme App Block Responsive Options](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_5f28mu.png =350x909) ### The Three Responsive Toggles: * **`[ ] Hide on desktop`**: Hides the entire slider section on screen widths greater than `1024px`. * **`[ ] Hide on tablet`**: Hides the slider section on tablet screens (`768px` to `1024px`). * **`[ ] Hide on mobile`**: Hides the slider section on smartphones (`< 768px`). --- ### 🚀 Power Strategy: The "Dual Slider" Technique Some high-volume Shopify stores want a rich, multi-layer video or 3D hero slider on desktop, but want a blazing-fast, lightweight 1-image banner on mobile. Instead of compromising, you can build two specialized sliders: 1. **Desktop Slider Module:** * Contains rich desktop animations, video backgrounds, and multi-column layouts. * In Shopify Theme Customizer, check: **`[x] Hide on mobile`**. 2. **Mobile Slider Module:** * A vertical 9:16 or square 1:1 layout tailored specifically for mobile phone screens. * In Shopify Theme Customizer, check: **`[x] Hide on desktop`**. With this setup, Shopify serves the ideal tailored layout to every visitor without writing a single line of custom CSS media queries! --- ## Part 6: Pre-Launch Mobile QA Checklist Before publishing your slider live, run through this 5-point quality assurance check: * [ **1.** ] **Test in Shopify Theme Customizer Mobile Preview:** Click the mobile phone icon in the top right of the Theme Customizer to preview live products and layout. * [ **2.** ] **Verify Tap Targets:** Ensure buttons are at least 44px tall and spaced far enough from links to avoid misclicks. * [ **3.** ] **Check Line Wrap:** Verify long product titles don't overflow past the screen boundary. * [ **4.** ] **Test Swipe Gestures on a Real Device:** Open your live storefront on an iPhone or Android phone to verify touch scrolling is smooth and responsive. * [ **5.** ] **Review Mobile Page Load Speed:** Check that large desktop image assets are optimized or replaced with smaller mobile graphics to keep your store loading under 2 seconds.