Customize Your BigCommerce Theme Using Shogun

Your BigCommerce theme sets the foundation for your online store’s design. With Shogun, you can enhance your storefront by building pages that layer seamlessly on top of your existing theme—without altering the theme files directly. This ensures flexibility, security, and a smooth workflow for merchants.

In this article, we’ll explore how to use Shogun to add custom pages to your BigCommerce theme, optimize your storefront, and manage multiple storefronts with ease. 

Here’s what we’ll cover:

• Adding to Your Theme Using the Shogun Visual Editor
• Optimizing Your Theme Pages with Shogun
• Customizing Multiple Themes/Storefronts

Adding to Your Theme Using the Shogun Visual Editor

Shogun’s Visual Editor integrates with BigCommerce to enable merchants to design and customize their storefronts—all without directly editing theme files. Shogun makes advanced page design accessible to both technical and non-technical users, offering flexibility, scalability, and integration with BigCommerce’s product data.

Let’s break down the key capabilities of Shogun’s Visual Editor and how each one enhances your storefront.

Design Flexibility

Creating Unique Page Layouts: Shogun’s grid-based drag-and-drop system allows you to place elements with pixel-perfect accuracy. This approach eliminates the need for custom CSS or manual coding, while still giving you complete creative control.

• Grid Layout for Precision: Arrange elements in structured grids to ensure visual consistency across your storefront.
• Structural Elements: Use containers, tabs, sliders, and accordions to create an intuitive user experience. 

For example:

• Containers: Group related content for cleaner layouts.
• Tabs: Display information in collapsible tabs for better organization.
• Sliders: Showcase multiple products or images in a compact space.

Content Elements: Populate your layouts with multimedia content, including:

• Images
• Videos
• Text blocks
• Call-to-action buttons

Custom-Coded Page Sections (Custom Elements): For merchants with more advanced design needs, Shogun supports Custom Elements. This feature allows developers to inject custom HTML, CSS, or JavaScript directly into Shogun-built pages.

Example:

• Embed interactive product carousels.
• Add custom pop-up forms for newsletter sign-ups.

Custom Elements provide the flexibility to implement advanced design features without disrupting the overall theme structure.

Dynamically Updating Content Sections (CMS Collections): Content that auto-updates is a game-changer for busy merchants. With CMS Collections, you can dynamically display content pulled from your BigCommerce product database.

Practical Applications:

• A “Featured Products” section that automatically updates weekly.
• A dynamic blog feed that pulls the latest posts.

This feature ensures your content remains fresh without requiring manual updates.

Designing for Multiple Screen Sizes: Mobile commerce is projected to account for over $710 billion in sales by 2025. Ensuring your BigCommerce storefront is responsive across all devices—desktop, tablet, and mobile—is not optional; it’s critical.

Shogun’s Visual Editor simplifies mobile responsiveness by allowing you to:

• Preview your pages across different devices directly in the editor.
• Adjust layouts specifically for mobile and tablet views without affecting the desktop design.
• Optimize text sizes, image scaling, and button placements for smaller screens.

Best Practice Tip: Ensure CTAs are large enough for mobile users to tap easily and key product details are immediately visible.

Scalability for Growing Brands

As your BigCommerce store grows, efficiency becomes crucial. Shogun’s Visual Editor offers scalable features to save time while maintaining design consistency across your storefront.

Reusable Templates

Reusable templates are a game-changer for brands managing multiple product categories, seasonal promotions, or recurring campaigns. Instead of recreating similar pages from scratch, Shogun allows you to save entire pages or sections as templates.

How to Save a Shogun Page as a Template

Once you’ve crafted the perfect page layout in Shogun that you’d like to reuse, follow these simple steps to save it as a template:

1. Open the Three-Dot Menu: In the top-right corner of the Shogun Visual Editor, click on the three-dot menu.
2. Select ‘Save Page’: Choose the ‘Save Page’ option from the dropdown menu.
3. Click ‘Save as Template’: Select ‘Save as Template’ to finalize your template creation.

4. Name Your Template: Give your template a clear, descriptive name so it’s easy to identify later.

5. Save and Reuse: Your template is now saved and can be accessed from your library for future pages.

How Reusable Templates Work:

• Create a fully designed product or landing page.
• Save the design as a template.
• Reuse the template across different pages or storefronts.
• Customize the template for unique products or campaigns without disrupting the original design.

Merchant Example: Merchants running seasonal campaigns can create a reusable landing page template for summer and winter collections. Instead of rebuilding the page each time, they can tweak the product listings and banners while keeping the structure intact.

Snippets and Global Snippets

Shogun allows you to save smaller design components as snippets. A snippet could be anything from a hero banner to a subscription form.

• Regular Snippets: Save individual sections for repeated use.
• Global Snippets: Make edits in one place, and those changes automatically reflect across all instances of the snippet.

Merchant Example: A beauty brand uses a global snippet for their promotional banner. When they update a discount code in one place, it instantly updates across all relevant pages.

How to Add a Global Snippet in Shogun

Global Snippets in Shogun let you create reusable content blocks that automatically update across every page they’re used on. Here’s how to add one:

Create a Snippet:

• Select a content section (e.g., hero banner, CTA).
• Click ‘Create Snippet’ from the inline menu or sidebar.
• Name your Snippet, toggle on “Make this snippet global” and click “create snippet.”

Edit and Update:

Why Scalability Matters for Growing E-commerce Brands

As your business scales, inefficiencies in design and workflow become expensive bottlenecks. Shogun addresses these pain points by offering:

• Reusable Templates for consistency and efficiency.
• Snippets and Global Snippets for streamlined updates.
• Multi-Storefront Compatibility for managing growth across markets.
• Seamless Product Data Integration for automated accuracy.
• Collaborative Tools to improve team efficiency.

These capabilities ensure that your store scales without compromising on design quality, user experience, or operational efficiency.

3. Access to Product Data for Designing

Shogun integrates directly with BigCommerce’s product data, enabling merchants to design dynamic, product-focused pages without manually inputting or updating details. This seamless integration bridges the gap between your store’s backend and the customer-facing design, ensuring accuracy and reducing repetitive tasks.

Dynamic Product Data Integration

Shogun pulls live data from your BigCommerce product catalog, allowing you to design pages that auto-populate with real-time product details such as:

• Product Name: Automatically updates when the product name changes in BigCommerce.
• Pricing and Discounts: Reflects current pricing, including sale discounts.
• Inventory Status: Shows live stock availability.
• Product Images: Pulls high-resolution images from your catalog.
• Product Variants: Displays available size, color, or style options.

Merchant Example: An apparel store launches a new line of products. With Shogun, they design a collection landing page. As products are added or updated in the BigCommerce catalog, details like price, availability, and images automatically reflect on the Shogun-built page—eliminating manual updates.

Optimizing Your Theme Pages with Shogun

Optimizing your BigCommerce theme isn’t just about aesthetics—it’s about driving better performance, increasing conversion rates, and delivering a personalized shopping experience that keeps customers coming back. Shogun equips merchants with a suite of personalization and A/B testing tools to fine-tune every element of their storefront.

Let’s explore how these tools can supercharge your BigCommerce store’s performance.

1. Personalized Experiences

Ecommerce personalization is no longer optional—it’s essential. Shoppers expect tailored experiences, and delivering on these expectations can significantly improve your store’s performance.

According to Adobe, 90% of ecommerce merchants report a positive ROI from personalization efforts, with 9% seeing returns of $20 or more for every dollar invested.

How Shogun Enables Personalization on BigCommerce

Shogun’s personalization tools allow you to create dynamic, segment-specific experiences tailored to individual customer needs. These segments can be defined based on:

• Geolocation: Show region-specific pricing, promotions, or product availability.
• Customer Behavior: Display content based on past purchases or browsing history.
• Language Preferences: Serve translated content to visitors from specific regions.
• Climate-Based Personalization: Tailor promotions to seasonal trends based on location.

Referral Source: Customize landing pages for traffic coming from social media, ads, or influencer campaigns.

Practical Examples:

1. Language-Specific Content: An apparel brand sets up a French version of their homepage specifically for visitors from France and Quebec.
2. Climate-Based Promotions: A global clothing retailer promotes winter coats to customers in Canada while showing summer apparel to visitors in Australia.
3. Influencer Campaigns: A beauty brand creates a landing page tailored to visitors clicking through an influencer’s Instagram post.

How to Create Personalized Experiences with Shogun:

1. Define your audience segment in Shogun (e.g., by location, behavior, or referral source).
2. Create a page variant for that segment.

3. Use Shogun’s Visual Editor to customize content, messaging, and design for the audience.

4. Publish the variant—Shogun will automatically display it to the targeted segment.

2. A/B Testing for Data-Driven Decisions

A/B testing takes the guesswork out of optimization. By comparing different page versions, you can identify which designs, headlines, or CTAs drive the best results.

What You Can Test with Shogun A/B Testing:

• Headlines: Test different headline styles or messaging to see which grabs attention.
• CTA Buttons: Experiment with button text, colors, and placement.
• Product Images: Determine if lifestyle shots outperform product-only images.
• Page Layouts: Compare different content structures to optimize user flow.

Merchant example:
A beauty brand runs an A/B test:

• Version A: CTA button reads “Add to Cart”
• Version B: CTA button reads “Get Yours Now”

After analyzing the results, they discover “Get Yours Now” increased click-through rates by 15%, leading to more sales.

How to Run an A/B Test in Shogun:

1. First, turn on A/B testing by clicking the A/B testing button in the Shogun Visual Editor.

2. Then, you need to give your A/B a name, choose the objective and select the variants you want to test.

3. Choose the specific elements you want to test (e.g., headlines, images, CTAs) on your variants.

4. Finally, select “Publish Variant” and define your traffic in order to publish your variants.

5. Identify the winning version and roll it out across your store.

Customizing Multiple Themes and Storefronts with Shogun

For merchants managing multiple storefronts on BigCommerce Multi-Storefront (MSF), Shogun offers seamless tools to design, optimize, and manage content across different stores—all from one central platform. Whether you’re targeting multiple regions, serving different customer segments, or running distinct brands under one account, Shogun simplifies the complexities of operating at scale.

Let’s break down how Shogun helps streamline multi-storefront content management with key features like Content Syncing, Storefront-Specific Variants, and Styling Control.

1. Multi-Storefront Compatibility: One Editor, Multiple Stores

BigCommerce’s Multi-Storefront (MSF) feature allows merchants to run multiple online stores from one BigCommerce account. Shogun integrates seamlessly with MSF, enabling you to:

• Build and manage individual storefronts from a single dashboard.
• Publish pages selectively to specific storefronts.
• Track storefront-specific performance analytics.

How it works:

1. In the Shogun Visual Editor, create or update your page design.

2. When publishing, choose which storefront(s) the changes should apply to using the storefront toggle feature.

3. Click Publish, and Shogun ensures your updates are applied accurately across selected storefronts. You can see which storefronts of each page is published by hovering your cursor over the status of your Shogun dashboard.

2. Content Syncing Across Storefronts

Managing multiple storefronts doesn’t mean duplicating effort. Shogun’s Content Syncing feature allows you to transfer content, layouts, and design elements between storefronts efficiently.

What You Can Sync:

• Pages: Easily duplicate high-performing landing pages across storefronts.
• Blog Articles: Share content marketing efforts between different regions.
• Product Pages: Ensure consistent product layouts across storefronts.
• Snippets and Custom Elements: Repurpose key design components.

How to Sync Content Between Storefronts:

• You can access the Sync feature from the Account dropdown in Shogun. Navigate to the Site Manager, where you’ll see a list of your connected stores. Simply select a page, choose your desired store, and Shogun will sync the content seamlessly between them.

Merchant Example:
An electronics retailer designs a product landing page for the US storefront. With Content Syncing, they duplicate the page for their Canadian storefront, adjusting only the pricing and promotions.