Customization
The Customizable Marketplace allows several levels of customization to adapt to different client's needs. Customization is managed by simply tuning a JSON file. Listed below are all the fields that can be customized.
Not all fields need to be set. Clients can set explicit values only for the fields required to overwrite the default values.
Base Customization
The following json excerpt explains the fields expected in the customization file. A comments-free JSON template is also provided for quickly bootstrapping a Marketplace.
{
"default_language":"es-es",
"icon": "favicon.ico",
"title": "Your Application Title",
"logo": "https://your_server.com/your_logo.svg",
"brand_primary_color": null,
"brand_secondary_color": null,
"nav": { // top navigation menu
"background_color": null,
"font_color": null,
"font_hover_color": null, // mouse over the font
"font_active_color": null,
"hide_metaverse": false, // nav menu option
"hide_market": false, // nav menu option
"hide_drops": false, // nav menu option
"hide_my_assets": false, // nav menu option
"hide_collections": false, // nav menu collections
"custom_pages": [{ // list with extra tabs showing html provided
"title": "Extra Tab Title",
"url": "https://your_server.com/to-be-shown-in-tab.html"
}]
},
"body": {
"background_color": null,
"font_color": null,
"font_family": null, // "https://your_server.com/font_name.woff2",
"headings_font_color": null,
"headings_font_family": null, // "https://your_server.com/font_name.woff2",
"muted_font_color": null // used to display faded text, usually in grey
},
"card": { // square or rectangle container that contains each asset
"background_color": null,
"font_color": null,
"headings_font_color": null,
"font_muted_color": null // used to display faded text, usually in grey
},
"settings": { // square or rectangle CARD container that contains each of the settings elements (web3addresses, cryptocurrencies, ...)
"background_color": null,
"font_color": null,
"headings_font_color": null,
"font_muted_color": null, // used to display faded text, usually in grey
"tab_font_color": null,
},
"modal": {
"background_color": null,
"font_color": null,
"headings_font_color": null,
"font_muted_color": null // used to display faded text, usually in grey
},
"button": { // application bootstrap buttons
"primary": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"outline_primary": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"secondary": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"outline_secondary": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"success": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"outline_success": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"danger": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"outline_danger": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"warning": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"outline_warning": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"info": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
}
"outline_info": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
}
},
"homepage": {
"image": "https://your_server.com/bnr1.png", // if no "iFrame" field is set, it shows this image...
"image_link": "https://your_server.com", // ...which redirects here on click.
"image_alt": "alt text for image",
"image_object_fit": "contain", // cover
"background_image": "/img/header-bg.png",
"background_gradient": null, // "linear-gradient(149.49deg, #25143B 57.41%, #4C297A 70.14%, #6B3AAB 81.46%)",
"background_position": "left",
"background_color": "white",
"main_title": "A marketplace in any currency",
"sub_title": "Art, music, anything digital",
"title_color": "white",
"buttons": {
"logged_in": {
"primary_button_link": "/myassets",
"primary_button_text": "My NFTs",
"secondary_button_link": "/assets",
"secondary_button_text": "Explore",
},
"logged_out": {
"primary_button_link": "/login",
"primary_button_text": "Get started",
"secondary_button_link": "/assets",
"secondary_button_text": "Explore",
},
"iframe": {
"url": null, // "https://ams3.digitaloceanspaces.com/freeverse/iframe.html",
"keys": null, // ["email"],
"publicKey": null, // "43c...6b",
"height": null, // '"500px",
"width": null, // "100%",
"margin": null, // "20px",
},
},
"drops": {
"showAvailableCount": true,
"collections": [ // The collections of the array will be shown as available
100,
101
]
},
"header": {
"primary": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
},
"secondary": {
"font_color": null,
"background_color": null,
"border_color": null
"hover": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"disabled": {
"font_color": null,
"background_color": null,
"border_color": null,
},
"active": {
"font_color": null,
"background_color": null,
"border_color": null,
},
}
}
"footer": {
"company_name": "Your Company",
"copyright": "© 2023 Your Company",
"background_color": null,
"description": null,
"links": [
{
"title": "About Your Company",
"url": "https://www.your_server.com/en/about"
},
{
"title": "Docs",
"url": "https://docs.your_server.com/"
},
{
"title": "Contact",
"url": "https://www.your_server.com/en/contact"
}
]
},
"social": {
"title": "Freeverse - Living Assets",
"description": "NFT 2.0: The Home of Evolving Assets",
"image": "https://market.blackhole.gorengine.com/img/bnr1.png",
"site": "Freeverse",
"hashtag": "#NFT 2.0",
"quote": "NFT 2.0: The Home of Living Assets",
"sites": [
{
"site": "twitter",
"url": "https://twitter.com/your_twitter"
},
{
"site": "linkedin",
"url": "https://www.linkedin.com/company/your_linkedin/"
},
{
"site": "medium",
"url": "https://medium.com/your_medium"
}
]
}
}The following screenshots illustrate two different customizations of the marketplace:
Using an iFrame
If the attribute iframe.url is not null, the values of image and image_link are disregarded, and the iFrame is shown instead. The keys attribute can be left empty [], or specify both or one of the following keywords: "email", "web3Address". If specified, the parameters will be dynamically hashed, encrypted and added to the iFrame URL when a user is logged in. The encryption is done with the recipient's public key specified in publicKey. Check this example for further reference. Here's an example of iFrame customization:
{
"homepage": {
"image": "./img/bnr1.png",
"image_link": "https://www.your_server.com/",
"iframe": { // display an iframe instead of an image:
"url": "https://your_server.com",
"height": "500px", //optional
"width": "100%", //optional
"margin": "20px", //optional
"keys": ["email", "web3Address"], // both are optional: ["email", "web3Address"] are parameters dynamically encrypted and added to the iframe URL when a user is logged...,
"publicKey": "43c...6b" // Public key used to cypher the "keys" parameters.
}
}
}If your iFrame content has a height that adjusts dynamically, consider including a resizing script, such as this one.
Adding Custom Tabs
To configure custom pages that will be shown as tabs in the menu, just set the items in custom_pages. Here's an example:
{
"custom_pages": [
{
"title": "Custom Page 1",
"url": "https://link-to-your-iframe.com"
},
{
"title": "Custom Page 2",
"url": "https://link-to-your-iframe.com",
"height": "900px" // optional, it sets the height of the iFrame to a fixed height
},
{
"title": "Custom Page 3",
"url": "https://link-to-your-iframe.com",
"scroll": "yes" // optional, if scroll is set to yes, the Iframe will have the height of the page and have a internal scroll
}
]
}Image specs
Images linked in the JSON file must be in one of the following supported formats: jpeg, png, gif, webp, tiff.
To keep the marketplace running smoothly, it's important to follow standard practice and avoid large image sizes where possible.
Last updated
