Streamlining Checkout and Order Fulfillment with Buy with Prime for eCommerce Stores

Nowadays, online shopping and Amazon have become almost synonymous for consumers. Especially with the addition of Amazon Prime, boasting that sweet two-day shipping, it seems as though online shoppers almost begin their search by first checking Amazon for product availability. For eCommerce stores looking to increase their consumer interest and grow their overall sales, it’s important to consider how Amazon might work in the best interest of your company. Especially with the option of Amazon’s Buy with Prime option, Amazon’s widespread popularity can potentially work in your favor rather than competitively against it.

In this article, we’ll explore what Amazon Buy with Prime is, what its benefits are the benefits, as well as how to set up Buy with Prime for your own online space.

What is Amazon Buy with Prime?

Buy with Prime allows businesses to grow their online storefront by enabling customers to access the fast, free, and seamless checkout experience Amazon Prime members know and love. This means Buy with Prime is no longer limited to Amazon’s storefront alone. Prime benefits are top-of-the-line and now, these benefits can extend to a wider variety of sites improving customer experience and helping merchants accelerate their business.

According to internal Amazon Data, Amazon’s Buy with Prime increases shopper conversion by 25% on average.

How Does Buy with Prime Work?

If you choose to add Buy With Prime to your storefront, when a user is viewing a product on your DTC site, they will now see a ‘Buy with Prime’ logo and an option to Buy With Prime (along with existing checkout options).

Once the Buy With Prime button is clicked, the user will be prompted to log in to their Amazon account, and from there, the checkout menu automatically populates all of the customers’ preferred payment and shipping information from their Amazon account. Buy with Prime makes the shopping experience seamless for both consumers and merchants.

“Amazon’s Buy With Prime program extends the beloved Amazon Prime shipping experience and world-class convenience to brand sites across the web. This means Amazon shoppers can now relish the same level of service they adore on Amazon, conveniently available across their preferred brand stores.”
– Amandeep Singh, Director at Cronix

Benefits of Buy With Prime

There are many benefits of Buy with Prime. One of the most attractive elements of Buy with Prime is that merchants can effectively double their exposure across their own websites and through Amazon itself.

Sales growth is highly driven by exposure, but it’s equally determined by convenience. Prime was designed to attract online shoppers, and with Buy with Prime, eCommerce stores can get the best of both worlds. Here are some of the attractive features of Amazon Buy with Prime!

  • Offer Prime Shipping From Your own store
  • No Up-Front Costs
  • Building Stronger Relationships with Users
  • Giving Customers a Familiar Shopping Experience
  • Fulfillment Made Easy

Limitations to Consider When Implementing “Buy with Prime”

When integrating “Buy with Prime” into your platform, it’s essential to acknowledge several limitations that currently affect the feature’s functionality:

  • Individual Product Purchase Limit: At present, the system allows for the purchase of only a single “Buy with Prime” product per order. While there are plans to support checkout for mixed carts in future releases, this feature is not currently available.
  • Handling Products with Variations: Enabling “Buy with Prime” for products with variations poses a constraint. To utilize this feature, all variations must either have “Buy with Prime” enabled or none at all. Selectively enabling specific product variants for “Buy with Prime” isn’t an available option at this time.
  • Order Visibility and Access: One of the limitations includes the non-display of “Buy with Prime” orders within the default platform order section. To access and manage these orders, users must navigate to the app’s Orders section and choose View Buy with Prime orders. This section offers access to “Buy with Prime” order details and provides a direct link to your Amazon merchant console for further management.

Understanding the “Buy with Prime” Fees

  • Prime Service Fee per Order: In addition to fulfillment and storage expenses, there is a Prime service fee associated with each order. This fee amounts to 3% per order with a minimum charge of $1.5 per order. This fee structure is an essential component to consider in the overall cost assessment when utilizing the “Buy with Prime” feature.
  • Fulfillment Estimates: Fulfillment estimates encompass rates applicable from January 15, 2023, through October 14, 2023. Following this period, from October 15, 2023, to January 14, 2024, the Holiday peak fulfillment rates will be in effect. For detailed insights into the rates, please refer to the fulfillment pricing page.
  • Storage Estimates: Storage estimates are based on rates from January through September, starting at $0.83 per cubic foot per month. From October through December, the rates begin at $2.4 per cubic foot. The assumption is based on an average of 10 units stored per day. For further information, you can refer to the detailed rate card.

Source – Amazon

How to Add a “Buy with Prime” Button to Your Website

According to Amazon, Buy With Prime is no longer invitation-only. “We’ve been working closely with merchants since launching Buy with Prime, and we’re thrilled to hear that the program has helped drive such impressive results so far. We’ll continue innovating and investing in new features and tools to help merchants of all sizes succeed—and give Prime members the shopping benefits they love, whether it’s on Amazon or beyond.” – Amazon.

FBA merchants can add Buy with Prime to their website in just a few clicks. You can confirm if you are eligible here. Check out the four-step process below.

  • Step 1: Sign up and Create an Account
  • Step 2: Set up Buy With Prime
  • Step 3: Designate Products
  • Step 4: Add Buy with Prime Button

Source – Amazon

BigCommerce integration with Buy with Prime

BigCommerce announced the Buy with Prime app for BigCommerce. This new self-service integration will help BigCommerce merchants easily enable Buy with Prime on their storefronts—no coding required.

Hot tip: Ensure you have registered for Amazon Pay to ensure a frictionless checkout experience for buyers.

Buy with Prime is designed to work with most e-commerce providers. And when it comes to cost, Amazon noted, “Using Buy with Prime, merchants simply pay for what they use. Pricing is based on a service fee, a payment processing fee, and fulfillment and storage fees that are calculated per unit. With no fixed subscription fee or long-term contract required, merchants can expand selection or cancel at any time” (Source). If you have questions or need assistance with building, designing, and growing your eCommerce store, feel free to contact our team. We’re here to help you succeed!

BigCommerce Web Security Tips – How to keep your website secure?

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

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 Analytics (GA4) Integration with BigCommerce – Enhanced Ecommerce Tracking

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:

GA4 Global Tag within BigCommerce Script Manager

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:

GA4 Custom Events and User Properties Script 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.

BigCommerce order notifications going to spam

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

How to Become a BigCommerce Developer

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

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:

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
  • 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.

Adding confirm email field in BigCommerce contact form

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 1 - Add code in page_contact_form.html

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.

Add JS code in ContactFormJavaScript.html

And thats it!! Here goes the output:

Confirm Email field in Contact form BigCommerce

Please post comment if you’ve any question. Thanks