Hide

Show

Flex

Disable

Enable

Avilable Sub-Variables

These sub-variables are used to change the CSS properties of the element if the user is logged in.

CSS Variables

Developer Docs

Start building Shopify store in Webflow in under 5 minutes

Introduction

Start building your awesome store in under 5 minutes

Quickstart

Designer App

Grant access to your Webflow account to import Shopify products and collections into your Webflow site.

Connect with Webflow

Connect Looop with Shopify Admin and Storefront API

Connect with Shopify

CMS Configuration

CMS Verifier

The JS embed to be pasted in head of Webflow

Looop Embed

Redirect users from your Shopify store to webflow.

Shopify Redirect

 🚧 Dahboard documentation is in progress

A guide to developing Shopify storefront in Webflow using Looop Attributes

Integrations are add ons that can be used to extend the functionality of your Webflow storefront.

Looop Config is a global variable that is added to the head of your Webflow site. It is used to configure the Looop integrations.

Looop Config

Enabling Google Analytics for for Looop will allow you to track add to cart and checkout events.

Google Analytics

Enabling Fathom Analytics for for Looop will allow you to track add to cart and checkout events.

Fathom Analytics

Enabling this integration will allow users to use Google Autocomplete to fill in their address details.

Google Autocomplete

Show Okendo reviews collected on your Shopify store.

Okendo Reviews

Tutorials

Cloneables

Onbaording

Weblow Setup

Integrations

Dashboard

Support

A div that contains a product image, price, quantity input, and add to cart button

Product Card

These elements are used to display the price of a product and compare it with the original price based on selected variants, country and subscription.

Price & Compare Price

Input used by a user to select the number of items to add to their cart.

Quantity

Button used by the user to add items to their cart

Add to Cart

Shows the imaage of develted product/variants

Hero Image

Cart elements allow you to build a custom cart without using Webflow ecommerce cart.

The empty state div is visible when the users cart is empty.

Empty State

Cart Count elements display the number of items in the cart.

Cart Count

Looop supports Shopify markets, allowing you to sell products in multiple countries and currencies.

A button or dropdown toggle that shows the currently selected market.

Market Selector

This element is a Webflow Form that will have an dropdown menu for the user to select the market they are interested in.

Market Form

A text block that displays currency symbol of selected currency market.

Currency Symbol

Prevent products cards from getting removed from the DOM if they are not in the market

Market Ignore

Allow users to create and manage their own accounts.

Allow users to update their profile information like name, email, and password.

Update Form

Allow users to update their default address

Address Form

This element is used to log out the user from the website.

Logout

Wishlist element allow you to add a wishlist to your Webflow site, where users can add products to a wishlist and view them later.

Wishlist button allows users to add/remove products to a wishlist and also serves as indicator if parent product is already in the wishlist.

Wishlist Button

Wishlist list element is used to display the list of products that are added to the wishlist.

Wishlist List

This element is a div next to the wishlist that is shown when the list is empty. It is used to inform the user that there are no products in the wishlist.

Wishlist Empty State

Search element allows users to search for products in the store.

The search input allows users to input search queries to see products in the search list.

Webflow

​Avilable Sub-Variables

​Hide

​Show

​Flex

​Disable