Dev Introduction

Build components with Parcelify

Parcelify Storefront Components allow you to add new features and functionality to a merchant’s storefront with minimal coding and styling.

How do I get started?

Start by Reviewing our APIs to see what data and functions we expose for your new component to use. Once you have one in mind:

1. Login to Parcelify then scroll down to our Storefront Components
2. (optional) Select the theme you wish to install this Component to
3. Click [Install] on the component you wish to customize
4. Next, Click [Edit Theme] to open the Shopify theme editor
5. Insert the provided code snippet where you would like this Component to appear
   Example snippet from our shipping rate calculator:
   

   {% if content_for_header contains 'cdn.parcelifyapp.com\/parcelify-components' %}
     {% render 'parcelify-rate-calculator' %}
   {% endif %}
   

6. You may now begin customizing the component in the Shopify theme editor. The files we upload when you install a component are listed under Assets in the Component API and all begin with parcelify-.
   For an example from our shipping rate calculator, Click Here
   To customize, open your component and modify the markup within the Parcelify Component HTML tags
7. Save your work, refresh your Shop page, and refresh the storefront website to see your changes!

How does it work?

Parcelify installs a ScriptTag into your site that renders your customized components by exposing APIs. The ScriptTag loads and components are rendered asynchronously to ensure your store’s load times are not impacted. This ScriptTag exposes the component APIs’ variables and methods that you may use in your own custom Components.

Built on Alpine.js

Each Storefront Component is a registered Web Component that is built on Alpine.js. We chose this framework because it provides a lightweight yet powerful reactive UI experience. Access the component’s variables and methods directly from your markdown using Alpine.js syntax and the component will automatically update as changes are made. You may even add-in your own scripts!

Style with typical CSS

Since all components are composed of regular HTML elements, you can style them with CSS as you would any other webpage.

Want to know more?

Continue reading by clicking Anatomy of a Storefront Component below: