fluid
Fluid is a Hydrogen theme that lets you easily build Shopify headless storefronts by organizing your content with Sanity.
File Explorer
Download Latest Version (.zip)- hydrogen-react-router.mdc
- kebab-filenames.mdc
- quality-checks.mdc
- oxygen-pre-build.sh
- claude-code-review.yml
- claude.yml
- oxygen-deployment-1000032828.yml
- pipeline.yml
- dependabot.yml
- extensions.json
- favicon.ico
- account-address-book.tsx
- account-details.tsx
- order-card.tsx
- price-block.tsx
- shopify-description-block.tsx
- shopify-title-block.tsx
- cart-details.tsx
- cart-discounts.tsx
- cart-empty.tsx
- cart-line-item.tsx
- cart-lines.tsx
- index.tsx
- collection-filter.tsx
- collection-sort.tsx
- filter-markup.tsx
- sort-filter-layout.tsx
- sort-mobile-drawer.client.tsx
- sort-mobile-trigger.tsx
- content-alignment.ts
- header.ts
- footer-social-links-only.tsx
- icon-account.tsx
- icon-arrow-right.tsx
- icon-bag.tsx
- icon-check.tsx
- icon-chevron.tsx
- icon-circle.tsx
- icon-close.tsx
- icon-external.tsx
- icon-filters.tsx
- icon-loader.tsx
- icon-menu.tsx
- icon-remove.tsx
- icon-social.tsx
- icon-sort.tsx
- icon-x-mark.tsx
- index.tsx
- announcement-bar.tsx
- cart-drawer-wrapper.tsx
- cart-drawer.client.tsx
- country-selector.tsx
- footer.tsx
- header-logo.tsx
- header.tsx
- index.tsx
- motion.tsx
- navigation-progress-bar.client.tsx
- desktop-navigation.tsx
- mobile-navigation-trigger.tsx
- mobile-navigation.client.tsx
- nested-navigation.tsx
- add-to-cart-form.tsx
- media-gallery.tsx
- product-card-grid.tsx
- product-card.tsx
- product-details.tsx
- product-form.tsx
- product-provider.tsx
- related-products.tsx
- shop-pay.client.tsx
- variant-price.tsx
- variant-selector.tsx
- sanity-external-link.tsx
- sanity-internal-link.tsx
- button-block.tsx
- external-link-annotation.tsx
- image-block.tsx
- internal-link-annotation.tsx
- rich-text-layout.tsx
- clean-string.tsx
- sanity-image.tsx
- toggle-preview-mode.tsx
- visual-editing.client.tsx
- carousel-section.tsx
- collection-banner-section.tsx
- collection-list-section.tsx
- collection-product-grid-section.tsx
- featured-collection-section.tsx
- featured-product-section.tsx
- image-banner-section.tsx
- product-information-section.tsx
- related-products-section.tsx
- richtext-section.tsx
- accordion.tsx
- badge.tsx
- button.tsx
- card.tsx
- carousel.tsx
- checkbox.tsx
- dialog.tsx
- drawer.tsx
- dropdow-menu.tsx
- input.tsx
- label.tsx
- navigation-menu.tsx
- popover.tsx
- radio-group.tsx
- scroll-area.tsx
- select.tsx
- banner.tsx
- client-only.tsx
- cms-section.tsx
- collection-card.tsx
- collection-list-grid.tsx
- css-vars.tsx
- custom-analytics.tsx
- fonts.tsx
- progressive-motion.tsx
- quantity-selector.tsx
- sections-renderer.tsx
- shopify-image.tsx
- shopify-money.tsx
- skeleton.tsx
- social-media.tsx
- tailwind-indicator.tsx
- footers.ts
- fragments.ts
- links.ts
- queries.ts
- sections.ts
- utils.ts
- fragments.ts
- mutations.ts
- queries.ts
- cache.ts
- queries.ts
- use-bounded-scroll.tsx
- use-cart-fetchers.tsx
- use-colors-css-vars.tsx
- use-device.tsx
- use-encode-data-attribute.ts
- use-hydrated.tsx
- use-is-dev.tsx
- use-is-in-iframe.tsx
- use-locale-path.tsx
- use-optimistic-navigation-data.tsx
- use-sanity-theme-content.tsx
- use-settings-css-vars.tsx
- sanity-client.server.ts
- sanity.server.ts
- sanity.session.server.ts
- utils.ts
- context.ts
- env.server.ts
- fonts.ts
- generate-favicon-urls.ts
- hydrogen.session.server.ts
- meta.ts
- motion-features.client.ts
- resolve-shopify-promises.ts
- section-resolver.ts
- seo.server.ts
- seo.ts
- shopify-collection.ts
- utils.ts
- route.tsx
- sanity-studio.client.tsx
- studio.css
- ($locale).$.tsx
- ($locale).account.$.tsx
- ($locale).account.address.$id.tsx
- ($locale).account.edit.tsx
- ($locale).account.orders.$id.tsx
- ($locale).account.tsx
- ($locale).account_.authorize.tsx
- ($locale).account_.login.tsx
- ($locale).account_.logout.tsx
- ($locale).cart.tsx
- ($locale).collections.$collectionHandle.tsx
- ($locale).collections._index.tsx
- ($locale).collections.all.tsx
- ($locale).products.$productHandle.tsx
- ($locale).products._index.tsx
- [robots.txt].tsx
- _index.tsx
- sanity-preview.tsx
- blog-icon.tsx
- collection-tag-icon.tsx
- page-icon.tsx
- palette-icon.tsx
- preview-icon.tsx
- shopify-icon.tsx
- tag-icon.tsx
- collection-hidden.tsx
- placeholder-string.tsx
- product-hidden.tsx
- product-variant-input.tsx
- proxy-string.tsx
- shopify-document-status.tsx
- array-max-items.tsx
- array-max-rule.tsx
- color-picker-input.tsx
- color-scheme.tsx
- range-slider-input.tsx
- seo-field.tsx
- constants.ts
- index.ts
- shopify-delete.tsx
- shopify-link.tsx
- studio-layout.tsx
- types.ts
- color-picker.ts
- range-slider.ts
- locations.ts
- blog-post.ts
- collection-template.tsx
- collection.tsx
- color.ts
- font.ts
- page.ts
- product-template.tsx
- product-variant.tsx
- product.tsx
- font-asset.ts
- font-category.ts
- social-links-only.tsx
- announcement-bar.ts
- aspect-ratios.ts
- banner-richtext.tsx
- content-alignment.ts
- content-position.ts
- footers-list.ts
- padding.ts
- product-richtext.tsx
- richtext.tsx
- section-settings.ts
- sections-list.ts
- seo.ts
- anchor.ts
- external-link.ts
- header-navigation.ts
- internal-button.tsx
- internal-link.ts
- link.ts
- nested-navigation.ts
- carousel-section.tsx
- collection-banner.tsx
- collection-list-section.tsx
- collection-product-grid.tsx
- featured-collection-section.tsx
- featured-product-section.tsx
- image-banner-section.ts
- product-information-section.tsx
- related-products-section.tsx
- richtext-section.tsx
- inventory.ts
- options.ts
- placeholder-string.ts
- price-range.ts
- product-with-variant.tsx
- proxy-string.ts
- shopify-collection-rule.ts
- shopify-collection.ts
- shopify-product-variant.ts
- shopify-product.ts
- footer.ts
- header.ts
- home.ts
- settings.ts
- theme-content.ts
- index.ts
- create-cors-origin.ts
- create-initial-documents.ts
- create-viewer-token.ts
- initial-documents-values.ts
- initial-singletons-values.ts
- package.json
- collection-structure.ts
- index.ts
- product-structure.ts
- singletons.ts
- define-structure.ts
- get-price-range.ts
- set-as-default-validation.ts
- slug.ts
- config.ts
- constants.ts
- tailwind.css
- entry.client.tsx
- entry.server.tsx
- root.tsx
- routes.ts
- index.ts
- blogPostsSection.jpg
- carouselSection.jpg
- collapsibleContentSection.jpg
- collectionBannerSection.jpg
- collectionListSection.jpg
- collectionProductGridSection.jpg
- featuredCollectionSection.jpg
- featuredProductSection.jpg
- imageBannerSection.jpg
- imageWithTextSection.jpg
- multiColumnSection.jpg
- productInformationSection.jpg
- relatedProductsSection.jpg
- richtextSection.jpg
- socialLinksOnly.jpg
- videoSection.jpg
- index.ts
- sanity.generated.d.ts
- schema.json
- customeraccountapi.generated.d.ts
- storefrontapi.generated.d.ts
- index.ts
- .env.template
- .gitignore
- .graphqlrc.ts
- .npmrc
- .prettierignore
- codegen.ts
- components.json
- env.d.ts
- eslint.config.js
- LICENSE.md
- package.json
- pnpm-lock.yaml
- prettier.config.mjs
- react-router.config.ts
- README.md
- sanity.cli.ts
- sanity.config.ts
- server.ts
- tsconfig.json
- vite.config.ts
# Installation Guide
1. Get the code
git clone https://github.com/frontvibe/fluid
Downloads the entire project code from GitHub to your computer.
cd fluid
Moves into the project folder you just downloaded.
2. Node.js
Easy RecommendedPrerequisites
cd app/sanity/scripts
This project's files live in a subfolder, so move into it first.
npm install
Downloads and installs the libraries listed in package.json.
npm start
Starts the development/run server.
After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.
// repository documentation
Was this content helpful?
(0 ratings)