Diving Deep into Shopify Winter ’24: Key Updates on Subscriptions, Variant Capacity, and Themes Blocks

On January 31st, Shopify unveiled a comprehensive update with over 100+ enhancements in the Shopify Winter ’24 Edition, focusing on reinforcing the core pillars of their platform for an improved merchant experience.

Key Areas of Upgrade in the Winter ’24 Edition:

  • Conversion
  • Channels
  • Marketing
  • Operations

These updates are meticulously designed to bolster the success of Shopify merchants, making the platform more robust and versatile. The Complete Edition details all updates.

This blog post is crafted with merchants in mind, aiming to demystify the updates in a clear and digestible manner. We will zoom in on three significant enhancements: enhanced subscription features, an increased limit for variants and Product Swatches, and the latest updates to the Shopify theme block. Practical examples from demo stores will be provided to showcase the tangible benefits of these updates, illustrating how they can be leveraged for merchant success.

1. Shopify Subscription App –

You can now boost customer lifetime value and ensure predictable revenue by offering products as subscriptions with Shopify’s new, free Subscriptions app.

Shopify’s new Subscriptions app allows merchants to directly manage and offer subscription models from the Shopify admin, enhancing customer retention and revenue stability. This feature simplifies setting up recurring payments and custom subscription options, offering a seamless integration for businesses looking to adopt or expand their subscription-based offerings.

  • Offer auto-billed subscriptions (renew weekly, monthly, or yearly) with discounts.
  • Allow your customers to cancel, skip, or pause subscriptions
  • Use customizable email templates for order confirmations or payment reminders
  • Access reporting to analyze your store’s subscription performance
  • Easily transfer existing subscription contracts to Shopify Subscriptions

shopify-subscription

How to Set Up Your First Subscription Plan

  • Installation and Initial Setup: Once the app is installed, a setup guide will appear, prompting you to create your first subscription plan. This plan will be available as a subscription option in your store.
  • Creating Your First Subscription Plan:
    • Plan Name: Initially, add a name to your plan under “Plan Title.” Note that this title is for internal use and won’t be visible to customers.
    • Purchase Options Title: This is what your customers will see. It should clearly describe the subscription or plan, helping customers understand the value and content of the subscription.
  • Selecting Products for Your Subscription: Choose products from your store’s catalog to include in the subscription plan. For demonstration purposes, we’ve selected a gift card, but you’re free to select any product(s). Multiple products can be included in a single subscription plan.
  • Discount & Delivery Options: Offer discounts to your customers based on the delivery frequency of your choice. You can set up various delivery frequencies and corresponding discounts to encourage more frequent purchases and loyalty.
  • Subscription Summary: On the right side of the setup page, you’ll find a “Summary” section. This provides an overview of your subscription plan, including selected products, discounts, and delivery settings. This section helps you review and ensure all details are correct before finalizing the plan.

subscription app setting

After setting up your subscription, follow these steps to integrate it into your store:

  • Add the Subscription Widget to Your Product Page: This allows customers to subscribe directly from product pages.
  • Customize the Widget: Adjust its style and text to match your store’s theme for a seamless look and feel.

For a step-by-step guide on adding and customizing the widget, check out our theme integration tutorial.

subscription app widget

Now we can see the subscribe purchase option on the product page –

About Subscription App Policy –

If you have set up a subscription, then a new purchase options cancellation policy is added to your store. This policy is linked in the checkout footer as a subscription policy. If the policy in the Shopify admin settings is blank, then a generated template is displayed to customers. Add or edit your store policies to update the subscription policy that’s displayed to your customers.


2. Products Variant Capacity – Opening the door to complex products.

Shopify has released a developer feature that people have been asking for years: they’ve increased the variant limit from the existing 100 variants to a staggering 2,000 variants. Currently, merchants are not allowed to create a product that creates more than 100 variants between all their product attribute combinations (size, color, and other product purchasing attributes). We know brands with diverse product lines who have shied away from Shopify because of this limitation. Now, this enhancement empowers businesses to showcase a broader range of product variations and not be limited to certain product attribute combinations on a product page.

Unfortunately, this increase will not be automatically built into Shopify admins but rather accessible via Shopify’s updated Product APIs. The feature is currently available in developer preview and is set to roll out to select merchants gradually throughout 2024. Even so, with this release, we see Shopify moving in the right direction and hope that, over time, this will become available on a larger scale.


3. Theme updates: Theme Blocks – Expanding theme flexibility

Perhaps the most exciting—albeit still yet to be released—feature mentioned in Editions is the nesting blocks functionality.

theme blocks in customizer

Developers working in the Liquid storefront can now define reusable atomic blocks and include them in multiple theme sections. They have their own schema that supports the application of HTML tags, classes, and merchant settings, among other things, and can even be nested inside other theme blocks!

theme blocks

To create a theme block, all you need to do is add a ‘block.liquid’ file to the /blocks folder of your theme. Sections and blocks can opt-in to receiving theme blocks as children in their schema and render them by using the new {% content_for blocks %} liquid tag. Similar to presets in sections today, block presets allow you to define as many starting points for each individual theme block as you want, including multiple configurations of nested blocks. This makes it easy to create many starting points by reusing the same blocks.

Pulling theme blocks out of sections and giving them their own home is step one in the vision toward a more flexible editing experience. Theme blocks make a ton of sense to us. Building small, reusable blocks is a foundational part of developing software, and it’s great to see Shopify extend those principles to the storefront.

Theme blocks are in developer preview right now, which means you need to create a new development store in the Partner dashboard with the Theme block preview enabled to try them out. Also, check out the reference theme, which covers theme block structures and files.


Now is the time to harness these advancements and enhance your store’s performance to drive conversions. Whether you’re delving into subscription models, broadening your product range, or refining your theme with blocks, seize the opportunity to prepare for these changes.

Keep an eye out for further updates as these features evolve and redefine the future of commerce on Shopify. For assistance in implementing these updates, don’t hesitate to reach out to our team. We’re here to support your eCommerce success.

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!

12 Realistic eCommerce AI Tools to Boost Your Online Business

In today’s digital age, artificial intelligence (AI) has become an indispensable asset for various industries, and eCommerce is no exception. With the capacity to analyze vast volumes of data and make intelligent predictions, AI has revolutionized the landscape of online businesses. In this comprehensive guide, we’ll delve into 12 practical and innovative AI tools that can significantly enhance your eCommerce operations, increase productivity, and propel your business to new heights.

1. Describely

Describely promises to create product descriptions on your behalf. The descriptions are SEO-focused, to help your ranking in the search results, and describely can even write to the requirements of platforms like Amazon and Etsy.

And it’s not just product descriptions that Describely writes, but also meta tags, email subject lines, ad copy, and captions for social media. It can even rewrite your existing content and create blog templates.

2. Descript

Descript is a powerful AI tool for every eCommerce store that wants to improve sales and increase conversion.

It is used to create captivating video content for your store. Also, one of the best video editing AI apps for your eCommerce store. Interestingly, its focus is not on video alone but on the entire workflow such that it can capture, edit, and share your screen recordings.

It can also be used to repurpose your content into short clips using the available templates. Descript is also used for transcriptions and audio edits that are used for podcasts. Moreso, you can host and publish your content in a Descript embeddable player.

3. ViSENZE

Visense is an AI software that makes product discoveries easy for online store owners, making it easy to achieve your business goals. This app provides online store owners with the best product discovery solution to increase revenue.

It utilizes smart recommendation and machine learning to display products that your customers will likely want to buy. This helps to lessen the time customers spend searching for the product they are looking to buy.

Furthermore, this App makes it easy for you to import product catalogs from third-party websites.

4. Rebuyengine – The Commerce AI Company

Personalization is the buzzword in e-commerce, but it’s a challenge to get it right. That’s where Rebuy Engine steps in, offering a groundbreaking solution powered by AI.

Rebuy Engine’s strength lies in its Intelligent Personalization features. It empowers you to create tailored shopping experiences for each customer by leveraging your store’s historical shopping data. This not only boosts conversion rates but also enhances customer engagement and increases the average order value (AOV), providing shoppers with a hyper-personalized journey.

The app excels in AI-driven upselling and cross-selling strategies precisely at critical decision points, further elevating your store’s AOV. Moreover, Rebuy Engine conducts in-depth analysis of your customer database to generate intelligent product recommendations, ensuring exceptional customer experiences across various channels, including online, mobile, and email.

Rebuy Engine leverages real consumer data to establish predictive personalization and offer advanced recommendations at scale. Here are some of the benefits of the Intelligent Personalization feature:

  • Customizes the user experience for each visitor (based on historical shopping data from the store)
  • Show products frequently purchased together on the cart, checkout, and PDP pages
  • Create highly tailored and context-aware recommendations depending on factors like device kind, location, day and time, campaign, email, and more
  • Promote best sellers, new products, and recently viewed and recommended products right from the homepage based on customers’ browsing history

If anything, Rebuy is an all-in-one eCommerce solution with many features. Let us look at some of the app’s most notable features.

  • Intelligent Personalization
  • Smart Cart
  • Upsell & Cross-Sell
  • Post-purchase Offers
  • Automated Retention
  • Marketing Links

Rebuy Engine stands out as a groundbreaking solution for e-commerce personalization, but it’s important to note that it exclusively caters to the Shopify platform.

5. Maverick

If you’ve ever wished you had the time to send all of your customers a video to welcome them or say thanks for buying from you, Maverick is for you.
You record a single video with the message you’d like to send, and Maverick then personalizes it for every recipient. You can also record multiple videos, to be used at different stages of the customer journey—like recovering abandoned carts.

Simply record the video and a script, and let Maverick get to work. It even integrates with other platforms including Omnisend.

6. GrowthBar

GrowthBar uses GPT-3 AI to automate content generation. It can suggest keywords, exact word count, links, images, and more. The tool is capable of providing extensive backlinking as well as creating blog post content outlines. There’s also a Chrome extension available.

GPT-3 AI technology was developed by OpenAI, a company co-founded by Elon Musk. It’s the first AI tech that has passed the Turing Test, which ensures that the written copy would sound as humanlike as possible.

Best Features:

  • Search Engine Optimization
  • Paragraph Generator
  • Meta Generator
  • AI Blogging Tools

7. Patterned

Struggling to find the perfect pattern for your product? Enter Patterned: with its AI pattern maker, you’re able to generate an unlimited amount of designs, completely unique and customized to your product. Each one is royalty-free, too.

The process is simple: input some keywords and the AI pattern generator gets to work. You can tell the tool’s specific themes—like “flower” or “leaves”—and a style, such as “abstract”.

It’s also possible to give it an artist’s name you love the work of and request things like fine or bold lines, subtle colors, or high contrast.

Once it presents a pattern that you love, you add it to the product for a virtual rendering, like this:

8. Signifyd Fraud Protection and Revenue Optimization

Signifyd is an end-to-end Commerce protection platform built to streamline order fulfillment, maximize conversions, and automate customer experience by eliminating fraud and abuse. In a nutshell, it promises to increase conversion rates by removing friction in the buying process.

Key Features:

  • Provides a financial guarantee in cases of item-not-received (INR) claims and offers an automated Chargeback Recovery product
  • Leverages big data, machine learning, and expert manual review to provide a 100% financial guarantee against fraud
  • Streamlines the order review and fulfillment process with automation and custom workflows

Cost: Although Signifyd includes a 14-day free trial, it is best suited for high-volume stores, with paid plans starting at $1,500 per month.

Review Shopify App Here

9. ChatGPT

When it comes to AI tools that revolutionize content writing and product description tasks, one name stands out at the forefront: ChatGPT. This pioneering tool has ushered in a significant transformation across various domains, including content creation.

ChatGPT empowers business owners to accomplish a wide range of tasks with ease, such as:

  • Crafting a unique and memorable name for your store or business.
  • Writing compelling articles and product descriptions.
  • Crafting engaging posts and captivating advertising content.
  • Providing professional translation services.
  • Generating inspirational marketing ideas for your products.

In the screenshot below 👇, we present an example of how ChatGPT can be used to create an enticing product description. You’ll notice that the tool requires specific commands and information to generate a fitting description.

We’ve included the necessary details, including:

  • The product description itself (a handcrafted oak wood gift box)
  • The target market (Saudi market)
  • The target audience (men and women)

You can provide additional information, such as box dimensions or instructions for use. You can also give the tool more instructions to regenerate the response in a better way.

10. Syte

If you need help with product discovery, you can check out Syte. It’s a great tool for brands, marketplaces, and retailers of all sizes selling jewelry, home decor, and fashion specifically.

Powered by visual AI, it helps customers to find the products that they’re looking for faster, helping to improve conversions, average order value, and lifetime value. For example, for Coleman Furniture, they managed to increase the conversion rate by just over sevenfold.

Moving forward, customer experience is only going to matter more and more to consumers. With Syte in your tech stack, creating premium experiences becomes much easier.

Much of this is thanks to its hyper personalization. Using session data and visual AI, you can share very relevant product recommendations. For example, if you operate in the home decor niche, you can use Syte to showcase similar products to those that are out of stock. Another way that it can drive sales is by suggesting accessories that will work well with a room.

If you do get stuck, the Syte team has been highly praised online. Not only will they enhance your customer’s journey, but they also make a concerted effort that your own user journey is seamless.

Key features include:

  • Sophisticated personalized recommendations
  • Image search
  • Automated product tagging
  • Thematic tags
  • Deep tag analytics

11. AI-Powered Chatbots – Zendesk

Chatbots are one of the most popular AI implementations in the eCommerce industry. In 2022, 58% of B2B and 42% of B2C companies actively used chatbots. 88% of online shoppers had at least one conversation with a chatbot, and 69% were satisfied with their last interaction.

As customer service representatives, AI chatbots use the Natural Language Processing capabilities of large language models to deliver a customer-centric search experience. Implementing AI chatbots into support channels or shopping carts makes customer engagement more effective, improving the online shopping experience.

ChatGPTZendesk AI, and Dialogflow are some of the best AI chatbots that provide a full-scale customer support solution for major companies like Stripe, Twitter, and Microsoft.

12. Social Media Posts and Updates

Like email marketing, social media marketing requires significant time and energy. Social media AI tools make maintaining a consistent posting schedule across multiple platforms easier, encouraging user engagement and conversion opportunities.

FeedHive and Buffer are social media management AI tools for content production, repurposing, and posting automation. Meanwhile, tools like Lately and Emplifi generate analytics to determine the best time to post for maximum engagement.


Bonus Tool – Unbound

We’ve looked at several platforms and you might think that it would be great if there were a single, all-in-one AI tool for ecommerce. The creators of Unbound had that same thought.

It doesn’t offer the same functionality as every tool in this article, but it can write blogs and product descriptions, generate endless product photos against different backgrounds, create logos and icons, and turn real photos into digital avatars. If those are the main features you need, you might find using this platform saves you paying for three separate ones.


In the ever-changing realm, embracing AI tools for eCommerce has rapidly become the norm. Many are ready for smooth integration, enhancing their value through complementary features. Simultaneously, specific tools require more time and resources for optimal alignment.

However, their primary objective remains consistent: to improve your product’s efficiency, minimize unproductive efforts, and foster financial growth. Recognizing that these examples of AI in eCommerce have the potential to enhance your product’s performance is crucial. They can optimize operations, aiding in financial success.

At Arounda, we sincerely believe in the power of AI. We use these tools daily and engage in projects that involve AI solutions.

So, get in touch with us at Arounda for expert guidance and support in integrating AI into your eCommerce venture.

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.

jQuery not defined – Gravity Forms

Some solutions are given here: https://stackoverflow.com/questions/23786388/js-error-on-gravity-forms

If we are embedding gravity form in template files and form is outside wp loop, then we need to call gravity_form_enqueue_scripts( $form_id, $is_ajax ); function to force stylesheets and scripts to load in the header.
Documentation: https://docs.gravityforms.com/gravity_form_enqueue_scripts/

Marriage

I was going through some articles on medium and I came across this article.

I am quoting some paragraphs from the article because I believe this is so true and I should keep this in my mind always

Marriage will not always make you happy, but it will do something even better. It will give you an opportunity to find happiness in peace, in letting go, in learning what’s worth fighting for, in figuring out how to love an imperfect person, in seeing what commitment is and what compromise feels like.

Marriage won’t do the work for you. That work is yours—always and forevermore. The real work is not about finding the right person. It’s about becoming the right person.