# Customised Squarespace Template

{% hint style="info" %}
This page assumes you have programming knowledge about Squarespace development. Squarespace's developer quick start documentation can be found [here](https://developers.squarespace.com/quick-start).
{% endhint %}

### Prerequisites

1. Create a Squarespace site with a template that can have access to developer mode.
   1. [v7.0 Squarespace templates](https://www.squarespace.com/templates/browse/v7/)
2. Set up your Squarespace development environment.
   1. [Squarespace developer quick start](https://developers.squarespace.com/quick-start)
3. To publish your site at a later date, you will need a Business or a Commerce plan in order to keep the custom code.

The following documentation assumes a simple site with one `site.region` file.

### Installing Widgets

Each widget comes with a Javascript and CSS file.  To add a widget to your website, you will need to add its corresponding Javascript and CSS in the `head` tag of your `site.region` file.

Copy and paste the code below into the code snippet box**.** 

```html
<!-- 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
```

{% hint style="warning" %}
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.
{% endhint %}

You can find a list of widgets, versions and links [here](/manifold-for-developers/resources/widgets/directory.md).

### Using Widgets

For more detailed examples, see the [Manifold templates repository](https://github.com/manifoldxyz/manifold-templates/tree/main/squarespace/developer/marketplace_page).

#### Through HTML

Use widgets as you would through regular HTML by providing a `div` the necessary `data-`attributes of the widget you'd like to inject. Place these `div` blocks in the `*.block` files of your Squarespace template.

#### Through Squarespace's editor

You can include and display Manifold Gallery listings in a specific way in predefined Squarespace collections through the CMS.

<figure><img src="/files/3jlb8sfhKJjjRXBnznlH" alt=""><figcaption><p>Custom post type appearing as an option in Squarespace CMS</p></figcaption></figure>

To do so, you have to:

1. define your custom Manifold Gallery listing type;
2. add/modify the collection's configuration file to accept the new, custom type;
3. add/modify the collection's `.item` and/or `.list` template(s) to display what you want to display by using the custom type's information.

This leverages [Squarespace's custom post types](https://developers.squarespace.com/custom-post-types).

**1 - Define a custom Manifold Gallery listing type**

In `template.conf`, add the following type definition in the `customTypes` array:

```javascript
{
  "title": "Manifold Gallery Listing", // CMS display name
  "name": "manifoldGalleryListing",
  "base": "image",
  "fields": [
    {
      "name": "listingId",
      "title": "Listing ID",
      "type": "text"
    },
    {
      "name": "network",
      "title": "Network",
      "type": "text"
    },
    {
      "name": "version",
      "title": "Marketplace Version",
      "type": "text"
    },
    {
      "name": "useListingName",
      "title": "Use On-Chain Listing Name",
      "type": "checkbox"
    },
    {
      "name": "useListingDescription",
      "title": "Use On-Chain Listing Description",
      "type": "checkbox"
    }
  ]
}
```

**2 - Add/Modify the collection's configuration**

Add `manifoldGalleryListing` to the list of accepted types in the `.conf` file of the collection you want to modify.

```json
// gallery.conf
{
  "title" : "Gallery",
  "ordering" : "user-orderable",
  "pageSize" : 9999,
  "addText" : "Add Images or Videos",
  "icon" : "gallery",
  "acceptTypes" : [ "image", "video", "manifoldGalleryListing" ]
}
```

**3 - Add/Modify the collection's template file(s)**

In the `.item` and/or the `.list` template file(s), use the custom properties to display the custom post type the way you want.

```html
<!-- gallery.list -->
<!-- ... -->
<div id="slideshow">
  {.repeated section items}
    <div class="slide" data-slide-id="{id}" data-slide-url="{urlId}">
      {.equal? customContent.customType "manifoldGalleryListing"}
        {.section customContent}
          <div data-widget="m-listing-image-expandable" data-id="{@.listingId}" data-network="{@.network}" data-version="{@.version}"></div>
        {.end}
      {.or}
        {.image?}
          <img {@|image-meta} data-load="false"/>
          <noscript><img src="{assetUrl}?format=1500w"></noscript>
        {.end}
        {.video?}{@|video}{.end}
      {.end}
    </div>
  {.end}
</div>
<!-- ... -->
```

### Styling

Widgets are styled using standard CSS. As Less is supported by Squarespace, you can also write styles using Less.

Tweaks are also integrable with Manifold widget code as long as they are properly defined. You can find more about Squarespace tweaks [here](https://developers.squarespace.com/style-editor).

See the [Manifold templates repository](https://github.com/manifoldxyz/manifold-templates/tree/main/squarespace/developer/marketplace_page) for examples on how to include custom Manifold widget styling.

### Examples

Examples of commonly used features can be found [here](https://github.com/manifoldxyz/manifold-templates/tree/main/squarespace/). Please feel free to use this as a starting point to building your own dApp.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.manifold.xyz/manifold-for-developers/guides/squarespace/customised-squarespace-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.