Start using Sledge and Webflow

Prior using all Sledge's widgets, follow the steps below to start integrating Sledge into your Webflow storefront.

Quickstart

Setup Sledge Core

First, copy this code and paste it later inside the <head> tag

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@sledge-app/js@latest/dist/style.css"
/>
 
<script
  type="module"
  data-api-key=""
  data-instant-search-api-key=""
  data-user-id=""
  data-user-email=""
  data-user-fullname=""
  id="sledge-embed-script"
  src="https://cdn.jsdelivr.net/npm/@sledge-app/js@latest/dist/sledge.min.js"
></script>

`sledge-embed-script` Parameters

Let's look on list of all available parameters:

Parameter	Type	Description
data-api-key	string (required)	To get the `data-api-key`, go to : Shopify Admin › Apps › Sledge › General › API Key › API Key. See Backend for more information.
data-instant-search-api-key	string (required)	To get the `data-instant-search-api-key`, go to : Shopify Admin › Apps › Sledge › General › API Key › Instant Search Key. See Backend for more information.
data-user-id	number	Fill with your own user logined data, You can check out here
data-user-email	string	Fill with your own user logined data, You can check out here
data-user-fullname	string	Fill with your own user logined data, You can check out here

Place embed code above to your project

You can paste it inside <head> tag

Create a element

Example below using Div Block

Implement widget

You can use a sledge's widget by add the attribute into your element

Or you can place this code in custom code webflow, see the documentation about custom code embed at webflow

<div
  data-component="instant-search-product-filter-widget"
  data-query-keyword="q"
  data-collection-id=""
  data-collection-name=""
></div>

`instant-search-product-filter-widget` Parameters

Let's look on list of all available parameters:

Parameter	Type	Description
data-query-keyword	string	Fill up your unique `data-query-keyword`. e.g: `https://your-online-store.com/collection/all?q=hoodie` Default: `q`
data-collection-id	number (required)	Fill with your own collection id, You can check out here
data-collection-name	string (required)	Fill with your own collection name, You can check out here

Widget completely running

Sledge's product filters widget is now ready to be used.

Learn more

Congratulations! Now that the installation is complete, you can use all Sledge's widgets and start integrating to your Webflow storefront.

Code Wishlist