Documentation Storefront ComponentsIntroduction

Introduction to Parcelify Storefront Components

If you’re anything like us, you care deeply about the buyer experience. You know that the easier you make it to learn about what products, specials, and what rates are available, the easier it is to connect people to the things they actually want to buy!

Parcelify components are designed to provide this information, the first of which is our Shipping Rate Calculator. With it you can show your customers what rates are available before they check out:

..but this feature is so much more than a rate calculator! Parcelify Components are built in a way that you can easily customize or develop your own using the information we expose and just a little Alpine.js.

To see what components we currently offer, click here

Enabling components

You can find our components at the bottom of your Parcelify front page. Navigate to your Shopify admin panel, select Apps, click or type Parcelify, then scroll down.

You are able to select which theme you install components into. Your shop’s active theme will have the text (Published) next to it and is selected by default.

Once you have your desired theme selected, browse through our available components until you find one you wish to add.

Start by clicking the green Install button on the component. This step will upload the files necessary for you to include the component in your theme but does not make any changes to the appearance of your site.

Next, you will be presented with the following modal:

If the [Do it for me] button is active, you can use it to place the component at a default location we’ve selected. The button will only be active if our code has determined it is safe to place automatically, so take advantage of it! Once you click [Do it for me], the button will change into a link to the page we installed this component to so you can view it immediately.

Otherwise, you will need to place the code snippet provided in your theme where you wish the component to appear based on your shop’s needs and design. We suggest placing components where your users are most likely to see and expect the component to be!

Example installation

Let’s assume you are installing our Shipping Rate Calculator. This component will show your customers what shipping rates are available based on what is currently in their cart and the location information they provide. We will add this calculator right above the checkout button.

Start by clicking install next to Rate Calculator on the main Parcelify page.

If the [Do it for me] button is active, go ahead and click it. You’re all done!

Otherwise, in our installation modal, copy the text under CODE SNIPPET

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

At the bottom of the modal, click [Edit ] to open the Shopify theme editor.

Moving along, find where in your theme you wish to place this component. In this example we’re using the Debut theme, so we’ll open cart-template.liquid in the editor.

Please note: your theme’s filenames and code structure may vary from the example in this tutorial. Always take caution when making theme modifications and preview your shop after making any changes.

Since the checkout controls are towards the bottom of the cart page, we scroll down the template file and see a section called Cart Footer. Nested within is a class called cart__submit-controls. We want this component to appear above the controls, so we drop the code snippet in right above and save this theme. That’s it!

Fully installed component

Once a component is installed in Parcelify and you’ve told us where you want it to appear, open up your shop and give it a try. Here’s what the component in the previous example looks like at checkout:

Now that you know how to install and place components, continue to the next page to see the components we’ve made for you!