The Shopify Starter Kit Library Components were created to pair seamlessly with your shopify backend. To use the Shopify Starter Kit components in your project, you’ll first need to install the library and connect your Shopify store’s data.

• All components in the Starter Kit are responsive and work across all device sizes
• The Shopify Starter Kit Components come from an external project. If you want to control the main component across your project, we recommend detaching the Component and creating a new main component that you can customize, control and reuse across your project 
• Some components require updates to your Shopify store to function correctly. These are noted in each section under “Shopify Prerequisites.”
• While all components are connected to Shopify, they don’t all behave the same—some reflect the final live experience, while others are meant for previewing different data or states as you design.

Understanding Configuration:

The Starter Kit Components are designed with Shopify data directly in Shipcode, but not all configurations work the same way. 

LIVE DATA

Some components—like the Product Carousel—use your Shopify configuration to control exactly what appears in the live experience. For example, setting a collection handle pulls in those specific products both in the layout and on your site.

STYLING PREVIEW

Some components—like the Web Header—let you define data inputs purely for previewing while you design. These inputs won’t appear on your live site—they’re just there to help you style in context.