Components are the fundamental, reusable building blocks of your project's user interface. They are pre-designed elements—ranging from foundational concepts like simple text and images to advanced components that can render entire features, such as a Product Detail Page.

Components in Shipcode come from three distinct sources, allowing you to build everything from core UI to highly specialized e-commerce features: Preset Components, Reusable Components, Library Components.

Basic Components (Launchpad Library)

These are the out-of-the-box, foundational components that are ready to use in every Shipcode project. They represent the core UI elements and common interactive patterns necessary for structuring any application:

• Basic Building Blocks: Elements like Text, Image, and the versatile container View are the essential starting points for every layout.
• Specialized Containers: Components such as Carousel, Grid, and Data Zone act as intelligent wrappers. They organize and manage their child components while adding complex functionality, like handling data display or specialized scrolling behavior.
• Form & Input: This set includes interactive components like Text Input, Selection Group, and Toggle that allow you to build complete forms and capture user data.

Reusable Components (Custom Components)

Reusable components, often called Custom Components, are modular UI elements that you design and save to your project's component library. You create them once and can share and update them across your entire application, ensuring consistency.

• Tip for Beginners: Start using Reusable Components as soon as you find yourself using the same element (like a button or a custom card design) more than a few times. This makes future design updates far more efficient.
• Managing Instances: When you place a component onto a layout, it is called a component instance. Instances inherit all changes from the main component, but you can apply an override to any instance property to customize it locally without affecting the rest of your project.

Library Components

These components are specialized libraries that integrate deeply with third-party services. They are designed to streamline development for a specific ecosystem.

The Shopify Starter Kit components are a prime example. Once enabled in your project, they provide production-ready, responsive UI elements that are pre-connected to your Shopify backend. They handle complex functionality—such as displaying product variants or managing a user's cart—out of the box.

• Examples: The Product Carousel for showcasing collections and the Web Header for a responsive navigation mega-menu are ready to use as soon as you connect your store's data.

Getting Started with Components

Components are assembled and organized within a Layout—an individual screen or section of your application's UI.

• Adding Components: Components can be added by dragging and dropping them from the Components Panel in the Left Sidebar onto the desired Layout on the Canvas.
• Configuration and Styling: Once a component is selected on the Canvas, you can configure its data and manage component-specific settings using the panels in the Right Sidebar, including the Appearance Panel and the Settings Panel.