BigCommerce Customization: A Step-by-Step Guide For Beginners

Unlock the full potential of your online store with BigCommerce customization. Tailor your website to fit your unique brand identity and meet the specific needs of your customers. This guide offers a straightforward approach to BigCommerce customization for beginners. It aims to simplify the process of personalizing your online store, covering everything from basic tweaks to advanced modifications. With practical steps and essential tips, this article will help you learn how to improve your site's functionality and user experience on the BigCommerce platform.

No-code BigCommerce Customization Options

No-code customization options in BigCommerce empower users to personalize their online stores without delving into complex coding. Here's a breakdown of these user-friendly customization features: 

Drag-and-drop Page Builder

• Go to your BigCommerce admin panel and navigate to Storefront > Themes > Customize to launch the Page Builder. This tool allows you to visually design your store's pages without coding knowledge.

• Alternatively, directly open products, categories, and brands using the Action icon and selecting "View in Page Builder."

• When viewing your storefront while logged into the control panel, you'll notice an admin bar at the top of the screen. You can use this bar to design the current page in Page Builder.

• In the Page Builder sidebar, you'll find all the widgets available. These widgets include images, carousels, videos, products, text, and custom HTML.

• For tablet and mobile views, click the icon again to switch between vertical and horizontal orientation. Click "Preview" to collapse the navigation on the left, allowing you to see how your changes will look at full-screen width.

While in Preview mode, you can navigate your site just as you would on the storefront. This helps visualize how your style changes will appear on specific pages.

• As you make changes, use the buttons in the top right corner to apply them to your store immediately or save them for later: 

"Save" saves your current changes.

"Publish" publishes the saved changes to your live storefront. If you're customizing an Inactive Theme, this action will make it the Active Theme.

"Apply Update" appears when you click "Customize Update" to preview updates to an active theme. Click this button to apply the update.

"Use as Active Theme" appears when editing an inactive theme before launching the store. Click this button to make it the active theme and publish your changes. 

Edit theme file 

For more advanced users with basic HTML and CSS knowledge, BigCommerce offers the ability to edit theme files, though JavaScript (JS) customization requires the installation of the Stencil CLI theme engine.

• Before making any changes, create a backup of your theme. Click on "Advanced" > "Make a Copy" to create a backup that will appear as an inactive theme under "My Themes."

• Once the backup is ready, choose the copied theme, on the “Theme option” click "Edit Theme Files" to customize your theme.

• A new window will open, displaying the structure of your homepage by default (home.html).

In the left sidebar, you'll find folders and files, with JSON and JS files appearing gray, indicating they're editable only via the Stencil CLI theme engine. Explore the "assets" folder to learn key customization resources, including fonts, icons, images, JS files, and CSS. The most important file, "theme.scss" located in "assets > scss > theme.scss," serves as the primary CSS file, allowing you to adjust elements like size and color beyond what the Page Builder offers.

Digging further into the "templates" folder reveals the structure of your pages and components. Here, you can modify the product page's layout, for example, by adjusting elements such as SKU and Availability or adding new features like a Size Guide.

Customize mobile version 

Step 1: Enabling the Mobile Theme:

• Head to Storefront › Mobile Theme Settings. Check the "Yes, enable the mobile theme" box to activate it.
• Once enabled, the option to "Download Mobile theme" will appear. You can specify the devices for which the mobile theme should be active: 

"Mobile" for Apple iPhones/iPod Touch, Android phones, or Windows 8 Phone.

"Tablet" for Apple iPads, Android Tablets, or Windows 8/RT tablets.

• Optionally, upload a mobile-specific logo under "Mobile theme logo."

Step 2: Customizing the Mobile Theme: Downloading the Template:

• After activating the Mobile Theme option, click "Download Template Files" to make your mobile theme files in a .zip format.
• Create a designated folder on your desktop named "BigCommerce Mobile Theme Files."
• Transfer the downloaded .zip file into this folder and extract its contents using a suitable software like 7-Zip or WinZip.

Step 3: Making Changes:

To customize your BigCommerce mobile theme, edit the HTML and CSS files using a plain text editor.

Step 4: Uploading Your Changes:

• Prepare to upload the customized files by setting up WebDAV.
• In your control panel, retrieve the WebDAV Username and Password from Settings, in the Advanced section choose File Access (WebDAV).

• Access WebDAV following these steps:
  - Visit Server Settings › File Access (WebDAV) and download the Cyberduck connection file.
  - Open the downloaded file to connect to your store's server using your WebDAV client.
  - Upload your customized files to the "mobile_template" directory, ensuring they follow the same structure as the initially downloaded file.

Note: Files like "default.html" should be uploaded outside of the folders in WebDAV, mirroring their structure in the downloaded template.

Pre-Integrated Apps

BigCommerce boasts a vast ecosystem of pre-integrated apps seamlessly integrating with your store. These apps cover various functionalities, including marketing, sales, customer service, analytics, and more. Since these apps are pre-integrated, you can easily add them to your store with just a few clicks, without complex setup or coding. This allows you to enhance your store's capabilities and streamline your operations with minimal effort.

• Access App Marketplace: On your dashboard, choose Apps > Marketplace > BIGCOMMERCE.COM/APPS

• Browse Apps: Search for apps related to your needs (e.g., email marketing, reviews, analytics).
• Install and Configure: Click “Get this app” > log in to your account > click “Install” and follow setup instructions, and configure settings.

• Activate: Once configured, activate the app on your store.

Operational Tasks 

Beyond design and functionality, BigCommerce offers tools to streamline various operational tasks related to running an online store. This includes managing orders, inventory, shipping, taxes, and payments. The platform provides intuitive interfaces and automated workflows to simplify these tasks, allowing you to focus on growing your business rather than getting bogged down in administrative work.

• Log in to your admin panel.
• Product Management: Update product details, prices, and inventory.
• Order Processing: Process orders, handle refunds, and manage shipping.
• Customer Support: Respond to inquiries and manage customer accounts.
• Stay Organized: Use the dashboard to stay on top of tasks.

6 Advanced BigCommerce Customizations 

Make the most of your BigCommerce store's capabilities by implementing these 6 advanced Bigcommerce customizations. 

Checkout Customization 

Step 1: Enable a custom checkout on your store, follow these steps:

• Go to Settings > Advanced > Checkout in your store's admin area. 

• Select "Custom Checkouts" from the "Checkout Type" menu.

After running the npm run release, enter the following in the Script URL field, replacing "<version>" with the version number provided by npm run release:alpha command:

webdav:checkout/auto-loader-<version>.

Click the "Save" button to apply your changes.

Third-Party Payments

Customizing third-party payments on BigCommerce allows you to integrate additional payment options beyond the platform's built-in solutions. Before integration, research and select a third-party payment gateway that suits your business needs and preferences.

• Access the BigCommerce dashboard and navigate to "Settings" > "Payment." Look for the option to add a new payment provider or gateway. Follow the prompts to install the chosen third-party payment gateway.

• Choose Your Payment Gateway by clicking “Online Payment Methods.”

• Select the one that fits your requirements and hit the “Set up” button. Once installed, configure the settings of the third-party payment gateway according to your requirements.

Finish customizing your payment gateway by clicking “Save” at the end.

Subscriptions

To customize subscriptions on BigCommerce, follow these steps:

• Select Subscription Platform: Choose a platform compatible with BigCommerce, such as ReCharge or Bold Subscriptions.
• Install Subscription App: Access the BigCommerce App Marketplace and install the chosen subscription app.

• Configure Subscription Settings: Once installed, configure the subscription settings according to your business model. Set up subscription plans, pricing, billing intervals, and other relevant parameters.
• Access Recharge: from your dashboard, navigate to "Apps" > "Recharge" and select "Launch" to access the Recharge subscription app.

• From the Recharge Dashboard, select “Product” > “Add Product.”

• Choose the product you would like to add > “Add product.”

• Customize the subscription experience to align with your brand and customer preferences. Click “Save” to finish. 

Customize Fronted Design 

Customizing the front design of your BigCommerce store allows you to create a unique and visually appealing online shopping experience for your customers. Here's how to do it:

• Customize Theme Settings: Once you've installed a theme, access the theme editor in your BigCommerce dashboard. Navigate to “Design” > “Customize” to customize the  theme, including colors, fonts, layout, and navigation.

, voi

• Modify Layout and Structure: Use the theme editor to adjust the layout and structure of your store's pages. Arrange content blocks, sections, and widgets to create a cohesive and intuitive user experience.

• Upload Brand Assets: Upload your brand's logo, icons, and other visual assets to personalize the frontend design. Ensure that your brand assets are displayed prominently and consistently across all pages.
• When you’re ready, hit “Publish” to finish the customization.

Customize Data Analytics 

Customizing data analytics in BigCommerce allows you to gain insights into your store's performance, customer behavior, and marketing effectiveness. 

• The first step is determining which analytics platform to track and analyze data. BigCommerce integrates with popular analytics tools such as Google Analytics, Adobe Analytics, and Facebook Pixel.

These steps will show you how to connect Google Analytics with your store and unlock enhanced features and insights.

Step 1: Creating the tracking ID 

• Sign in to the Google Analytics dashboard. Go to “Admin” and click + “Create Property.”
• If prompted, click "Start for free" to create your account and log in.
• Enter the Account Name and adjust the Data Sharing Settings. Click "Next."

• Fill in the property details, such as name, time zone, and currency. Click "Show advanced options."

• Enable "Create a Universal Analytics property" and enter the Website URL with "https://". Choose your property preference.
• Select an industry, business size, and goals. Click "Create."

• Agree to the Terms of Service and click "I Accept."
• Copy the tracking ID provided. No need to copy any code separately.

Step 2: Setting up Google Analytics

2.1 Enhanced Ecommerce

• Return to the Admin area after setting up your tracking ID by clicking the arrow icon.
• In the View column, locate and select “Ecommerce Settings.”

• Turn on “Enable Ecommerce” and “Enable Enhanced Ecommerce Reporting.”

• Add funnel steps for checkout labeling in the specified order and “Save” your changes.

2.2 Site Search

• Navigate to “Admin” › “View Settings” in your Google Analytics account.

• Turn on the “Site search tracking” and enter "search_query" in the Query parameter field. Save your changes.

Step 3: Enabling Google Analytics tracking

After obtaining the tracking ID, install it in your BigCommerce store by following these steps:

• Navigate to Settings › Data solutions in the BigCommerce control panel. Click "Connect" next to Google Analytics.
• Choose "Property ID" from the dropdown menu. Paste your Property ID into the designated field and click "Connect."

Customize Contact Form 

Customizing the contact form on BigCommerce allows you to tailor it to your needs and branding. Let’s explore how to do it in this article. 

Wrapping Up

With BigCommerce customization, you have the power to create a personalized and seamless shopping experience that sets your store apart from the competition. Start customizing today and watch your business thrive.

BigCommerce Customization: FAQs 

Can I customize the design of my BigCommerce store?

Absolutely! BigCommerce offers robust customization options to tailor the design of your store to match your brand identity. You can customize themes, fonts, colors, layout, and more through the intuitive theme editor. Additionally, you can add custom CSS and HTML to further personalize your store's appearance.

Can I customize the functionality of my BigCommerce store?

Yes, you can customize the functionality of your BigCommerce store to suit your business needs. BigCommerce provides access to an extensive range of apps and integrations through the BigCommerce App Marketplace. Whether you need advanced shipping options, custom product configurators, or enhanced marketing tools, you can find and integrate solutions that meet your requirements.

Is it possible to customize the checkout process on BigCommerce?

Absolutely! BigCommerce offers flexible options for customizing the checkout process. You can modify checkout fields, add custom checkout steps, and integrate various payment gateways to create a seamless and tailored customer checkout experience. Additionally, you can enable features like guest checkout, address auto-completion, and abandoned cart recovery to optimize the checkout process further.

Can I customize product pages on my BigCommerce store?

Yes, you have full control over customizing product pages on your BigCommerce store. You can add custom product fields, display product variants, and customize product descriptions to highlight key features and benefits. Additionally, you can showcase product reviews, related products, and promotional offers to enhance the shopping experience and drive conversions.

How can I customize the navigation menu on my BigCommerce store?

Customizing the navigation menu is easy with BigCommerce. You can create custom menus, add dropdowns, and organize menu items to improve site navigation and help customers quickly find what they're looking for. Additionally, you can add links to product categories, blog posts, contact pages, and more to provide easy access to essential content and resources.