LogoLogo
Manifold for Developers
Manifold for Developers
  • Introduction
  • Shopify Merch Bridge
    • Overview
    • Tutorial
      • Step 1: Product Gate Setup
        • 1.1: Configure the Product
        • 1.2: Install Manifold Merch Bridge
        • 1.2: Create a New Product Gate
        • 1.3: Link a Product to the Gate
        • 1.4: Add Rules
      • Step 2: Store Theme Setup
        • 2.1 The Theme Editor
        • 2.2 Product Page Setup
        • 2.3 Cart Page Setup
    • Advanced Configuration
    • FAQ / Error Help
    • Reference
      • Product and Gate Configuration
        • Shopify Products
        • Product Gates
          • Gate Products
          • Rules
      • Custom Themes
      • Updating to the Latest Version
      • UI Configuration Options
      • Advanced Usage
      • Common Issues
  • Guides
    • Getting Started
    • HTML
    • React
    • NextJS
    • Vue
    • Wix
    • Squarespace
      • Simple Squarespace Site
      • Customised Squarespace Template
  • Resources
    • Apps
      • Grant Types
    • Widgets
      • Directory
      • Manifold CSS Variables
        • Scheme Utility Classes
        • List of Manifold CSS Variables
      • Connect Widget
        • Blockchain Interaction
        • Wallet Authentication
        • Data Client
          • NFT Information Retrieval
            • getNFT
            • getNFTsOfOwner
            • ownerHasNFT
            • getCollectors
          • Data Storage and Retrieval
        • Advanced Configuration
        • Customization & Styling
        • Automatic Error Handling
      • Campaign Widget
        • Campaign Creation
          • Questionnaire
        • Campaign Progress
        • Customization & Styling
      • Curation Widget
      • Marketplace Widgets
        • Widgets
          • Data Attributes
          • Layout Widgets
          • Card Widgets
          • Listing Widgets
        • Window Events
        • Troubleshooting
        • Customization & Styling
        • Version Change Notes
          • 3.2.1 - CSS Selector Changes
          • 3.1.1 - CSS Selector Changes
      • Claim Widgets
        • Widgets
          • Data Attributes
          • Complete Claim Widget
          • Buy Button Only Widget
          • Mint Count Widget
        • Troubleshooting
        • Customization & Styling
        • Version Change Notes
          • 1.7.0, 1.7.1 - CSS Selector Changes
      • Restricted Token Widget
        • Customization & Styling
      • Wallet Identity Widget
        • Customization & Styling
      • Subscription Widget
      • 6551 Display Widget
    • Manifold Ethereum Provider
  • Tools and APIs
    • Merkle Tree Tool
    • Snapshot Tool
    • Discord Tools
    • Server-Side Session Authentication
      • Signature Grant
      • Authorization Code Grant
  • Smart Contracts
    • Manifold Creator
      • Contracts
        • Creator Core
          • Common Functions
          • ERC721 Functions
          • ERC1155 Functions
        • Extensions
          • Extensions Functions
          • Extensions Examples
          • Extensions Deployment Guide
            • Dynamic NFT Extension
            • Lazy Mint Extension ERC1155
            • Lazy Mint Extension ERC721
        • Mint Permissions
          • Mint Permissions Functions
      • Prior Versions
        • 1.0.x
          • Creator Core
            • Common Functions
            • ERC721 Functions
            • ERC1155 Functions
          • Extensions
            • Extensions Functions
            • Extensions Examples
            • Extensions Deployment Guide
              • Dynamic NFT Extension
              • Lazy Mint Extension ERC1155
              • Lazy Mint Extension ERC721
          • Mint Permissions
            • Mint Permissions Functions
        • 2.0.x
          • Creator Core
            • Common Functions
            • ERC721 Functions
            • ERC1155 Functions
          • Extensions
            • Extensions Functions
            • Extensions Examples
            • Extensions Deployment Guide
              • Dynamic NFT Extension
              • Lazy Mint Extension ERC1155
              • Lazy Mint Extension ERC721
          • Mint Permissions
            • Mint Permissions Functions
    • Marketplace
      • Identity Verifier
    • Royalty Registry
  • Contact Us
Powered by GitBook
On this page
  • Prerequisites
  • Installing Widgets
  • Using Widgets
  • Styling
  • Examples

Was this helpful?

  1. Guides
  2. Squarespace

Simple Squarespace Site

Last updated 1 year ago

Was this helpful?

Prerequisites

  1. Create a site on Squarespace.

  2. Upgrade your Squarespace account to a Business or a Commerce plan (to use the feature).

Installing Widgets

Each widget comes with a Javascript and CSS file. To add the widgets to your website, you will need to add its corresponding Javascript and CSS as part of your site/page in the Settings => Advanced => Code Injection tab of your Squarespace site.

In the HEADER text field, paste the following script and link tags and hit "Save" in the top-left corner:

<!-- connect widget -->
<script async src="https://connect.manifoldxyz.dev/2.0.13/connect.umd.min.js"></script>
<link rel="stylesheet" href="https://connect.manifoldxyz.dev/2.0.13/connect.css" />
<!-- marketplace widget -->
<script async src="https://marketplace.manifoldxyz.dev/latest/marketplace.umd.min.js"></script>
<link rel="stylesheet" href="https://marketplace.manifoldxyz.dev/latest/marketplace.css" />

The uri for the Javascript and CSS for each widget is as follows:

https://<WIDGET_NAME>.manifoldxyz.dev/<WIDGET_VERSION>/<WIDGET_NAME>.umd.min.js
https://<WIDGET_NAME>.manifoldxyz.dev/<WIDGET_VERSION>/<WIDGET_NAME>.css

If you always want the latest version, use latest for the <WIDGET_VERSION>. However, due to the changing nature of the codebase, it is possible that the "newer" latest is no longer compatible with the "previous" latest used to develop the app. It is thus recommended that you use a specific version of a widget for consistent results.

Alternatively, if you want to add widgets only on specific pages of your site, you can opt for a page-specific header injection.

  1. Open the page settings by hovering over the page on which you want to add the code and clicking the cog wheel (⚙️).

2. Go to the “Advanced” tab of the settings pop-up.ad

3. Paste the script and link tags in the textfield under the Page header code injection tab.

4. Click “Save” on the top-left corner.

Using Widgets

Inserting widgets onto your Squarespace site is a simple process.

  1. Select the page on which you'd like to display a widget.

  2. Click “Edit” to edit the page.

<div
    data-widget="m-listing-name"
    data-id="19"
    data-network="5">
</div>

4. Then Click "Save" on the top-left corner when you're done.

The preview may take some time to load. If you don't see your widgets, try opening the page outside of the editor, or refreshing.

Example result

Used widgets:

  • Left: m-listing-image-expandable

  • Right:

    • Top: m-listing-name

    • Middle: A Squarespace text block with "Description:" and below that, a code block for m-listing-description

    • Bottom: A Squarespace button block

Styling

Widgets are styled using standard CSS. You can write your own styles by adding custom CSS rules in the Design => Custom CSS texfield on your Squarespace page.

Some widgets may include links pointing to additional stylesheets. These additional stylesheets (usually named <WIDGET_NAME>.manifold-light.css or <WIDGET_NAME>.manifold-dark.css) build on top of the base stylesheet (usually named <WIDGET_NAME>.css), thus the additional stylesheets should be included after the base one.

Examples

You can find a list of widgets, versions and links .

Add your desired marketplace widget through the “code” blocks.

You can find a list of widgets, versions and links .

Examples of commonly used features can be found . Please feel free to use this as a starting point to building your own dApp.

here
here
here
Code Injection
Settings > Advanced > Code Injection
Edit page
Squarespace page with some Marketplace listing widgets