DOCSEARCHbyAlgolia
Submit Docs

YouCan Themes Documentation

website·Indexed 36 days ago

https://developer.youcan.shop/

Guides and technical references for building and customizing storefront themes using Liquid. Covers theme architecture, layouts, templates, sections, blocks, and configuration files like settings_schema.json and settings_data.json, along with best practices for performance, accessibility, and the theme editor.

Tokens
117.6K
Snippets
687
Records
926
Agent score
60%

What's inside YouCan

  1. Overview of YouCan Theme Development

    YouCan storefronts are built using Liquid (the theme templating language), HTML, CSS, JavaScript, and JSON. Developers can begin by using the default starter theme or by importing an existing theme into a development store.

  2. Overview of the Celeste Design System

    Celeste is the official design system and component library for YouCan. It is built specifically for Vue 3 and provides a consistent set of design tokens, icons, and components to ensure interfaces align with the YouCan ecosystem. The system follows a 'design tokens first' approach, where colors, spacing, shadows, and typography serve as the single source of truth for both the component library and application styles.

  3. Overview of YouCan UI component library

    YouCan UI is a component library maintained by YouCan, designed with a focus on simplicity and composability. The library prioritizes the use of native HTML APIs over complex custom component APIs to ensure consistent implementation and behavior across underlying elements.
    npm install @youcan/ui-vue3

  4. Overview of the Celeste Design System

    Celeste is a design system maintained by YouCan, consisting of three core pillars: design tokens for visual decisions, a dedicated icon set, and a Vue 3 component library. The library is designed with a small API surface, prioritizing composability and native HTML behavior over custom reimplementations.

  5. Overview of the YouCan Pay REST API

    The YouCan Pay API is a REST-based service that allows applications to integrate with YouCan Pay services. It supports both form-encoded and JSON-encoded request bodies and returns structured JSON responses. The API utilizes standard HTTP status codes to communicate the success or failure of requests.

  6. Overview of Embedded App Authentication flow

    Embedded apps load inside the YouCan Seller Area as an iframe. Unlike external apps, they do not receive an authorization code in the URL. Instead, the frontend uses the Qantra communication bridge to obtain a short-lived JWT (Session Token), which the app server then exchanges for a long-lived Store Access Token used to call the YouCan Store Admin API.

  8. Overview of YouCan Apps Billing

    Apps Billing allows partners with approved applications to charge sellers directly through YouCan. YouCan manages the collection of payments from the seller's balance or payment method and handles chargebacks. Revenue is accumulated in the Partner balance and can be requested as a payout via the Partners dashboard at /dashboard/apps/:id/insights once the balance reaches $100.

  9. Overview of Qantra communication bridge

    Qantra is a TypeScript API that acts as a communication bridge between an embedded app (running in an iframe) and the YouCan Seller Area (the parent window). It abstracts postMessage calls into a clean API. Note that Qantra components and APIs do not render UI inside the embedded app; instead, they trigger rendering (such as toasts or resource pickers) within the Seller Area.

  10. Overview of the YouCan MCP server

    The YouCan MCP server enables AI assistants to read and modify YouCan store data using the Store Admin API. Supported entities include products, orders, customers, pages, coupons, and shipping. The server uses Streamable HTTP transport and OAuth for authentication, granting full access to the selected store upon user approval.

  11. Overview of the Origins reference theme

    Origins is the reference theme for YouCan, designed for high performance, customizability, and modern aesthetics. It features a mobile-first approach, a minimal CSS footprint, and custom web components designed to prevent layout shifts. Key capabilities include complete RTL (Right-to-Left) support and a component-based structure using sections and blocks to allow sellers to create unique page layouts.

  12. Introduction to Liquid in YouCan themes

    Liquid is the templating language used to build YouCan themes. It allows developers to combine static HTML with logic and dynamic data, enabling a single theme to render unique content for different products, collections, or carts without requiring application-level code.
    <h1>{{ product.name }}</h1>

{% if product.available %}
  <span>{{ product.price | money }}</span>
{% else %}
  <span>{{ 'product.sold_out' | t }}</span>
{% endif %}