3oneseven Custom Coding

At 3oneseven, custom coding isn’t just about writing code: it’s about creating tailored features that go beyond Shopify’s standard options. The goal is to technically reinforce the brand identity and maximize conversion for the client.

Instead of using rigid “off-the-shelf” themes, 3oneseven develops custom Liquid templates.

Performance: Code is streamlined to achieve extremely fast loading times (important for SEO and UX).

Interactive sections: Specialized product configurators or interactive comparison tables tailored specifically to the product range.

To ensure maximum flexibility, 3oneseven runs on modern web technologies:

Frameworks: Use of tools such as Hydrogen (Shopify’s React-based framework) or Next.js.

Third-party systems: Seamless integration of ERP, CRM, or PIM systems via custom API interfaces to automate data flows.

3oneseven key differentiator is coding for AI integrations:

Custom MCP Server: Programming server logic that enables AI models to “understand” store data (inventory, metadata) in real time.

Agentic UI: Development of code snippets that enable an AI to dynamically display specific UI components (e.g., a shopping cart button) during a chat.

Using Shopify Functions (and previously Scripts), 3oneseven customizes the checkout process:

Discount logic: Complex B2B pricing or bundle logic that standard apps cannot handle.

Validation: Custom fields or validation rules for specific shipping or payment methods.

Subtle movements are programmed using JavaScript/GSAP or CSS animations:

Storytelling: As in the VELLO example, mechanical processes (such as folding) are brought to life through scroll-based animations (scrollytelling).

The advantage: Non dependent on third-party apps, which reduces monthly fixed costs and improves the store owner’s stability.

With the integration of the Model Context Protocol (MCP), 3oneseven is pioneering new principles for aesthetics and functionality.

Agentic Commerce: AI models should not only be able to “see” the store, but also actively interact within it (e.g., select products or initiate checkouts).

Security & Predictability: Unlike rigid APIs, 3oneseven relies on a system that ensures AI interactions remain controlled, readable, and transparent to the user.

At 3oneseven, design is always considered within the context of sales, performance, and the business model.

Mobile-First: Since the first point of contact often occurs via a smartphone, uncompromising optimization for mobile devices (load time, usability) is a core principle.

Data-Driven ROI: Decisions are based on data analysis and A/B testing, with the goal of measurably increasing the conversion rate and ROI (Return on Investment) – often with the aim of doubling the ROI.

Accessibility: A shop must be accessible to all users across all devices.

Clarity & Honesty: The design should highlight the shop’s structure and be self-explanatory. It must not create false expectations.

Durability: Instead of following fleeting trends, the agency focuses on timeless design that won’t look outdated even years from now.

Less is more: The focus is on the essential aspects; unnecessary clutter is removed to enhance functionality.

Custom coding is used in the background:
Store Locator: A custom-programmed map with an API connection to Google Maps that allows users to filter through thousands of points of sale worldwide.

Pricing Logic: Using Shopify Functions, we implemented complex discount and bundle logic that goes beyond what standard apps offer (e.g., “Starter Set Configurator”).

To handle extreme traffic spikes (e.g., during TV campaigns or Black Friday), the architecture was optimized so that the front end (the visible part of the site) responds extremely quickly, while the complex logic in the background (Shopify core) remains stable.

The result: a digital brand experience that reflects the store’s commitment to luxury while simultaneously overcoming the technical hurdle (“What does it smell like?”) through smart user guidance (UX).

Case study

3oneseven did implement the scent logic for Maison Berger through a combination of data structuring and custom front-end logic rather than using standard filters.

The goal: to translate the sense of smell into a logical, digital decision-making tool.

Instead of relying solely on categories, each product in Shopify was enhanced with detailed meta fields.
Fragrance attributes: Each fragrance has been assigned values for top note, middle note, and base note.

Intensity scale: A numerical value (1–5) that defines the strength of the fragrance.

Fragrance family mapping: Linking products to clusters such as “Oriental”, “Floral”, or “Fresh”.

The technical magic lies in a custom JavaScript algorithm on the front end:

Elimination principle: An interactive quiz immediately filters out unsuitable fragrance families.

Weighting: The logic calculates a “match score” based on the user’s answers. Users who select “relaxation” are shown lavender notes with higher priority.

Real-time filtering: Since all data is already available via the Shopify Storefront API or pre-installed JSON objects in the browser, filtering occurs without reloading the page (instant feedback).

The logic runs intuitive with special developed UI elements:

Interactive Fragrance Wheel: An element built using SVG and CSS animations that visualizes the relationships between fragrances.

Dynamic Badges: Automatically generated icons that display the fragrance intensity directly on the product tile, based on the Metafield data.

With the Model Context Protocol (MCP), 3oneseven is now taking things a step further:

Instead of just getting premade answers, customers can now describe what they’re looking for within the chat window:

I’m looking for something that smells like summer rain at the beach.

The MCP server translates this natural language into technical Metafield parameters and immediately delivers the right product match: including a product UI card with direct checkout functions into the chat.