At the beginning of this year, I talked to a fellow developer whom we helped move a Magento site to Bigcommerce Enterprise platform. It was quite a complex BigCommerce site – GraphQL, Bundled products, Server Side Cart API, custom video post type, etc. It was a challenging project, but the end result was satisfying. As per him, he had the most relaxing holiday last year – because he didn’t had to worry about server down time, security patches, server bandwidth issues, etc.
BigCommerce, as a SaaS platform, gives you peace of mind in terms of website security, server bandwidth, DDoS attack, Payment Methods integration updates, PCI compliance etc. STILL, some responsibilities lie with merchants to ensure the website’s security.

User Access management

• Regularly audit the users who have admin panel access to your site and remove unwanted users.
• Give appropriate access permissions based on their roles (eg: If someone is handling fulfillment, they don’t need theme assets)
  https://support.bigcommerce.com/s/article/User-Permissions

WebDAV/File Access

• BC provides WebDAV access to host non-theme related assets to the store. Sometimes, developers may also add some scripts in the WebDAV and link within the themes.
• If a user is accessing WebDAV from an infected computer and your WebDAV access has been compromised, then it can cause a security risk on the site. So it’s recommended to keep the webDAV access disabled for users and enable on an as-needed basis.

Buy BC theme from trusted sources

• Do not download nulled themes from untrustworthy sites which gives paid themes for free. They can inject some malicious code within the theme and your site security can be compromised.
• Always buy themes from the trusted sources. I usually prefer to buy themes from the BigCommerce Theme Store because these themes are vetted extensively and are regularly maintained by the theme providers.

API Keys (Very important)

• As you’re using BigCommerce, you might have noticed that you have created several API keys. And even though the development work is done, the APIs are still present in the dashboard.
• It’s strongly recommended to remove the inactive API keys from the site.
• Also – when a private app or a developer request API key access, make sure you give access to appropriate scopes.
  Eg: If the app just needs to do inventory sanction on daily basis, then just give access to product object. Don’t give access to orders, customers, and other resources.
  Appropriate access for appropriate use case.

Third Party Apps

• When you’re installing an app, make sure you’re reading the scope requested by app. Always install the apps from trusted sources. I would hesitate to install an app if it’s requesting permission outside of its functionality.
• Apps are hosted on external servers by third party app providers. IF these third party servers get compromised, then it can pose a risk to your website and store data. That’s why it’s recommended to install an app from trusted partners and try to keep the number of apps to minimum.
• Too many apps can cause page speed issues and increase the possibility of security risks.

Google is going to sunset Universal Analytics on July 1, 2023 and have been advising site owners to setup GA4 on their site. The GA4 integration has not been available by default in major SaaS eCommerce platforms eg: Shopify, BigCommerce, etc.

In this blog post, we’ll review how to setup GA4 enhanced eCommerce tracking in BigCommerce using the BigCommerce script manager and a little bit of custom coding (optional).

Step 1. Copy GA4 code from your Google Analytics admin dashboard

The GA4 Code will look like this

Step 2: Adding GA4 Global Script to Bigcommerce

In this step, we’ll install the GA4 script across all the site pages (including checkout and order confirmation pages). BigCommerce provides a pretty easy interface to include scripts sitewide. Please go to your BigCommerce admin dashboard and go to the script manager to create a new script with following attributes:

• Name of Script: GA4 Global Script
• Description: Custom GA4 Global Script
• Location: Head
• Select pages where script will be added: All pages
• Script Category: Analytics
• Script Type: Script
• Script Content: Now copy the script from GA4 Code, paste it into the script content area, and click Save.

The screenshot below shows recommended settings:

Step 3: Set GA4 User properties and add page specific events

Google Analytics allows us to track very detailed information on the site’s user activity. The full list of events can be found here. As BigCommerce is a SaaS platform, I’ll be using events which are mostly related to the eCommerce industry, eg: view_item, view_cart, add_to_cart, etc. I have not included a remove_from_cart event because that will require adding code to the theme JS file (which requires local theme setup). I tried to keep this installation simple so that we can easily manage it from the BigCommerce admin panel.

To setup custom user properties and add page events, we’ll need to create another script in BigCommerce from the script manager with the following attributes:

• Name of Script: GA4 User Properties and Page Events
• Description: Custom Events
• Location: Footer
• Select pages where script will be added: All pages
• Script Category: Analytics
• Script Type: Script
• Script Content: Please copy the code given below and paste into script content section

The screenshot below shows recommended settings:

Step 4: Add GA4 Checkout Steps events to the BigCommerce Optimized One-Page Checkout

In this steps we’ll configure, begin_checkout, add_shipping_info and add_payment_info events. BigCommerce checkout data is not available to stencil handlebar variables. So we’ll be using the BigCommerce Storefront API to fetch the cart details, and we’ll use Mutation Observer to to identify the customers’ progress on different steps within the checkout page.

As the checkout page is loading, we’ll trigger the begin_checkout event. Then we’ll search for an element with the class .paymentMethod. Please note that these class names may change with future BigCommerce checkout updates, so please add the appropriate selector when you handle implementation. I am using the paymentMethod selector to trigger add_shipping_info because it ensures that the user has selected a shipping method already and we’ll be able to push the shipping information data to Google Analytics. Similarly, for add_payment_info, I trigger this event when someone clicks on the place order button as their last step. It ensures that the user has selected a payment method and is ready to proceed. The only drawback of this approach is that if someone enters incorrect payment information, the event will be triggered still. You can create a new script in BigCommerce Script Editor as per following attributes and paste the code given below:

• Name of Script: GA4 Checkout Page Events
• Description: Custom Checkout Events
• Location: Footer
• Select pages where script will be added: Checkout
• Script Category: Analytics
• Script Type: Script
• Script Content: Please copy the code given below and paste into script content section

Step 5: Add GA4 eCommerce Conversion Tracking on BigCommerce order confirmation page

So far we have configured pretty detailed DataLayers and events for different user actions and page views. Now we’ll configure purchase event on the order confirmation page to add revenue tracking within Google Analytics. We’ll be using the BigCommerce storefront API to fetch the order data and then push that information to GA. You can create a new script in BigCommerce Script Editor as per following attributes and paste the code given below:

• Name of Script: GA4 Conversion Tracking
• Description: Custom GA4 Purchase Event
• Location: Footer
• Select pages where script will be added: Order confirmation
• Script Category: Analytics
• Script Type: Script
• Script Content: Please copy the code given below and paste into script content section

Implementing advanced GA4 events in a BigCommerce Theme

In the previous steps, you implemented most of the eCommerce events within the Script manager. BigCommerce themes have some Ajax functionality like: Quick Search Results, Product Quick View Popup, Product Add to Cart popup, Quick Cart Popup in the header, etc. To track the user interaction with these, we’ll need to add some custom code to the BigCommerce theme files. The file paths are given according to Cornerstone theme structure. If you’re using a different theme, then you may have different file structure.

Track Search Results query within Quick Results popup

If you’re using the BigCommerce Cornerstone theme, you’ll notice that if you type a search query in the search box, it will give you instant search results. There’s possibility that people don’t go to the search results page and just find out their result within in the quick results popup. To track search queries for quick search popup, please follow this path in your Cornerstone theme: /templates/components/search/quick-results.html. Open quick-results.html file and copy the code given below and paste it at the end of the file.

Track Product Views in Quick View

Sometimes customers may simply click on the Quick View button to see product information and don’t go to the product detail page at all. So it’s good idea to track the ‘product_view’ event for the Quick View popup. To track quick popups product views, please follow this path in your cornerstone theme: /templates/components/products/quick-view.html. Open quick-view.html file and copy the code given below and paste it at the end of the file.

Track Ajax Add to Cart Event

There are few different approaches to track Add to cart events. We can trigger the event when someone clicks the add to cart buttons or we can edit the theme JS files and trigger the event in success callback of add to cart function. To make things easier, I have added the gtag function within the Add to cart success popup. Please follow this path in your cornerstone theme: /templates/components/cart/preview.html. Open preview.html file and copy the code given below and paste it at the end of the file.

Track cart view in AJAX cart preview

In cornerstone theme, you do have quick cart available by default. IF you click on cart icon in the header, it will open a quick cart preview and you can go to checkout from there itself (without going to cart detail page). To add cart view event in the quick cart preview, please follow this path /templates/components/common/cart-preview.html and open cart-preview.html file. Copy the code given below and paste it at the end of the file.

Note: The steps which I have given above for script editor, that code is independent of theme you’ve currently installed. Other instructions which are under “Theme Specific Code” those are written for Cornerstone. Cornerstone is used as base theme in a lot of custom themes and premium themes, so those instructions will work for most of the BC sites. In case you come across any issues and need any clarification, feel free to post a comment. Currently this code is tracking “physical items” only. For Downloadable products, it will require code modification.

There are other events like social sharing, refunds tracking and cart removal. I haven’t implemented those yet. I’ll update this blog post as I integrate more custom events within the BigCommerce.

If you’re facing an issue where your order notifications are going to spam, then make sure your SPF record is configured correctly.

If you are pointing your Name servers to BigCommerce – then this issue won’t arise because SPF records are automatically setup correctly in that cause. But In this case, if you are using service like Gmail, outlook etc for your email – then you’ll need to add their SPF record correctly.
Here is the documentation provided by BigCommerce.

If your Name Servers are managed outside of BigCommerce, then you need to make sure that you do add BigCommerce SPF record in your DNS records.
v=spf1 +a +mx include:spf.bigcommerce.com ~all

BigCommerce is the fastest growing SaaS eCommerce platform in the world. When it comes to offering both B2C and B2B features simultaneously, I believe BigCommerce is also one of the best eCommerce solutions.

In the past few months, there seems to be a lot of demand for web developers, especially within the eCommerce industry. I see a lot of recruiters looking for Shopify and BigCommerce developers.

This blog post will cover the essential skills to become an expert BigCommerce theme developer. In subsequent blog posts, I’ll cover the path to becoming a BigCommerce App developer, SEO expert, BigCommerce solution architect, etc.

I’ll be writing this article as instructions for someone completely new to web development. You may already have some foundational knowledge and can skip ahead, but do not underestimate the value of refreshers.

Understanding Basics of Web/Internet

• Understanding how the internet works
• What is DNS? What are the common DNS Records?
• What is a domain registrar?
• How do websites work? What is web hosting?
• Here are a few videos which I believe can be helpful for you:
  • DNS Made Easy videos
  • DNS Records by IT Free Training
  • The difference between a domain name registrar, DNS, and hosting by 48 in 48

Semantic HTML

• HTML would be one of the first steps towards becoming an expert in web development.
• In my 12+ years of experience, I often come across applicants/people who claim to be an expert in HTML, but they are not aware of web semantics, web standards, etc.
• So I would strongly suggest that you make sure you’re learning web semantics and understand W3C standards when you’re learning HTML. Writing meaningful HTML can help your website user experience, accessibility, performance, and SEO.
• There are a lot of online courses available (Free or paid).

CSS

• I am adding CSS as a second step here, but it will mostly go side-by-side with HTML.
• There are a lot of frameworks out there for CSS, but I strongly recommend learning pure CSS. Once you understand the fundamentals of a language, then you can adopt any framework quickly. Coding in pure CSS will help to improve your styling skills.
• While learning CSS, also learn about responsive web design and the mobile-first approach.

Design Tools

• Having a basic understanding of design concepts and tools will help you a lot in your web development career. You don’t have to be an expert in these design tools, but you should have enough knowledge to extract the assets and other information from the design files.
• Figma, Photoshop, Sketch, and Adobe XD are the popular design tools used in front end web development
• Tip: Once you have gone through the HTML/CSS learning. Try to find some design files of a web page and convert that design into a functional responsive webpage using HTML/CSS.

JavaScript/ES6

• Having a solid knowledge of Vanilla JS will help you a lot.
• Find a course online which teaches you the core concept of the JS. Make sure you’re learning ES6 advanced features (arrow functions, fetch/await, map function, etc). Basically, find a course which teaches you the core concept of JS and latest advanced features of JS.
• Once you finish your JavaScript learning, then one thing I strongly suggest is to PRACTICE. There are courses available on YouTube which involves some practice JS projects. This is an area where many applicants are weak, so continuous, extensive JS practice will put you ahead.

jQuery

• There are a lot of JS frameworks/libraries. Once you have a good understanding of JavaScript, it will be easy to adapt any framework. In this list, I’ll include jQuery as an essential skill. The BigCommerce Cornerstone theme and many websites on the internet are still using jQuery, so it’s a good idea to learn this.

Knowledge of BigCommerce Platform

• This step is significant. You can not develop the BigCommerce websites if you don’t know about the different features available within the BigCommerce itself.
• I prefer developers to have a strong understanding of the basics of the BigCommerce platform before developing themes or websites on the platform.
• You can create a trial BigCommerce store, go through all different sections within the admin panel, and play around.
  • Setup simple and complex products
  • Setup categories with the parent-child relationship
  • Import-export products
  • Setup customer groups
  • Payment methods, shipping, discounts, taxes, etc
  • Go through every option and understand how it works.
• BigCommerce Videos:
  • https://support.bigcommerce.com/s/videos?language=en_US

Basic Knowledge of command-line tools

• It would be good to have basic knowledge of working within terminal/PowerShell.
• You will need to install Stencil CLI and other components via node or other methods when working with BigCommerce.

SCSS

• https://sass-lang.com/
• Sass is a processor scripting language for CSS. Once you have a good knowledge of CSS, this will not be a problem. You need to read its documentation, and you should be in a pretty good spot.
• Sass helps you write your CSS quickly and more efficiently.

Stencil Theme Framework

• BigCommerce uses Stencil as its theme engine. Having a good understanding of this framework will be crucial for BC Theme development.
• Here is the link to BigCommerce Stencil Documentation
  • https://developer.bigcommerce.com/stencil-docs/getting-started/about-stencil
• Make sure you understand how to work with Stencil CLI, Page Builder CLI, etc.
  • It will require basic knowledge of node, command-line tools, API creation, etc.

GraphQL/Storefront APIs

• BigCommerce has also released storefront APIs, which are in JS and GraphQL. BigCommerce storefront cart/order API will come in very handy if you’re working on setting up third-party tracking codes/data layers.
• GraphQL API can help you extract more information from BigCommerce objects that are not available by default in handlebars.

Basic Knowledge of SEO

• If you’re developing a website for a client, they will want the website to appear in search engines and to generate business from the website. I don’t expect developers to be SEO experts, but they should have basic knowledge of SEO concepts.
• Often, developers may be working on an existing website CRO implementation or working with a team for on-page SEO items.
• Make sure you understand:
  • Canonical tags
  • XML Sitemaps
  • HTML sitemaps
  • Meta Descriptions & Title Tags
  • Rich Snippets
  • and more

Web Accessibility

• In the past few years, many merchants have received lawsuits regarding failing to meet ADA compliance guidelines.
• There are third-party apps that make the website accessible, but those are limited and won’t solve every issue.
• When designing or developing a website, it’s recommended to keep web accessibility guidelines in mind.
• As a developer, understanding the ADA compliance checklist and techniques will be very helpful. This skill will set you apart from other applicants.

Knowledge Web Performance optimization

• Slow websites are bad for conversions. There are techniques and development workflows that can help you develop fast websites.
• Learn about Core Web Vitals. Nowadays, Google considers CWV as a ranking factor.
• I would say that web performance optimization is a crucial skill and will help you develop quality & fast BigCommerce websites and set you apart from other devs.

Git/Version Control

• There might be a possibility that you might be working on a project that other team members are working on. So it’s a good idea to have a good knowledge of Git. It will make collaborative work much more manageable.

Third-Party Apps Integration

• Most BigCommerce websites may require one or more app installation/setup. There are many options available, such as: reviews app, filters app, rewards app, back in a stock app, or other functionality.
• To become a successful BigCommerce Developer, you must know how to install these third-party apps.

Project Management Tools

• In order to work well with a team or even manage your personal projects, it’s recommended to know the basics of Project Management tools. E.g., Basecamp, Asana, Teamwork, JIRA, Trello, etc.
• You don’t need to understand every tool because all have similar functionality (like tasks, time tracking, progress tracking, etc.). But the basic idea is to understand the communication process and workflow of the company you’re working with.
• When working with a company or client, good communication is vital so begin to practice daily documentation of your work.

Testing & Bug Tracking Tools

• Once you complete the site development, the next step would be to test this on different platforms, devices, and browsers. I use BrowserStack, but there are other platforms available as well. Similarly, for bug tracking, I use BugHerd, but there are other tools available as well.
• The idea isn’t to learn every tool but the concept and process. You may go through one tool and understand how it works and how it can improve your development workflow.

Helpful Links:

1. BigCommerce Knowledgebase Videos
2. BigCommerce Stencil Framework
3. BigCommerce Theme Objects
4. BigCommerce Storefront APIs
5. BigCommerce GraphQL API
6. BigCommerce BigDev BootCamp
7. BigCommerce Trial Store Creation
8. BigCommerce Cornerstone Theme Demo
9. Learn (web.dev)
10. Optimize for Core Web Vitals – YouTube

Feel free to reach out if you are looking for mentorship, career guidance in web development, or one-on-one BigCommerce development training sessions.

Recently I worked on a BC project. Client made a small request of adding confirm email field in the contact form of BigCommerce website. Its not really much tricky. Here goes the quick tutorial.

We’ll need to add/edit html code in the BigCommerce Template files. So you just need to click “Design” link in the navigation in BC admin panel and click “Edit HTML/CSS”.

Step 1

Now just find this file page_contact_form.html in the panels. Add this html code in the page_contact_form.html file.

<dt><span class="Required">*</span>&nbsp; Confirm Email</dt>
<dd class="smallTextbox"><input type="text" placeholder="Confirm Email" name="confirm_email" class="Textbox Field200" /></dd>

In the screenshot given below, you can see that I’ve added this code on line number 23-24.

Step 2

Now you’ll need to add little bit JS code in the ContactFormJavaScript.html file.

var confirm_email = $('#confirm_email').val();
if(confirm_email != email_address) {
  alert('Emails should match');
  $('#confirm_email').focus();
  $('#confirm_email').select();
  return false;
}

In the screenshot you can see that I’ve added this code on line number 6 and line number 14-19.

And thats it!! Here goes the output:

Please post comment if you’ve any question. Thanks