Viewport Breakpoints in Sirv Media Viewer: Achieving Perfect Design on Every Device
Shoppers jump from phone to desktop without missing a beat — your product gallery should too. Sirv’s viewport breakpoints put you in control, letting you craft a pixel-perfect, conversion-driven layout for every screen.
Here’s what you get:
- Pixel-perfect presentation: Ensure your products always look their best on any device. (Optimized layouts can jump mobile conversion rates by 30%!)
- Seamless transitions: Create a fluid experience as users switch between desktop and mobile.
- Truly custom layouts: Design galleries that work beautifully everywhere, from phones to 8K displays.
- Consistent branding: Keep your brand’s look and feel cohesive across every screen.
- Faster, SEO-friendly media: Automatically optimize your visuals for every device to improve load times and search rankings.
Sirv viewport breakpoints turn every screen into a perfectly curated storefront, ensuring your products shine and shoppers stay engaged.
What are Viewport Breakpoints?
Think of breakpoints as smart rules that automatically adjust your gallery based on screen size and/or device type. Want thumbnails on desktop but bullets on mobile? Easy. Need a grid layout for big screens but a slider for phones? Done. Just set your preferences for each device type, and Sirv handles the rest.
Viewport Breakpoints Demo
To get a better idea how all of this works – use the slider below to see how the content adapts to different screen sizes:
See the Pen Sirv Media Viewer Breakpoint demo by Sirv (@Sirv) on CodePen.
Notice that when you resize the viewport, the presentation changes drastically. To see more examples, check out the full-featured demo (it has way more cool stuff to play with and you can design your own breakpoints with ease).
Picking the Right Breakpoints
Choosing breakpoints doesn’t have to be complicated. While every website is unique, here’s a practical guide to the most common screen sizes and what works best for each:
Desktop (769px+)
The Amazon-style layout: thumbnails on the left and main product view on the right. Perfect for detailed product examination where users want to focus on one image at a time.
The grid layout with autoplaying 360° spins and videos lets the products showcase/sell themselves. Especially popular with fashion brands.
Don’t forget to incorporate interactive zoom and 360° views (which 91% of consumers crave) to build consumer trust.
Tablet (481px – 768px)
Use a carousel layout with clearly defined thumbnail previews to make navigation intuitive. This hybrid approach gives you the best of both worlds – engaging carousel experience with quick preview access.
Mobile (320px – 480px)
Go with the Amazon-popularized approach: clean, minimal bullet navigation that lets users quickly navigate between product visuals without visual clutter. A carousel layout works great too if you prefer more visual navigation.
Regardless of the layout, make sure to showcase a 360° spin or an AR-ready 3D model as the first item in the gallery – mobile users love interactive experiences. Leverage Sirv’s automatic media conversion to ensure optimized, crisp, and fast-loading media.
Let’s set up your breakpoints
Setting up breakpoints in SMV is straightforward. Here’s what you’ll need:
- Add Sirv.js to your project
- Set up your HTML with your media content
- Define your breakpoint rules
1. First, add Sirv.js
<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>
Sirv.js is required for Sirv Media Viewer and media optimization. Want to make your site load even faster? Check out our handy configuration tool to load only the modules you need.
2. Add your media
For paying Sirv customers, the easiest way is to use .view files – automatically generated gallery files that showcase all files in a specific folder. The code would look like this:
<div class="Sirv" data-src="https://demo.sirv.com/demo/p-6000.view" data-breakpoints="instanceBreakpoints"></div>
If you’d like to do things old-school, or if your media files aren’t organized in a single folder, you can reference each media file separately, like this:
<div class="Sirv" data-breakpoints="instanceBreakpoints"> <div data-src="https://demo.sirv.com/demo/snug/teal-b-throw.jpg" data-type="zoom"></div> <div data-src="https://demo.sirv.com/demo/snug/teal.spin"></div> <div data-src="https://demo.sirv.com/demo/snug/sofa-build.mp4"></div> <div data-src="https://demo.sirv.com/demo/snug/unpacked.jpg" data-type="zoom"></div> <div data-src="https://demo.sirv.com/demo/snug/teal-shadow.jpg" data-type="zoom"></div> <div data-src="https://demo.sirv.com/demo/snug/teal-b-cushions.jpg" data-type="zoom"></div> <div data-src="https://demo.sirv.com/demo/snug/sofa-detail-00.jpg" data-type="zoom"></div> <div data-src="https://demo.sirv.com/demo/snug/sofa-detail-01.jpg" data-type="zoom"></div> <div data-src="https://demo.sirv.com/demo/snug/sofa-detail-02.jpg" data-type="zoom"></div> <div data-src="https://demo.sirv.com/demo/snug/sofa-detail-03.jpg" data-type="zoom"></div> </div>
3. Define your breakpoint rules
For dead-simple breakpoint configuration, we’ve created a breakpoint generator app. You can create and tweak breakpoints with ease, and then copy the generated code to your site. Let’s dig into the generated code, break down each screen size and what happens:
- Desktop (769px+): Two-column grid with 40px spacing – powerful layout for showcasing lots of angles and details. Works well with 360 spins and videos.
- Tablet (481px – 768px): Switches to a slider layout with thumbnails at the bottom (eBay style) – great for tablets and smaller laptops.
- Mobile (under 480px): Simplifies to a mobile-friendly slider with bullet navigation placing the spotlight on the first gallery item.
Here’s the code that achieves that:
<script>
var instanceBreakpoints = [
{
match: {
width: 769
},
options: {
layout: {
type: "grid",
grid: {
columns: 2,
gap: 40
}
},
zoom: {
ratio: 0
},
video: {
background: true
}
}
},
{
match: {
width: 481
},
options: {
layout: {
type: "slider"
},
thumbnails: {
position: "bottom",
size: 70
}
}
},
{
match: {
width: 480
},
options: {
layout: {
type: "slider"
},
thumbnails: {
size: 40,
type: "bullets"
}
}
}
];
</script>
Each breakpoint has a match and options property. Match is what defines the activation of the breakpoint, and options are all of Sirv media Viewer options you’d like to apply to that particular breakpoint. This allows you to craft perfect experiences for your users.
The best part? SMV handles all transitions automatically. Your content will smoothly adapt as users resize their browser or switch devices. No extra code needed!
Create Unforgettable Shopping Experiences
Sirv Media Viewer is your all-in-one solution for delivering exceptional, device-tailored product presentations. With powerful breakpoint management, smart loading, and comprehensive support for every media type, Sirv empowers you to focus on creating engaging, conversion-driven experiences without having to worry about the technical details.
Discover how Sirv can skyrocket your conversions.
Get started today or reach out for a personalized demo!
