BigCommerce Store Design Best Practices for Better UX

Every element of your BigCommerce store matters: Is your store accessible to all users? Do your product pages guide visitors seamlessly toward checkout? Does your layout inspire trust and confidence at every click? These aren’t just design choices—they’re revenue-driving decisions.

We’ll break down the key best practices for BigCommerce store design, focusing on accessibility, conversion-driven layouts, and user experience optimization. Plus, we’ll show how tools like Shogun Insights empower you to build smarter, data-backed designs that don’t just look good—they perform.

In this article, you will learn:

1. Accessibility Best Practices
2. Conversion-Focused Design
3. User Experience Best Practices
4. How Shogun Helps with Best Practices

Accessibility Best Practices

Consider this: According to the US Census Bureau, nearly 1 in 7 Americans reported having some form of disability. That’s millions of potential customers who may face barriers when shopping online if your site isn’t designed with accessibility in mind.

An accessible website ensures that your top-of-funnel customer reach is maximized, giving every potential visitor the opportunity to become a paying customer.

When your website is difficult—or even impossible—to navigate for someone using assistive technology, you’re not just creating frustration—you’re leaving revenue on the table.

By prioritizing accessibility, you’re not only fostering inclusivity but also tapping into an underserved market segment, increasing customer loyalty, and enhancing your brand’s reputation.

In short, accessibility isn’t just the right thing to do—it’s also a smart business move.

BigCommerce themes have accessibility best practices built-in–so generally you’ll have your bases covered. If you want to be sure that the custom development work and pages that you’ve created are following best practices, here are some guidelines to follow:

1. Follow WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) offer a clear framework for building an accessible website. These guidelines focus on four essential principles:

• Perceivable: Ensure all visual and non-visual elements are accessible, including alt text for images and captions for videos.
• Operable: Make your site fully functional via keyboard navigation to accommodate users with motor impairments.
• Understandable: Use clear headings, logical navigation, and easy-to-read fonts to guide users smoothly through your store.
• Robust: Ensure your website’s code is compatible with assistive technologies like screen readers.

Following these principles not only makes your store more inclusive but also reduces the risk of legal challenges.

2. Choose Accessibility-Optimized Themes

Starting with a BigCommerce theme designed for accessibility gives you a strong foundation. For example, the Cornerstone theme—BigCommerce’s flagship theme—has been updated to meet WCAG 2.1 Level AA standards. This ensures essential features like contrast ratios, screen reader compatibility, and accessible navigation structures are built into the theme itself.

When selecting a theme:

• Look for those labeled “accessibility-ready.”
• Test demo versions with accessibility tools.
• Avoid themes with overly complex navigation or reliance on hover-based interactions.

3. Leverage Accessibility Tools and Apps

Accessibility tools can simplify the process of identifying and fixing compliance issues. Here are some widely trusted options:

• accessiBe: AI-powered accessibility tool that adjusts screen reader settings and ensures seamless keyboard navigation.
• All in One Accessibility: A widget offering screen reader support, voice navigation, and adjustable accessibility profiles.
• eSSENTIAL Accessibility: A full-service platform offering compliance audits, dashboards, and ongoing support.

These tools can handle much of the heavy lifting, ensuring your store meets accessibility standards without requiring deep technical expertise.

4. Conduct Regular Accessibility Audits

Accessibility isn’t a one-and-done task—it’s an ongoing commitment. Regular audits help you catch and fix new issues as your store evolves.

Tools for Accessibility Audits:

• WAVE (Web Accessibility Evaluation Tool): Highlights accessibility errors visually on your website.
• Lighthouse by Google: Offers automated reports on accessibility, performance, and SEO.

Additionally, include manual testing with assistive technologies like screen readers to ensure the user experience remains consistent across different devices and tools.

5. Provide Clear Communication and Support

• Sometimes, despite best efforts, users may encounter challenges. Ensure there are accessible ways for customers to:Contact support: Offer accessible communication channels like chatbots with text-to-speech capabilities. BigCommerce merchant King Arthur Baking has a customer support chat widget that is prominently displayed, offering immediate assistance. It reduces friction by allowing users to ask questions in real time, increasing trust and confidence.

• Find help resources: Provide FAQs and help documents in easy-to-read formats. BigCommerce merchant Bensons for Beds has a “Help & Advice” menu item with an extensive dropdown menu of different helpful information visitors may have.

Conversion-Focused Design for BigCommerce Stores

A beautiful website is great, but a conversion-focused design ensures your BigCommerce store does what matters most—drives sales. Every design choice, from the placement of your call-to-action (CTA) buttons to the layout of your product pages, should guide visitors seamlessly toward completing a purchase.

In this section, we’ll break down key best practices for designing a conversion-optimized BigCommerce storefront that not only looks appealing but also performs exceptionally.

1. Optimize Your Store’s Navigation

Your visitors shouldn’t have to guess where to click next. Clear, intuitive navigation is the backbone of a conversion-focused store.

• Simplify Your Menu: Keep it clean and focused on primary categories. Avoid overwhelming customers with too many options.
• Use Breadcrumbs: Help customers track their journey and easily return to previous pages.
• Prioritize Search Functionality: Implement a search bar with autocomplete to help users find products quickly.

BigCommerce Merchant Example: An excellent example of a BigCommerce store with optimized navigation is Kelty, an outdoor gear retailer.

Simplified Menu: Kelty’s website features a clean and focused primary navigation menu, categorizing products into intuitive sections like “Tents,” “Sleeping Bags,” and “Backpacks.” This streamlined approach prevents overwhelming customers with too many options, allowing them to find desired products effortlessly.

Breadcrumbs: While specific details about Kelty’s use of breadcrumbs aren’t provided in the available sources, implementing breadcrumbs is a best practice that helps users track their journey and easily return to previous pages, enhancing the overall navigation experience.

Prioritized Search Functionality: Kelty incorporates a prominent search bar at the top of their website, enabling users to quickly search for products. Enhancing this with autocomplete functionality can further assist users in finding products swiftly and efficiently.

By focusing on these navigation elements, Kelty ensures a user-friendly shopping experience, guiding visitors seamlessly through their product offerings and towards conversion.

2. Craft Clear and Compelling CTAs (Call-to-Actions)

Every CTA should guide the customer with precision, aligning with user intent at each stage of their journey.

• Placement Matters: Go beyond “above-the-fold” advice. Use behavior analytics tools like Hotjar or Microsoft Clarity to identify high-interaction areas and strategically place CTAs where users pause or hesitate.
• Tailored Language: Generic phrases like “Shop Now” won’t cut it. Use emotion-driven text (“Claim Your Discount”) and value-focused prompts (“Unlock Free Shipping”) to create urgency and clarity.
• Multi-Step CTAs: For complex products, break down actions into digestible steps. Example: “Customize Your Product” → “Save Design” → “Add to Cart”.
• Design for Focus: Ensure CTAs have strong visual hierarchy, contrasting colors, and ample whitespace. Hover animations can subtly guide attention without being intrusive.
• Contextual Integration: Don’t limit CTAs to product pages. Use them on 404 pages, empty cart notifications, and exit-intent pop-ups with compelling offers.

3. Optimize Product Pages for Conversions

Optimizing your product pages is crucial for driving conversions. Here are key elements to focus on:

High-Quality Images and Videos: Showcasing products from multiple angles and including zoom functionality can enhance user engagement. High-quality visuals can significantly impact purchasing decisions. Solo Stove, a BigCommerce merchant specializing in outdoor fire pits, utilizes high-resolution lifestyle images and videos to showcase their products in real-world settings. This aligns with findings that high-resolution product photos can achieve a 94% higher conversion rate compared to low-resolution images, emphasizing the importance of visual quality in driving sales.

Clear, Scannable Descriptions: Utilize bullet points to highlight key features and benefits, making it easier for customers to understand the product quickly. Concise and informative descriptions can improve user experience and SEO.

Social Proof: Incorporate customer reviews and ratings to build trust. Displaying product reviews can increase conversion rates, as potential buyers often rely on others’ experiences.

Stock and Scarcity Indicators: Implement messages like “Only 3 left in stock!” to create a sense of urgency, encouraging quicker purchasing decisions. Scarcity can drive demand and prompt immediate action.

4. Reduce Friction in the Checkout Process

A complicated checkout process is one of the biggest culprits behind cart abandonment. According to Baymard Institute, the average cart abandonment rate is nearly 70%. A streamlined checkout can drastically reduce this number.

Checkout Best Practices:

• Offer guest checkout options to reduce friction.
• Use a progress indicator to show customers how many steps remain.
• Provide multiple payment methods, including digital wallets like PayPal, Apple Pay, and Google Pay.
• Use trust signals, such as SSL certification badges and guarantees like “30-Day Free Returns.”

BigCommerce merchant example: BBWheels, a BigCommerce merchant specializing in wheels and tires, streamlined their checkout process by integrating flexible financing options, including Affirm and PayTomorrow.

Key Improvements:

• Added a “waterfall” financing approach to offer secondary financing if the first option was declined.
• Simplified the user journey by keeping the financing steps within the checkout flow.

Results:
This approach reduced cart abandonment and increased conversions by catering to a broader customer base with varying credit profiles.

5. Use A/B Testing to Refine Your Design

Experienced ecommerce marketers understand that A/B testing isn’t just about aesthetics—it’s about optimizing for conversions and user behavior. Shogun’s A/B Testing Feature is designed specifically for BigCommerce stores to test design variations without coding.

While testing button colors and checkout flow is valuable, merchants should explore these advanced testing opportunities to unlock deeper insights:

Personalized Experiences

• Test personalized recommendations (e.g., “Recently Viewed” vs “Recommended for You” sections).
• Evaluate the impact of location-based content, such as adjusting language, currency, or promotions.

Dynamic Pricing and Discounts

• Test the effectiveness of tiered discounts (“Buy 2, Get 10% Off” vs “Buy 3, Save 20%”).
• Compare flat discounts (“$10 Off”) with percentage-based ones (“10% Off”).

Search and Navigation Design

• Test auto-suggestions in search bars vs a manual keyword entry approach.
• Evaluate the placement and design of product filters (sidebars vs dropdown menus).

Mobile-Specific Elements

• Test sticky navigation menus or floating CTAs on mobile vs desktop-optimized designs.
• Experiment with collapsible content sections (e.g., FAQs, product specs) for mobile users.

Trust Signals and Messaging

• Test different trust badges (e.g., SSL certificates, secure payment logos) near CTAs or on checkout pages.
• Evaluate the effectiveness of guarantees (“Satisfaction Guaranteed” vs “Free Returns for 30 Days”).

Urgency and Scarcity Indicators

• Experiment with countdown timers (“Offer Ends in 2 Hours” vs no timer).
• Test messaging on low-stock alerts (“Only 3 left in stock!” vs “Limited Availability”).

Product Page Layouts

• Test product image galleries (carousel vs grid layout).
• Evaluate the placement of reviews (top of the page vs below product descriptions).

Social Proof Integration

• Test displaying customer reviews as quotes on landing pages vs star ratings only.
• Experiment with showing user-generated content (e.g., Instagram photos tagged with your products).

User Experience for BigCommerce Stores

User experience (UX) is about ensuring a smooth, intuitive, and enjoyable shopping journey that keeps customers engaged and encourages conversions. Here’s how to design for exceptional UX on your BigCommerce storefront:

Optimize for Speed and Performance

Speed is critical for ecommerce success. Slow-loading websites not only frustrate users but also lead to higher bounce rates and lost revenue. Research shows that a one-second delay in page load time can result in a 7% drop in conversions and an 11% decrease in page views. For an online store generating $50,000 in daily revenue, this translates to over $1 million in lost sales annually.

Best Practices to Improve Performance:

1. Keep Load Times Under 3 Seconds: Aim for a load time of 3 seconds or less to reduce bounce rates and keep users engaged.
2. Use BigCommerce’s Built-In Performance Features:

• Content Delivery Network (CDN): Ensures fast delivery of content by using servers closest to your customers.
• Image Optimization: Compresses images automatically without sacrificing quality to improve load times.

3. Leverage Third-Party Tools for Optimization:

• Google PageSpeed Insights: Analyzes your website’s speed and offers actionable recommendations.
• GTmetrix: Provides in-depth reports on your site’s performance and highlights specific areas to improve.
• Website Speedy: Specializes in optimizing ecommerce websites to address common speed-related issues.

2. Prioritize Mobile Responsiveness

Mobile commerce is rapidly becoming a dominant force in the ecommerce landscape. Recent data indicates that mobile devices account for approximately 60% of global ecommerce sales, highlighting the critical importance of mobile optimization for online retailers.

Best Practices for Mobile Optimization:

1. Responsive Design: Ensure your BigCommerce storefront adapts seamlessly to various screen sizes, providing an optimal viewing experience across all devices.
2. Simplified Navigation: Implement intuitive menus and clear calls-to-action to facilitate easy browsing on mobile devices.
3. Fast Loading Times: Optimize images and leverage BigCommerce’s performance tools to maintain quick load times, as mobile users often expect faster interactions.
4. Touch-Friendly Elements: Design buttons and interactive elements that are easily tappable, enhancing usability for touch interfaces.
5. Streamlined Checkout: Simplify the checkout process by minimizing form fields and offering mobile-friendly payment options like digital wallets.

3. Intuitive Navigation and Search Functionality

Effective navigation and search functionality are crucial for enhancing user experience and driving conversions on your ecommerce site. Implementing features like predictive search can significantly impact user engagement. For instance, autocomplete can boost sales and conversions by as much as 24%.

Best Practices for Navigation and Search

1. Simplify Navigation Menus:

• Focus on primary categories to avoid overwhelming users.
• Use clear, descriptive labels (e.g., Men’s Shoes, Home Decor) instead of generic terms.
• Group subcategories logically to improve findability.

Example: A store selling electronics might organize navigation into broad categories like Laptops, Smartphones, and Accessories, with subcategories such as Gaming Laptops or Wireless Chargers.

2. Use Filters to Narrow Search Results:

• Add filters such as price range, size, color, and brand to improve product discoverability.
• Allow users to combine multiple filters for more precise results.

Pro Tip: Ensure filters are mobile-friendly, with collapsible menus and touch-friendly elements.

3. Add Predictive Search with Autocomplete:

• Enable a predictive search bar that provides suggestions as users type.
• Highlight popular or trending searches directly in the search dropdown.
• Include images of suggested products to make results more visually appealing.

4. Personalize the Shopping Experience

In a crowded ecommerce landscape, personalization is no longer optional—it’s a must. Personalized product recommendations can significantly impact ecommerce revenue, driving increases between 5% and 15%.Additionally, personalization efforts can lead to 10% to 30% increases in marketing-spend efficiency. 

Shogun’s Personalized Experiences feature enables merchants to create tailored shopping journeys, such as displaying location-based promotions or personalized product recommendations, directly within BigCommerce.

Best Practices for Personalizing the Shopping Experience

1. Use Recently Viewed Items to Drive Engagement

• Display a “Recently Viewed” section on product or category pages to help customers quickly revisit items they’ve browsed.
• This feature reduces decision fatigue and encourages return visits to specific products.

2. Offer Location-Specific Promotions

• Tailor promotions based on the customer’s geographical location. For example: Show free shipping offers specific to their region or highlight seasonal products or campaigns relevant to their area (e.g., winter coats in colder regions).

3. Curate Product Recommendations

• Display recommendations based on browsing or purchase history, such as:

• “Customers who bought this also liked…” or “You may also like these items…”
• Use dynamic content to ensure these recommendations update in real time as user behavior changes.

How Shogun Helps with Best Practices

Shogun empowers merchants to ensure their BigCommerce stores follow industry-leading best practices through its Shogun Insights feature. This tool offers real-time and detailed audits to optimize web page performance, accessibility, functionality, and SEO.

Key Features of Shogun Insights

1. Performance Audits:

• Analyze page speed and responsiveness.
• Identify and fix issues like large image files or inefficient animations to enhance load times.
• Example: Use tools to optimize image resolutions dynamically based on the user’s screen size.

2. Accessibility Audits:

• Ensure compliance with accessibility standards by flagging issues such as insufficient color contrast or missing alt text for images.
• Highlight tap target sizes and font legibility to improve usability across devices.

3. Best Practices Audits:

• Check for adherence to ecommerce best practices like maintaining proper image aspect ratios and avoiding stretched visuals.
• Provide actionable recommendations to enhance the visual and functional quality of pages.

4. SEO Audits:

• Identify missing meta descriptions, broken links, and non-crawlable URLs.
• Suggest fixes to improve your page’s visibility in search engine results.

How to Use Shogun Insights

• Real-Time Feedback:
  As you design pages using Shogun’s visual editor, you’ll receive instant feedback on accessibility, performance, and SEO, allowing you to make corrections immediately.
• Detailed Audit Results: Run audits on specific pages to generate a comprehensive report of identified issues. Use actionable prompts to resolve issues directly within the editor.
• Re-Run Audits: After implementing changes, re-run audits to assess the impact of your updates and ensure ongoing optimization.

Merchant Example: Leveraging Insights for Performance Optimization

A BigCommerce merchant could use Shogun Insights to identify large image files slowing down a product page. By following recommendations to compress and resize images, they could reduce page load times, boosting user engagement and conversion rates.

Why Shogun Insights Matters

By combining real-time feedback with detailed reporting, Shogun Insights ensures your store aligns with best practices, providing a superior user experience while maximizing SEO and performance metrics. This feature empowers merchants to continuously refine their storefronts, driving both customer satisfaction and business growth.