ViewSwitch Plugin for Squarespace Website – Show Different Sections on Desktop & Mobile

Want to display one section on desktop and a different section on mobile in your Squarespace website? The ViewSwitch Plugin makes it incredibly easy. No complicated coding, no external apps, and no unnecessary setup—just copy, paste, and you're ready to go.

This plugin allows you to control the visibility of any Squarespace section based on screen size. Whether you're creating mobile-optimized layouts, custom landing pages, or device-specific content, ViewSwitch gives you complete flexibility.

🎥Watch the Full Video Tutorial

YouTube Video:
https://youtu.be/Rerb-2AM624

In this tutorial, you'll learn:

How the ViewSwitch Plugin works
How to find your Squarespace Section ID
How to generate the custom CSS
How to change the breakpoint
How to show different content on desktop and mobile
Best practices for responsive website design

What is the ViewSwitch Plugin?

The ViewSwitch Plugin is a lightweight code generator that lets you:

Show one section only on Desktop
Show another section only on Mobile
Customize the screen width breakpoint
Generate clean CSS instantly
Copy and paste the generated code directly into Squarespace

No JavaScript required.

No third-party app.

No plugin installation.

Features

✅ Show different content on Desktop & Mobile

✅ Custom responsive breakpoint

✅ Simple copy & paste setup

✅ No coding knowledge required

✅ Works with Squarespace 7.1

✅ Lightweight CSS only

✅ Fast loading

✅ Beginner-friendly interface

✅ No external dependencies

Why Use ViewSwitch?

Sometimes a layout looks perfect on desktop but not on mobile.

Instead of creating complicated workarounds, you can simply create two different sections and let the plugin automatically display the correct one based on the visitor's screen size.

Perfect for:

Hero Sections
Banners
Product Highlights
Promotional Offers
Contact Sections
Image Galleries
Testimonials
Call-to-Action Sections
Landing Pages
Event Announcements

How It Works

The process is very simple.

Step 1

Copy the Desktop Section ID.

Step 2

Copy the Mobile Section ID.

Step 3

Choose your responsive breakpoint.

Step 4

Generate the CSS.

Step 5

Paste the generated code into:

Website → Design → Custom CSS

Done!

Compatible Platforms

Although designed specifically for Squarespace 7.1, similar responsive design concepts can also be applied to:

Squarespace
WordPress
Shopify
Wix
Weebly
Framer

Why Choose This Plugin?

Unlike many complicated responsive solutions, ViewSwitch focuses on simplicity.

✔ No coding experience needed

✔ No plugins to install

✔ Instant code generation

✔ Lightweight performance

✔ Mobile-friendly

✔ Easy to customize

✔ Perfect for designers and developers

Who Should Use It?

This plugin is ideal for:

Squarespace Designers
Web Developers
Freelancers
Digital Agencies
Business Owners
E-commerce Stores
Portfolio Websites
Landing Page Creators
Marketing Professionals

Need Help?

If you'd like help installing or customizing the ViewSwitch Plugin for your website, feel free to contact me through Fiverr.

Contact Me

https://fiverr.com/s/xXv72oD

https://fiverr.com/s/m5pNj1b

https://fiverr.com/s/DB8xN3V

https://fiverr.com/s/pdDNqZN

About Asmot Academy

Asmot Academy is dedicated to creating professional website solutions, custom Squarespace plugins, and easy-to-follow tutorials. We help designers, freelancers, and business owners build beautiful, functional websites with practical tools and expert guidance.

Subscribe to our YouTube channel for more tutorials, plugins, and website design tips.