Shopify Storefront

Take full control of your Shopify storefront with this library and create a more customizeable, more performant shopping cart in minutes. Stop fiddling with the challenges of liquid templates and expensive plugins from the app store. Clutch gives you all the features you love from the world's most powerful e-commerce platform, and none of the limitations.

---

Features

• 14 Ready-to-Use Page Templates: Jump-start your storefront with pre-built templates for homepages, product pages, collections, and checkout flows—all connected to your Shopify backend.
• 23 Customizable Sections: Quickly swap out entire blocks of your layout with our pre-built heros, collection carousels, product details, faqs, and more.
• Easy-to-Modify Style Guide: Create a cohesive look for your brand by customizing fonts, colors, and layouts that will instantly apply across your entire storefront.
• Smart Components with Customization Options: Use components such as product grids, carts, banners, and filters that you can easily fine-tune for functionality and layout.
• Seamless Integration with Shopify API: Connect effortlessly to your Shopify backend to synchronize product data, customer information, and orders in real-time.
• Headless Architecture for Maximum Performance: Leverage the power of Shopify’s headless plugin to deliver faster load times and smoother user experiences without being tied to Liquid templates.
• Drag-and-Drop Visual Builder: Build and customize your storefront without writing code — simply drag and drop elements in the Clutch visual builder.
• SEO-Optimized Templates and Components: Boost organic traffic with built-in SEO-friendly structures that align with best practices, automatically pulled in from your Shopify backend.
• Responsive Design Across Devices: Ensure your storefront looks great and performs well on desktop, tablet, and mobile screens with our mobile-first style guide.
• No Expensive Plugins Required: Avoid the hassle and costs of additional Shopify plugins — get all the essential functionality baked into the library.
• One-click Publishing and Updates: Deploy your customized storefront directly from the Clutch builder, with the ability to make real-time updates, earmark versions, and rollback instantly.

Quick Start Guide

Connect your Shopify backend to your Clutch Storefront

Install Headless plugin from the Shopify app store. The Headless plugin is free, but to use its features you are required to have a paid subscription in your Shopify account.

Within the Headless plugin's settings, from the Storefront API page, securely copy the Public access token.

For more detailed steps on configuring this plugin, check out their documentation here.

Also inside your Shopify account, go to Settings Domains and copy the domain you're currently using for your store.

Inside your Clutch project, make sure the Shopify Storefront library is installed. Then, in the Project Settings Shopify page, paste the Public access token as well as your Shopify domain. You can also set your Products Per Page from this screen.

That's it! Your Clutch storefront is now connected to your Shopify backend.

Customize your style guide

You can implement your brand style across your entire Shopify storefront in just a few clicks by modifying the style guide in your project.

Customize your page templates

The Shopify Storefront library has every page you need for a standard shopping cart already built for you. Beyond the branded style, you can shift and rearrange

Publish your Shopify storefront

---

Documentation

Page Templates

Home Page

Sections

Headers

Footers

Heros

Navbars

Pagination & Filters

Search

Product

Auth

Carts

Collection Products

Collection Headers

Collections

Related Products

Featured Products

Elements

To use this package in the visual builder, follow these steps:

1. Add Templates and Pages: Drag and drop templates and pages into your composition. Customize them to align with your brand's style and requirements.

2. Use Queries:

   • Add a Query to a Page: Integrate pre-built queries directly into your pages to fetch data from the Shopify backend.
   • Use Data Primitive: Utilize the data primitive to execute queries and retrieve necessary data from Shopify.

By following these steps, you can efficiently build and style your shop using the visual builder.

---

Elements

Money

Overview

The Money element is designed to format and display a monetary value. It allows users to specify the amount, the locale for formatting, the currency type, and the number of fraction digits to show. This element makes it easier to present currency in different formats based on user preferences or regional settings.

Purpose

The Money element takes in various props related to currency formatting and returns a formatted string representing the amount of money. The formatting is based on the provided locale, currency, and minimum number of decimal places. If no values are provided for these, it defaults to standard U.S. formatting (en-US locale and USD currency).

Props

Prop	Type	Default	Description
data	object	-	The price object for the product. This should include the price and currencyCode