Header image

Offline-to-Online Commerce with Shopify Plus

29/08/2023

1.77k

Enterprises are using Shopify Plus to sell directly to their consumers because, let’s face it, most of us don’t like going to the store anymore. One of our clients decided to take some of their more unique products and start selling them online using newly integrated Shopify stores. It seems that Offline-to-Online commerce is an inevitable transformation in this era.

From traditional to online retail with Shopify Plus optimization

Selling Directly to Consumers With Ecommerce

You’ve probably been to a supermarket or drugstore and bought toothpaste. If not toothpaste, you may have bought soap or laundry detergent. If you haven’t gone to a brick-and-mortar store to buy any of these consumer goods, which can be found on shelves all over the world, then you’re way ahead of the game (or in desperate need of some soap). 

Most people use these consumer products on a daily basis. When they run out of what they use, they can easily buy more at the nearest store. Unless they’ve pledged undying loyalty to a single brand, they’re likely to walk down the aisle and compare multiple products side by side on the shelf. This is the traditional way to shop for these types of products.

But some products require special treatment. They’re not like all the other products, so they don’t belong on the shelf next to them. They are branded and marketed more carefully. Not to wholesalers and retailers, but directly to consumers. 

But how does a large company, known only as a large company, with consumer goods on shelves everywhere, differentiate itself? One of our clients decided to launch Shopify stores to sell a few select products directly to consumers. 

Developing Middleware for Shopify Plus Integration

For this project, we partnered with our Shopify Plus partner, Fracta, to create a Shopify custom app in the Japanese market for one of these unique products. Our job was to provide support for SSO login (Single Sign-On login), new account registration, a feature for customers to update their information or deactivate their account, and display the terms of service. 

We had to synchronize the client’s user information between their existing system provider and the new Shopify stores. We also developed the admin page for easy management when connecting the middleware application to the stores. 

Our client was a large corporation that has been selling its household products on Japanese retail shelves for years. This means that they already had a system and store for wholesalers and retailers. However, they wanted to use Shopify to sell their new products directly to consumers. They still wanted to connect their old service provider to the new Shopify stores, but decided that a full migration to Shopify was not an option. Therefore, we decided to connect their current system to the new stores by developing custom middleware for the client. 

A middleware to link two Shopify Plus stores and streamline offline-to-online commerce
Streamlining Offline-to-Online Commerce with the aid of a custom-built middleware

The client had an SSO application, and wanted end users to use their accounts with their existing service provider to log into the accounts for the two Shopify stores. We integrated the new Shopify stores with the service provider by developing the backend for the middleware. Aside from a last-minute UI change, there were no major technical challenges that pushed us to our limits. In many ways, this was a routine project that delivered the custom and desired Shopify solution for the client. 

The Future of Enterprise Offline-to-Online Commerce

Rather than going through the list of technical requirements for this project, what I found most interesting was the client’s new business model — and how Shopify Plus can help.

This was an established company that most people would passively know their brand from seeing it so often in stores. This is the problem that some companies are starting to address: their brand is only passively understood and recognized. There’s nothing compelling or unique about them compared to their competitors. They all make similar, but slightly different, products and put them on the same shelves. As consumers, we are forced to make decisions based solely on marginally different price, quantity, or packaging. So how can these companies get their name out there as more than just a “large manufacturer”?

For starters, these same companies are looking at Shopify Plus as a way to sell their products directly to consumers. They’re not just trying to sell the same soap or toothpaste; they’re getting creative with the products and giving them new aesthetic branding — using Shopify as a platform to do so. 

“The ability to buy what we need online directly from the source is the new normal.”

Of course they will likely never completely abandon the old sales flow, but they’re trying out new methods. But, this could be just the first step in a revolution. Perhaps one day, all of these large consumer goods companies will start developing their own specialty products to sell on ecommerce platforms. As the modern consumer continues to change, our desire to drive to the drugstore is diminishing; the ability to buy what we need online directly from the source is the new normal. 

For these reasons, businesses may begin to see Shopify Plus as the best method to streamline their sales. Coupled with a strong technical team, there’s no telling what the future of ecommerce will look like.

Middleware’s Technology stack:

  • Node.js, DynamoDB, Serverless (used for greater scalability)

Looking for the same technology solutions? Let us know!

SupremeTech has the expertise in bridging offline-to-online commerce. Whether you’re about to migrate your business to Shopify Plus or just trying to improve your online store’s operations, we offer bespoke solutions to solve your business problems quickly and effectively. Contact us!

Related Blog

View Transitions API

Knowledge

Software Development

+0

    How to Create Smooth Navigation Transitions with View Transitions API and React Router?

    Normally, when users move between pages in a web app, they see a white flash or maybe a skeleton loader. That’s okay, but it doesn’t feel smooth. Try View Transitions API! Imagine you have a homepage showing a list of movie cards. When you click one, it takes you to a detail page with a big banner of the same movie. Right now, there’s no animation between these two screens, so the connection between them feels broken. With the View Transitions API, we can make that connection smoother. It creates animations between pages, helping users feel like they’re staying in the same app instead of jumping from one screen to another. Smooth and connected transition using View Transitions API In this blog, you’ll learn how to create these nice transitions using the View Transitions API and React Router v7. Basic Setup The easiest way to use view transitions is by adding the viewTransition prop to your React Router links: import { NavLink } from 'react-router'; <NavLink to='/movies/avengers-age-of-ultron' viewTransition> Avengers: Age of Ultron </NavLink> Only cross-fade animation without element linking It works — but it still feels a bit plain. The whole page fades, but nothing stands out or feels connected. Animating Specific Elements In the previous example, the entire page takes part in the transition. But sometimes, you want just one specific element — like an image — to animate smoothly from one page to another. Let’s say you want the movie image on the homepage to smoothly turn into the banner on the detail page. We can do that by giving both images the same view-transition-name. // app/routes/home.tsx export default function Home() { return ( <NavLink to='/movies/avengers-age-of-ultron' viewTransition> <img className='card-image' src='/assets/avengers-age-of-ultron.webp' alt='Avengers: Age of Ultron' /> <span>Avengers: Age of Ultron</span> </NavLink> ); } // app/routes/movie.tsx export default function Movie() { return ( <img className='movie-image' src='/assets/avengers-age-of-ultron.webp' alt='Avengers: Age of Ultron' /> ); } // app.css ... /* This class assign to the image of the movie card in the home page */ .card-image { view-transition-name: movie-image; } /* This class assign to the image of the movie in the movie details page */ .movie-image { view-transition-name: movie-image; } ... Now, when you click a movie card, the image will smoothly grow into the banner image on the next page. It feels much more connected and polished. Animating a single element with view-transition-name Handling Dynamic Data  This works great for a single element, but what happens if you have a list of items, like multiple movies? If you assign the same view-transition-name to all items, the browser won’t know which one to animate. Each transition name must be unique per element — but hardcoding different class names for every item is not scalable, especially when the data is dynamic. Incorrect setup – Same view-transition-name used for all items in a list. The Solution: Assign view-transition-name during navigation Instead of setting the view-transition-name upfront, a more flexible approach is to add it dynamically when navigation starts — that is, when the user clicks a link. // app/routes/home.tsx export default function Home({ loaderData: movies }: Route.ComponentProps) { return ( <ul> {movies.map((movie) => ( <li key={movie.id}> <NavLink to={`/movies/${movie.id}`} viewTransition> <img className='card-image' src={movie.image} alt={movie.title} /> <span>{movie.title}</span> </NavLink> </li> ))} </ul> ); } // app/routes/movie.tsx export default function Movie({ loaderData: movie }: Route.ComponentProps) { return ( <img className='movie-image' src={movie.image} alt={movie.title} /> ); } // app.css ... /* Assign transition names to elements during navigation */ a.transitioning .card-image { view-transition-name: movie-image; } .movie-image { view-transition-name: movie-image; } ... Final output – Smooth transition with dynamic list items Here’s what happens: When a user clicks a link, React Router adds a transitioning class to it.That class tells the browser which image should animate.On the detail page, the image already has view-transition-name: movie-image, so it matches. This way, you can reuse the same CSS for all items without worrying about assigning unique class names ahead of time. You can explore the full source code below: Live DemoSource on GitHub Browser Support The View Transitions API is still relatively new, and browser support is limited:  Chrome (from version 111)Edge (Chromium-based)Firefox & Safari: Not supported yet (as of May 2025) You should always check for support before using it in production. Conclusion The View Transitions API gives us a powerful tool to deliver smooth, native-feeling page transitions in our web apps. By combining it with React Router, you can: Enable basic transitions with minimal setupAnimate specific elements using view-transition-nameHandle dynamic content gracefully by assigning transition names at runtime Hope this guide helps you create more fluid and polished navigation experiences in your React projects!

    08/07/2025

    11

    Knowledge

    +1

    • Software Development

    How to Create Smooth Navigation Transitions with View Transitions API and React Router?

    08/07/2025

    11

    The journey of Anh Duong

    Our culture

    +0

      Anh Duong – A Journey of Rising Above to Shine Bright

      At SupremeTech, we often meet during meetings, rush through deadlines together, and celebrate when our products are released. But behind those intense work hours, there are powerful stories of personal transformation & growth that we don’t always get to hear. ST is not only a witness to these journeys but also a part of them. In May, during our ST WOW section—a time where we honor people who make others say “WOW,” not only in work but also in life—we recognized Anh Duong. Duong has been with SupremeTech for four years and has gone through an impressive personal transformation. Let’s explore his story together! From a Shy Boy to the Confident Anh Duong Today Just over two years ago, Duong often felt insecure, especially about his appearance. He was skinny and had trouble even carrying water bottles around the office. He often felt tired and weak due to poor health. These little moments slowly pushed him to make a change, not to impress others, but to take control of his life. He started going to the gym in April 2023. At first, it was just something to try out. When the numbers on the scale didn’t move, he felt discouraged. But instead of giving up, that became a turning point. He chose discipline. He chose daily habits. He set long-term goals. Day by day, these choices built into something bigger—not just in how he looked, but in how he felt. No Trainer, No Showing Off – Just Self-Understanding Duong didn’t have a personal trainer. There was no magic solution. He studied on his own to learn what worked for his body—what foods, exercises, and routines suited him best. He designed his own meals, workouts, and rest schedule. Not to meet someone else’s standards, but to fit what he truly needed. Now that he’s “in shape,” his training is no longer a challenge—it’s just part of a healthy lifestyle. Success Measured by Spirit, Not Muscles After one year, Duong said his energy had improved significantly. He rarely feels drained now. People around him notice he’s more cheerful and full of life. And after two years? He says it’s a turning point—he truly feels proud of what he has achieved with his body. Now, he’s more confident. He’s in a relationship. His family is proud. And most importantly, he inspires others who once felt the same way. “You won’t know until you try. Don’t work out to show off—do it to change yourself.”Nguyen Van Anh Duong That’s Duong's message to anyone who feels unsure, insecure, or not strong enough to start. At ST, we’re proud to have people like Anh Duong—not just skilled at work, but also strong in their personal lives. We believe going far takes not only skills but also willpower. It’s not just about working together, but also living and growing together. Thank you, Anh Duong, for your personal transformation effort and for being a warm and strong light in our ST family. Related articles: From Unpaid Trial to the Top: The Inspiring Rise to Vice PresidentFrom Seeking The Path to Leading The Way: Phuoc’s Journey at SupremeTech

      27/06/2025

      73

      Our culture

      +0

        Anh Duong – A Journey of Rising Above to Shine Bright

        27/06/2025

        73

        Our culture

        +0

          Philippines Business Trip Report: Seminars and School Visits for BA Recruitment

          This time, SupremeTech embarked on our very first BA business trip to the Philippines! We visited two cities: Baguio, known for its high altitude, cool climate, and popularity as a study-abroad destination, and Cebu, a well-known tourist spot. Our itinerary consisted of four days in Baguio and three days in Cebu, totaling one week. The primary purposes of this BA business trip were: Visiting language schools for our recruitment of Japanese Business Analysts (BA).Hosting a career seminar for Japanese students interested in working abroad. Through direct conversations with language school staff and students, we gained valuable insights into their genuine concerns and aspirations. It was a truly eye-opening and enriching experience for us. Currently, many students return to Japan for domestic employment after studying abroad, often unable to fully leverage their global mindset. Additionally, when people consider working abroad, they usually look to English-speaking countries, such as Australia or Canada, while opportunities in ASEAN countries—especially emerging economies like Vietnam—remain relatively underexplored. During this BA business trip, our goal was to introduce “working in ASEAN” as a viable career option to language school students and staff, and to encourage them to view their time abroad not just as a study period, but as a stepping stone to a global career. We hope this BA business trip served as a meaningful first step toward expanding their future possibilities. Introducing SupremeTech and the Role of Business Analysts (BA) SupremeTech is a technology company based in Da Nang, Vietnam, specializing in web service development and AI applications. Our core business revolves around offshore development, connecting Japanese clients with talented Vietnamese engineering teams. Among our team, the role of a Japanese BA is especially crucial. BA does more than just translate language; they carefully listen to clients’ needs, organize those requirements into clear specifications, and communicate them effectively to the development team. In essence, they act as a vital bridge between clients and engineers. This role requires not only language skills but also strong logical thinking, cross-cultural understanding, and flexible communication abilities. Many of the Japanese BA thriving at SupremeTech have studied English at language schools in the Philippines. They leverage the skills they gained during their language studies to tackle challenges and build careers in Vietnam. However, it’s also common for language students to return to Japan after their studies and choose domestic employment instead. The international mindset and valuable experience gained through studying abroad in the Philippines can be put to even better use, and our company offers a field where those strengths truly shine. Bringing “Working Abroad” Closer to Everyone The key message we wanted to convey in our seminar was that working overseas in IT companies is not just for a special few—it’s something anyone can pursue. We heard many concerns from both school staff and students, such as: “I’m worried whether my English skills are good enough.”“Can I take on this challenge even without prior industry experience?” What we truly value is not how much skill or experience you have right now, but whether we can grow together moving forward. Nobody is perfect.At the same time, emerging countries like Vietnam offer an environment that allows you to take on new challenges flexibly.We strongly believe that those who are willing to try have the most excellent chances. During the seminar, we shared genuine stories from Japanese people currently working on-site, detailed explanations of the work itself, and the skills required. We hope this helped make the idea of working abroad feel a little more realistic and achievable. Studying abroad is not the goal—it’s just the beginning.We look forward to continuing to explore the career possibilities beyond language study, together. Insights from Our Conversations with Students Through our interactions with language school staff and students who attended our seminar, we came to realize the following: Many people are interested in working abroad, but find it challenging to take the first realistic step.There is a lack of information and opportunities to trigger action.Many of them are seriously focused on their future, and we felt great potential in each one of them. For those who are thinking, “I want to change something” or “I want to take a step forward,”We sincerely hope that this seminar and these conversations have helped give them a little push in the right direction. There is nothing more rewarding than that for us. Why Vietnam? – From the Frontlines of Offshore Development You might be wondering, “Why Vietnam?” or “What’s it like to do offshore development there?” Here are the three main reasons why we have chosen Vietnam as our base: A Practical Solution for Global IT Talent ShortagesWith Japan facing a serious shortage of IT professionals, offshore development with Asian countries has been expanding rapidly. Among them, Vietnam stands out due to its strong compatibility with Japanese business culture, offering a great balance of technical skills, cost efficiency, and talent availability.A Market Full of Opportunities for Young Professionals Vietnam has a relatively young population, with approximately 60% of its population under the age of 35. Its rapidly growing IT market provides many opportunities for young talent to gain hands-on experience early in their careers.Comfort and Cultural Familiarity Vietnam is just two hours ahead of Japan, making communication and coordination easier. The cost of living is relatively affordable, and the culture is friendly and welcoming to Japanese people. Our base city, Da Nang, is renowned for its tranquil environment, surrounded by mountains and the sea, offering a perfect balance between work and personal life. Conclusion This BA business trip and seminar were a significant challenge for us as well. By visiting language schools on-site and directly engaging with students, we gained valuable insights, new learnings, and important connections. We plan to leverage this valuable experience in our future recruitment efforts and continue to nurture strong relationships with language schools. Our key messages remain:“Working overseas isn’t just for special people — anyone can give it a try.” “Opportunities to take on new challenges are often closer than you think.” We will continue to share these messages and deepen our collaboration with schools. We also look forward to future visits and new challenges. We hope to visit the Philippines and interact directly with language school staff and students once again. Above all, we sincerely wish that the connections made during this BA business trip will become a new stepping stone for someone’s career journey. Through these activities, we hope more people will engage with our company and, in the future, become our colleagues. If you are interested in the role of BA or an overseas career, please check out [our recruitment information here].If you'd like to learn more or discuss whether this path is right for you, we also offer casual online meetings. We’re cheering you on as you take on new challenges. Gallery Bagauio API BECI (EOP campus) Our first visit was to API BECI, located on a lush, green hillside. We were impressed by the campus’s clean and well-maintained facilities, which beautifully blend the open, relaxing atmosphere of a resort with a focused, structured learning environment. We discussed the possibility of future collaboration with the student manager. JIC (Premium campus) We had the opportunity to visit JIC’s Premium Campus, nestled in a peaceful, green environment. The campus is spacious and well-equipped with convenient facilities such as a café, gym, and convenience store. The cafeteria, in particular, offered a spacious and open atmosphere with an excellent view. We also enjoyed a buffet-style meal there, which exceeded our expectations in both taste and quantity. Amidst this resort-like comfort, students were highly focused on their studies. JIC offers a variety of unique programs tailored to different levels, goals, and budgets at each of its campuses, and is known for its original curriculum and materials. During our visit, we also had positive discussions with the local team about the possibility of future collaboration on an English × IT learning program, and we’re excited about the potential opportunities that lie ahead. PINES (main campus) Our final stop in Baguio was PINES, one of the well-known language schools. Founded in 2001, the school relocated to a new campus in 2018, providing an even more comfortable and study-friendly environment. The campus is about a 10-minute drive from SM City Baguio, the city’s largest shopping mall, and is surrounded by nature, with lush parks just a short walk away. The school offers a fully integrated environment where classrooms and dormitories are housed in the same building, eliminating the need for commuting. It also features well-equipped shared spaces such as a gym and student lounge, ensuring a comfortable living experience. What stood out to us during the visit was the calm, focused atmosphere throughout the campus. It’s designed for serious learning. Many students are working professionals or individuals preparing for a career change, and we were particularly impressed by their strong sense of purpose and career motivation. CEBU B CEBU Our final visit was to B’Cebu, a language school newly established in 2023 on Mactan Island, Cebu. This promising new campus was founded as a sister school to API BECI, a well-established school with over 20 years of experience in Baguio. Upon arrival, we were immediately struck by the open and refreshing resort-like atmosphere of the campus! The clean and modern school buildings and dormitories are complemented by a full range of lifestyle facilities, including a gym, café, and convenience store, creating an uplifting environment just by being there. In contrast to the calm and focused study atmosphere in Baguio, B’Cebu offers a unique style of study abroad that perfectly blends the relaxed resort vibe, engaging activities, and language learning. A fascinating discovery was the chance to speak directly with the Korean owner. We learned that B’Cebu is part of a group that also operates B’Hoian in Hoi An, Vietnam. Given its geographical proximity to Danang, where our company is based, this connection opens up promising opportunities for future collaboration. Remarkably, the campus even features a dedicated diving pool! Students can obtain diving certification if they want, providing a unique combination of English language learning and resort experience. Meals are served buffet-style, offering a rich variety of options catering to the diverse international students. We had the chance to try the dish ourselves and found it delicious, so much so that it was hard not to eat too much! Curious World Academy (CWA) Our last stop was Curious World Academy. Although the visit was planned on short notice, we had a productive meeting with the manager and toured the school. We got a clear idea of the school’s atmosphere. The school is still relatively new, but it has already gained popularity due to its modern facilities and practical programs. The campus feels calm and focused — a great place for students who want to study seriously but also have time to relax. There’s a swimming pool and other nice facilities, which help students stay comfortable and learn well. Many students are young and seem very serious about their future. This visit gave us great hope and some excellent ideas for the future. Seminar - PINES

          25/06/2025

          69

          Tomu Sayama

          Our culture

          +0

            Philippines Business Trip Report: Seminars and School Visits for BA Recruitment

            25/06/2025

            69

            Tomu Sayama

            Our culture

            +0

              BA Team’s Offsite Training Session: Boosting Logic and Negotiation Skills

              BA stands for “Business Analyst,” but for this day, it also means “Break Away” from daily work. Our BA team recently participated in an off-site training session that was both meaningful and enjoyable. We learned valuable skills and shared laughs with a very engaging Japanese trainer through this Business Analyst training. Besides learning practical techniques, we got to see how professionals in Japan work with clear logic and how negotiation can be more creative than expected. Logical Thinking – Clear Communication Starts with Clear Thinking This part of the Business Analyst training session wasn’t about boring theories. Instead, it focused on how BAs can share ideas in ways that clients can easily understand. The goal was to avoid confusion when people understand the same message in different ways. One key idea the trainer shared was: 一文一義 (Ichi-bun Ichi-gi) – "One sentence, one idea." This means not putting too many ideas into one sentence; keep it simple to avoid confusion. The trainer reminded us: “The best communication is not using big words or complex grammar, but explaining difficult things in the simplest way.” In project discussions, what matters most is being concise, clear, and convincing, not using overly complex or lengthy sentences. One powerful tool we learned is the Pyramid Structure, a way to organize ideas clearly: Top-down communication: Start with the conclusion first, then give reasons.MECE: Ideas should not overlap, and together they must cover all important points. The Pyramid has 3 parts: Main MessageThe key point you want to say.Say it at the beginning.Key Points2–4 supporting reasons.Supporting EvidenceFacts, examples, numbers, or specific details. We practiced this method with the question:"What are the strengths of SupremeTech when promoting our brand?"  Everyone was surprised by how much clearer and more logical the answers became. Negotiation – Helping Clients Discover Their Real Needs Next, we moved into negotiation skills. The trainer gave us two surprising facts: Most clients don’t know exactly what they need at the start.Between 70% and 80% of buying decisions are made during the discussion process. As BAs, how can we help clients realize what they actually need, even if they haven’t explicitly stated it? We learned two useful techniques: 1. SPIN Questions A 4-step method to guide the conversation: S – Situation: Understand the client’s current situation.P – Problem: Identify any issues they are facing.I – Implication: Explore the impact of these problems.N – Need-payoff: Show how a solution can help. 2. BAF Focuses on: Benefit: What the client gains.Advantage: Why it works well.Feature: What the product or service includes. We did a quick practice activity: “Sell this bag to a customer.” Each group played both the BA and the client in real-life scenarios. The room was filled with energy and laughter as teams realized that simply changing the way they asked questions helped clients discover new needs they hadn’t previously considered. Example using SPIN: S (Situation): “What kind of bag do you use now?”P (Problem): “Do you ever feel it’s too small or hard to match with outfits?”I (Implication): “Is it inconvenient if you have to switch bags for different occasions?”N (Need-payoff): “Would it help to have one stylish bag that fits everything and works for all events?” And then with BAF: B (Benefit): “You can use this bag for work, travel, or outings while staying stylish.”A (Advantage): “Many office workers choose this model for its flexibility.”F (Feature): “It has 3 compartments and is made of water-resistant material.” By using these techniques, BAs can help clients understand what they truly need and make more informed decisions. “Soft Skills” – The Secret Tools of Every BA Being a BA without soft skills is like being a superhero without a cape—it feels like something’s missing! From the Pyramid Structure to SPIN and BAF, these are the soft skills that help BAs feel more confident when interacting with clients. With these tools, you don’t just meet client needs—you impress them and build stronger trust. Have you “equipped” yourself with these skills yet?If not, don’t wait—try practicing them in your next Business Analyst training meeting!

              23/06/2025

              67

              Thu Phan T. H.

              Our culture

              +0

                BA Team’s Offsite Training Session: Boosting Logic and Negotiation Skills

                23/06/2025

                67

                Thu Phan T. H.

                Customize software background

                Want to customize a software for your business?

                Meet with us! Schedule a meeting with us!