# Developer Docs

## Docs

- [CMS Verifier](https://docs.uselooop.com/dashboard/cms-verifier.md): Verify your Webflow CMS structure.
- [Introduction](https://docs.uselooop.com/dashboard/introduction.md): 🚧 Dahboard documentation is in progress
- [Sync Collections](https://docs.uselooop.com/dashboard/sync-collections.md): Bring your Shopify collections into your Webflow CMS.
- [Sync Policies](https://docs.uselooop.com/dashboard/sync-policies.md): Bring your Shopify polices to Webflow
- [Sync Products](https://docs.uselooop.com/dashboard/sync-products.md): Bring your Shopify products, variants, and options into your Webflow CMS.
- [Designer App](https://docs.uselooop.com/designer-app.md): Native Webflow designer app
- [CMS Verifier](https://docs.uselooop.com/essentials/cms-verifier.md): Verify your Webflow CMS structure.
- [Looop Embed](https://docs.uselooop.com/essentials/embed.md): The JS embed to be pasted in head of Webflow
- [Shopify Redirect](https://docs.uselooop.com/essentials/shopify-redirect.md): Redirect users from your Shopify store to webflow.
- [Connect with Shopify](https://docs.uselooop.com/essentials/shopify-setup.md): Connect Looop with Shopify Admin and Storefront API
- [CMS Configuration](https://docs.uselooop.com/essentials/webflow-cms.md): Webflow CMS setup to import Shopify data
- [Connect with Webflow](https://docs.uselooop.com/essentials/webflow-connect.md): Grant access to your Webflow account to import Shopify products and collections into your Webflow site.
- [Fathom Analytics](https://docs.uselooop.com/integrations/fathom-analytics.md): Enabling Fathom Analytics for for Looop will allow you to track add to cart and checkout events.
- [Google Analytics](https://docs.uselooop.com/integrations/google-analytics.md): Enabling Google Analytics for for Looop will allow you to track add to cart and checkout events.
- [Google Autocomplete](https://docs.uselooop.com/integrations/google-autocomplete.md): Enabling this integration will allow users to use Google Autocomplete to fill in their address details.
- [Introduction](https://docs.uselooop.com/integrations/introduction.md): Integrations are add ons that can be used to extend the functionality of your Webflow storefront.
- [Introduction](https://docs.uselooop.com/integrations/js-utils/introduction.md): 🚧 Documentation under construction
- [Looop Config](https://docs.uselooop.com/integrations/looop-config.md): Looop Config is a global variable that is added to the head of your Webflow site. It is used to configure the Looop integrations.
- [Okendo Reviews](https://docs.uselooop.com/integrations/okendo.md): Show Okendo reviews collected on your Shopify store.
- [Introduction](https://docs.uselooop.com/introduction.md): Start building Shopify store in Webflow in under 5 minutes
- [Quickstart](https://docs.uselooop.com/quickstart.md): Start building your awesome store in under 5 minutes
- [Introduction](https://docs.uselooop.com/webflow/cart/cart.md): Cart elements allow you to build a custom cart without using Webflow ecommerce cart.
- [Cart Count](https://docs.uselooop.com/webflow/cart/count.md): Cart Count elements display the number of items in the cart.
- [Introduction](https://docs.uselooop.com/webflow/cart/default/cart-item.md): This element represents each unique cart item that customer adds to their cart.
- [Checkout Button](https://docs.uselooop.com/webflow/cart/default/checkout.md): The "checkout button," as it self explains, redirects the user to checkout.
- [Item Total Compare Price](https://docs.uselooop.com/webflow/cart/default/compare-price-total.md): This element is used to display the total compare price of parent cart item.
- [Introduction](https://docs.uselooop.com/webflow/cart/default/discount.md): Discount element allows users to validate and apply discount codes to their cart.
- [Discount Form](https://docs.uselooop.com/webflow/cart/default/discount-form.md): Discount form allows user to input and validate discount codes.
- [Discount List](https://docs.uselooop.com/webflow/cart/default/discount-list.md): This element is used by Looop to render the list of discount code applied to the cart.
- [Go to Cart](https://docs.uselooop.com/webflow/cart/default/go-to-cart.md): The button will recirect the user to the cart page of your Shopify site
- [Cart Item - Image](https://docs.uselooop.com/webflow/cart/default/image.md): This element is a image that will show the variant image of the product.
- [Cart List](https://docs.uselooop.com/webflow/cart/default/list.md): The cart list is a collection list of all the products user has added to their cart.
- [Item Total Price](https://docs.uselooop.com/webflow/cart/default/price-total.md): This element is used to display the total price of parent cart item.
- [Cart Item - Name](https://docs.uselooop.com/webflow/cart/default/product-name.md): This element is a text that will show the name of parent cart item.
- [Cart Item Quantity](https://docs.uselooop.com/webflow/cart/default/quantity.md): Input used by a user to change the quantity of any cart item.
- [Remove Button](https://docs.uselooop.com/webflow/cart/default/remove.md): The remove item button allows the user to remove the item from the cart.
- [Selected Subscription](https://docs.uselooop.com/webflow/cart/default/subscription.md): This element is a text field that will be replaced with the selected subscription plan
- [Subtotal](https://docs.uselooop.com/webflow/cart/default/subtotal.md): Subtotal can be any text element inside the default cart wrapper. This element will show the subtotal of all items in the cart after applicable discounts.
- [Cart Item - Variant](https://docs.uselooop.com/webflow/cart/default/variant-name.md): This element is a text that will show the selected options of a product in the cart.
- [Default Wrapper](https://docs.uselooop.com/webflow/cart/default/wrapper.md): This is the default wrapper for the cart. It contains the list of items in the cart and buttons to go to checkout.
- [Empty State](https://docs.uselooop.com/webflow/cart/empty.md): The empty state div is visible when the users cart is empty.
- [Activate](https://docs.uselooop.com/webflow/customer/activate.md): Allow users to activate their account from Shopify activation email.
- [Address Form](https://docs.uselooop.com/webflow/customer/address.md): Allow users to update their default address
- [Introduction](https://docs.uselooop.com/webflow/customer/customer.md): Allow users to create and manage their own accounts.
- [Signup](https://docs.uselooop.com/webflow/customer/customer-signup.md): Allow users to sign up for an account.
- [Login](https://docs.uselooop.com/webflow/customer/login.md): Allow users to log in to their account
- [Logout](https://docs.uselooop.com/webflow/customer/logout.md): This element is used to log out the user from the website.
- [Change Text](https://docs.uselooop.com/webflow/customer/on-login/change.md): These sub-variables is used to change the text context of webflow elements if the user is logged in.
- [CSS Variables](https://docs.uselooop.com/webflow/customer/on-login/css.md): These sub-variables are used to change the CSS properties of the element if the user is logged in.
- [Redirect](https://docs.uselooop.com/webflow/customer/on-login/redirect.md): This sub-variable is used to redirect the customer to a specific page. In combination with the root variable, it can be used to redirect the customer to a specific page based on the authentication status.
- [Remove](https://docs.uselooop.com/webflow/customer/on-login/remove.md): This sub-variable is used to remove the element from the page if the user is logged in.
- [Change Text](https://docs.uselooop.com/webflow/customer/on-logout/change.md): These sub-variables is used to change the text context of webflow elements if the user is logged out.
- [CSS Variables](https://docs.uselooop.com/webflow/customer/on-logout/css.md): These sub-variables are used to change the CSS properties of the element if the user is logged out.
- [Redirect](https://docs.uselooop.com/webflow/customer/on-logout/redirect.md): This sub-variable is used to redirect the customer to a specific page. In combination with the root variable, it can be used to redirect the customer to a specific page if they are not logged in.
- [Remove](https://docs.uselooop.com/webflow/customer/on-logout/remove.md): This sub-variable is used to remove the element from the page if the user is logged out.
- [Orders Empty State](https://docs.uselooop.com/webflow/customer/order-empty.md): This element is a div next to the orders list that is shown when the list is empty. It is used to inform the user that there are no orders to display.
- [Introduction](https://docs.uselooop.com/webflow/customer/orders.md): Render a list of all orders placed by a customer
- [Orders List](https://docs.uselooop.com/webflow/customer/orders-list.md): This element is used by Looop to render the list of all orders placed by the customer.
- [Recover](https://docs.uselooop.com/webflow/customer/recover.md): Allow users to recover their account password by sending a recovery email.
- [Reset](https://docs.uselooop.com/webflow/customer/reset.md): Allow users to reset their password from the email they receive.
- [Update Form](https://docs.uselooop.com/webflow/customer/update.md): Allow users to update their profile information like name, email, and password.
- [Introduction](https://docs.uselooop.com/webflow/customer/variables.md): Customer Variables are a combination of variables that can be used to modify the Webflow site based on the customer authentication status.
- [Introduction](https://docs.uselooop.com/webflow/introduction.md): A guide to developing Shopify storefront in Webflow using Looop Attributes
- [Currency Symbol](https://docs.uselooop.com/webflow/markets/currency-symbol.md): A text block that displays currency symbol of selected currency market.
- [Market Form](https://docs.uselooop.com/webflow/markets/form.md): This element is a Webflow Form that will have an dropdown menu for the user to select the market they are interested in.
- [Market Ignore](https://docs.uselooop.com/webflow/markets/ignore.md): Prevent products cards from getting removed from the DOM if they are not in the market
- [Introduction](https://docs.uselooop.com/webflow/markets/markets.md): Looop supports Shopify markets, allowing you to sell products in multiple countries and currencies.
- [Market Selector](https://docs.uselooop.com/webflow/markets/selector.md): A button or dropdown toggle that shows the currently selected market.
- [Add to Cart](https://docs.uselooop.com/webflow/productcard/addtocart.md): Button used by the user to add items to their cart
- [Hero Image](https://docs.uselooop.com/webflow/productcard/hero-image.md): Shows the imaage of develted product/variants
- [Dropdown](https://docs.uselooop.com/webflow/productcard/options/dropdown.md): Show product options to the user
- [Radio](https://docs.uselooop.com/webflow/productcard/options/radio.md): Show product options to the user
- [Price & Compare Price](https://docs.uselooop.com/webflow/productcard/price.md): 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.
- [Product Card](https://docs.uselooop.com/webflow/productcard/productcard.md): A div that contains a product image, price, quantity input, and add to cart button
- [Quantity](https://docs.uselooop.com/webflow/productcard/quantity.md): Input used by a user to select the number of items to add to their cart.
- [Dropdown](https://docs.uselooop.com/webflow/productcard/subscription/dropdown.md): Show product options to the user
- [Radio](https://docs.uselooop.com/webflow/productcard/subscription/radio.md): Show product subscriptions to the user
- [Search Input](https://docs.uselooop.com/webflow/search/form.md): The search input allows users to input search queries to see products in the search list.
- [Search List](https://docs.uselooop.com/webflow/search/list.md): This element will show the results for the search query.
- [Introduction](https://docs.uselooop.com/webflow/search/search.md): Search element allows users to search for products in the store.
- [Introduction](https://docs.uselooop.com/webflow/wishlist/wishlist.md): 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](https://docs.uselooop.com/webflow/wishlist/wishlist-button.md): 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 Empty State](https://docs.uselooop.com/webflow/wishlist/wishlist-empty.md): 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 List](https://docs.uselooop.com/webflow/wishlist/wishlist-list.md): Wishlist list element is used to display the list of products that are added to the wishlist.

## OpenAPI Specs

- [openapi](https://docs.uselooop.com/api-reference/openapi.json)

## Optional

- [Tutorials](https://www.youtube.com/channel/UC5xADlZY5L-TAbwJHsh8uIA)
- [Cloneables](https://webflow.com/@thind-dev/sites)