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"
    id="sledge-embed-script"
    src="https://cdn.jsdelivr.net/npm/@sledge-app/js@latest/dist/sledge.min.js"
></script>
 
<script>
    var sledge = sledge || {};
    sledge.config = {
      userId: "",
      userEmail: "",
      userFullname: "",
      domain: "",
    };
</script>

sledge.config Parameters

Let's look on list of all available parameters:


ParameterTypeDescription
userIdstring

Fill with your own user logined data

userEmailstring

Fill with your own user logined data

userFullnamestring

Fill with your own user logined data

domainstring (required)

Fill with your shop's .myshopify.com domain name

Place embed code above to your project

You can paste it inside <head> tag

sledge-image-docs

Create a element

Example below using Div Block

sledge-image-docssledge-image-docs

Implement widget

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

sledge-image-docssledge-image-docs

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:


ParameterTypeDescription
data-query-keywordstring

Fill up your unique data-query-keyword.
e.g: https://your-online-store.com/collection/all?q=hoodie

Default: q

data-collection-idnumber (required)

Fill with your own collection id,
You can check out here

data-collection-namestring (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.

sledge-image-docs

Learn more

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