Learn how to craft precision mobile experiences on BigCommerce with Shogun
the author
Angela Sokolovska
Ecommerce expert
share this post
With mobile commerce rapidly on the rise, making sure your pages are designed for for mobile devices has become a necessity rather than an option. Over 56% of online sales came from mobile in 2024. And if that number isn’t high enough, at least 79% of consumers have made a purchase from their mobile device in the last 6 months.
Shogun enables BigCommerce merchants to create mobile-responsive, customizable pages that offer a smooth and differentiated shopping experience for mobile users.
Create mobile-friendly pages with ShogunShogun’s visual editor enables merchants to design unique, optimized mobile versions of their pages on BigCommerce.Get started now
Using Screen Settings to Edit Mobile Designs
One of the standout features of Shogun for BigCommerce users is the ability to customize how elements display across various screen sizes. The screen settings tool allows you to hide or display different content depending on whether the user is on a mobile, tablet, or desktop device.
Why Screen Settings Matter for Mobile Customization When browsing on mobile, users expect a streamlined experience, free from clutter. Often, what looks great on a desktop can feel overwhelming on a smaller screen. By utilizing Shogun’s screen settings, you can adjust the visibility of content on mobile without affecting your desktop design.
For example, you can choose to hide large images or banner videos that may slow down mobile load times, ensuring that your mobile visitors only see the most essential elements. You can also tweak typography, spacing, and image sizes to make sure the content is readable and appealing on smaller screens.
How to Customize Using Screen Settings Inside the Shogun visual editor, click on any content block and open the screen settings tab. From here, you can decide which screen sizes (desktop, tablet, or mobile) the content should appear on. Additionally, the feature allows you to modify the style of certain elements for mobile—adjusting font size, changing padding, and resizing images to create a more optimized and visually appealing layout for mobile shoppers.
Follow these steps to access screen settings:
Log in to Shogun: Access your Shogun account through your BigCommerce dashboard.
Open the Page Editor: Select the page you want to customize from the list of your existing pages.
Access Screen Settings: In the editor, look for the Screen Settings option, usually found in the sidebar.
Choose Screen Size: Select the mobile icon to adjust settings specifically for mobile devices.
Edit Elements: Modify visibility and styles for various elements based on the selected screen size.
This flexibility means you can create highly personalized experiences for mobile users without the need for additional coding. Learn more about screen settings in Shogun here.
Centering Content in a Responsive-Friendly Way
Centering content properly is crucial to maintaining a professional look on mobile devices. If your images, text, and buttons aren’t aligned properly, it can make the page feel chaotic and difficult to navigate—something that can frustrate mobile shoppers and lead to higher bounce rates.
The Importance of Responsive Design for BigCommerce Mobile Sites Responsive design is all about making sure that your content scales and adapts smoothly across all devices. Shogun makes it easy to ensure that your mobile visitors have the same seamless experience as your desktop users. Proper alignment plays a major role in this.
Let’s say you have a “Buy Now” button that’s left-aligned on desktop but needs to be centered on mobile for aesthetic and practical reasons. Misaligned buttons, text, or images can disrupt the shopping flow, negatively impacting the user experience.
How to Center Responsively in Shogun Using the visual editor, select the content you want to center and access the alignment settings. Shogun allows you to center content both vertically and horizontally, making it easy to adapt to smaller screen sizes without disrupting your layout. Whether you’re working with images, text blocks, or call-to-action buttons, Shogun ensures they’re centered perfectly for mobile viewing.
Follow these steps to center content:
Open the Page Editor: Navigate to the page you want to edit.
Select the Element: Click on the content element you wish to center (text, images, etc.).
Alignment Options: In the properties panel, find the alignment options and choose Center.
Adjust Padding: Fine-tune the padding to ensure it looks balanced on mobile.
Responsive design not only improves aesthetics but also makes navigation simpler, ultimately leading to better conversions. Learn more about centering content responsively in Shogun here.
Previewing The Mobile Version Before Publishing
Before pushing your updates live on BigCommerce, it’s important to preview how your site looks on mobile devices. Given that the majority of online shoppers are using mobile phones, any issues or inconsistencies in your mobile layout could result in lost sales.
Why Mobile Previews are Crucial Just because a page looks perfect on your desktop screen doesn’t mean it will appear the same on a mobile device. Previewing your store in mobile view lets you catch design issues early, ensuring that your layout is functional and visually pleasing across different devices.
For example, images might appear too large, text could be misaligned, or buttons may overlap other elements. These issues, if left unchecked, could confuse visitors and cause them to leave your store before making a purchase. This is especially true for ecommerce sites that cater to international shoppers across multiple devices.
How to Preview Mobile Pages in Shogun Shogun’s visual editor makes it easy to toggle between different screen previews. You can switch to mobile mode and view exactly how your page will look before you hit the publish button. This feature is particularly useful when designing sales pages or landing pages, where every detail counts.
Follow these steps to preview before publishing:
Navigate to the Page Editor: Go to the specific page in Shogun.
Preview Option: Click on the Preview button, usually located in the upper right corner of the editor.
Select Mobile View: Toggle the view to the mobile format to see how the page will look on smaller screens.
Review and Adjust: Examine the mobile preview and make any necessary adjustments to elements that may not appear correctly or are difficult to interact with on mobile devices.
Taking the time to preview your pages ensures that everything from product images to call-to-action buttons works as intended for mobile users, giving them the best possible experience.
Create mobile-friendly pages with ShogunShogun’s visual editor enables merchants to design unique, optimized mobile versions of their pages on BigCommerce.Get started now
Audit Your Pages with Insights for Mobile Optimization
Mobile performance isn’t just about how your site looks—it’s also about how fast it loads and how easy it is to navigate. Shogun’s Insights feature allows you to audit your BigCommerce store’s mobile pages for optimization opportunities, ensuring your mobile visitors don’t encounter slow load times or broken elements.
Why Page Speed and Optimization Matter The speed of your pages plays a vital role in both user experience and search engine optimization. According to Google, over 50% of users will abandon a mobile page that takes longer than three seconds to load. This is particularly important for ecommerce stores, where every second of delay can mean losing potential sales
By running an audit with Shogun’s Insights tool, you can pinpoint elements that may be slowing down your site, such as oversized images, too many scripts, or poor coding practices. Optimizing these elements for mobile not only improves user experience but also boosts your BigCommerce store’s search engine rankings.
How to Use Insights for Mobile Optimization Shogun’s Insights tool provides detailed reports on the performance of your mobile pages, including suggestions on how to improve speed and overall usability. For instance, you might discover that compressing images can make a significant difference in load time. These recommendations help ensure that your BigCommerce mobile site is fast and responsive.
Follow these steps to audit your pages:
Access the Insights Dashboard: From your Shogun account, navigate to the Insights section.
Select a Page to Audit: Choose the specific page you want to analyze for mobile optimization.
View Performance Metrics: Review key performance indicators such as load time, bounce rate, and conversion metrics specific to mobile users.
Identify Optimization Opportunities: Look for recommendations and insights provided by Shogun to improve mobile performance, such as image size adjustments or content layout changes.
Implement Changes: Based on the insights gathered, go back to the page editor and make necessary adjustments to optimize the page for mobile visitors.
Best Practices for BigCommerce Mobile Customization
Beyond using Shogun’s built-in tools, there are several best practices to keep in mind when customizing your BigCommerce mobile store. These tips ensure that your mobile pages not only look good but also function smoothly, encouraging users to make purchases.
Optimize Images for Mobile
Compress images: High-resolution images are necessary for desktop but can slow down your mobile site. Compressing images without sacrificing quality ensures faster load times, improving user experience. Use tools like TinyPNG or ImageOptim to reduce file sizes.
Use responsive images: Implement responsive image techniques in your site’s code so mobile visitors see appropriately sized images. Small images significantly reduce page load time.
Speed matters: Optimized images help keep your mobile site within that crucial timeframe of loading under 3 seconds.
Use Touch-Friendly Buttons
Size and spacing: Mobile buttons should be large enough to tap without causing frustration, ideally 44×44 pixels or larger. Proper spacing between buttons helps avoid misclicks, improving overall navigation.
Highlight important buttons: Make sure that your most important buttons (e.g., “Add to Cart”) stand out with contrasting colors. Prioritize these buttons for easy visibility and usability on small screens.
Test on real devices: Always test button functionality and placement on real mobile devices to ensure a smooth, responsive user experience.
Streamline Navigation
Simplify menus: Use a hamburger menu (three horizontal lines) to hide navigation options and reduce visual clutter. This helps users to focus on products and content better without feeling overwhelmed.
Limit menu items: Only include essential links in your mobile navigation to avoid overwhelming users. Prioritize links that guide customers to products, categories, or key sections of your site.
Include search functionality: Place a search bar at the top of your mobile pages, making it easy for users to find specific products quickly. An easily accessible search bar helps improve user engagement and reduce frustration.
Prioritize Essential Content
Lead with the most important information: Mobile screens have limited space, so place essential content like promotions, best-sellers, and calls-to-action (CTAs) above the fold to grab attention immediately.
Declutter pages: Follow mobile-first design principles, which focus on simplifying the user interface. Keep the content minimalistic and relevant, ensuring users aren’t overwhelmed with excessive information.
Use concise CTAs: Make sure CTAs are short, clear, and actionable, helping guide users toward desired actions like making a purchase or signing up for a newsletter.
Create mobile-friendly pages with ShogunShogun’s visual editor enables merchants to design unique, optimized mobile versions of their pages on BigCommerce.Get started now