Only for metafields of type `Single Line Text` you can use an additional attribute: This will ask Smootify to output the value inside the attribute explained in the attribute instead of setting the value as the text of the element. E.g: Will set the value of the metafield in the attribute `data-id` of the element. ### Metafields Visibility [#metafields-visibility] Learn how to show or hide elements based on whether a metafield exists and what its value is. To control visibility of an element you have principally 2 custom attributes to use: This attribute will show the element if the metafield exists with 2 exceptions: 1. In the case you used a metafield of type **True / False** it will be shown if the metafield is set and is set as **True**; 2. In the case of metafields of type **Integer Number**, the element will be shown if the metafield is set and the value is higher than **0**; The second custom attribute is: This attribute will act in the opposite way of the first one, so the element will show only if the metafield doesn't exists. #### Check for Value [#check-for-value] By default metafields visibility attributes will just check for the existence of the metafield. If you wish instead to check for the value that is inside the metafield add also the attribute: For example if you created a metafield of type **Single Line Text** with key `my_option` and you want to show an element only when the metafield value is for example **Option 1**. You have to use the custom attributes: #### Company metafields visibility [#company-metafields-visibility] If you are on Shopify Plus you can also use company metafields visibility with same syntax but by using `company` in the name instead of `customer` as example ## How to create a Customer Metafields Product Listing [#how-to-create-a-customer-metafields-product-listing] ### Add a Flex or Grid element [#add-a-flex-or-grid-element] Design your flex/grid by keeping in mind that the replication of your product items will only occur on the live website, where your placeholder will be transformed into the full product listing. ### Design the Product Template item [#design-the-product-template-item] Copy and paste the Product Custom Element inside the flex/grid element you created. Inside the Product Custom Element you can insert any static Webflow element. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) Copy and paste any of our pre-made example inside the flex/grid element you created.

# Order Listing (/docs/accounts/order-listing) This is the list of orders placed up by the current logged in customer, the element will be automatically duplicated once for each order placed by your customer. The Element is made by two custom dom elements Smootify Docs

The customer orders element is the loader that will render all the orders and has inside pagination buttons and the customer order custom element. The customer order dom element will be duplicated once for each order placed. Inside this element you can add the following elements: ## Order Name [#order-name] Order name is an unique number associated to your order, you can add it to any text element with the following attribute: ## Financial Status [#financial-status] Is a label that indicates the status of the payment, you can add it to any text element with the following attribute: ## Fulfillment Status [#fulfillment-status] Is a label that indicates the status of the shipping, you can add it to any text element with the following attribute: Shopify Status Labels are codes like 'PENDING' or 'PAID', if you want to show up a different value you have to write a custom script ```html ``` Where labels for [Financial](https://shopify.dev/docs/api/storefront/latest/enums/OrderFinancialStatus) and [Fulfillment](https://shopify.dev/docs/api/storefront/latest/enums/OrderFulfillmentStatus) can be found only in the Shopify Storefront doc. Note that you must add all labels inside the same script! ## Billing Address [#billing-address] Is the address used for billing by the customer, you can add it to any text element with the following attribute: ## Shipping Address [#shipping-address] Is the address used for shipping by the customer, you can add it to any text element with the following attribute: ## Processed At [#processed-at] Is the date in the current browser format for the order, you can add it to any text element with the following attribute: ## Shipping Price [#shipping-price] Is shipping price of the order, you can add it to any text element with the following attribute: ## Subtotal Price [#subtotal-price] Is the subtotal price of the order, you can add it to any text element with the following attribute: ## Total Price [#total-price] Is the total price of the order, you can add it to any text element with the following attribute: ## Total Tax [#total-tax] Is the total tax of the order, you can add it to any text element with the following attribute: ## Status Url [#status-url] Is the url that will go directly to the Shopify new customers account dashboard for that specific order, you can add it to any link element with the following attribute: ## Customer Url [#customer-url] Is the url that will go directly to the Shopify new customers account dashboard on the profile page, you can add it to any link element with the following attribute: ## Order Url [#order-url] Is the url that will go directly to the page you created in Webflow with the purpose of being an order page, you can add it to any link element with the following attribute: If you do not want to use our default page url for order page (/account/order), do not forget to inform the [Smootify scripts](/docs/custom-code/js) about your configuration! # Order Page (/docs/accounts/order-page) You can create an order page that will be accessible only through the link present inside the Customer Orders element. This page should be created in Webflow inside the `account` folder with slug `order`. If you do not want to use our default page url for order page (/account/order), do not forget to inform the [Smootify scripts](/docs/custom-code/js) about your configuration! Is greatly suggested to start from the Order Page elements that contains all relevant functionalities of an order page, it’s made by three main Dom Elements. Smootify Docs

## Order Page Wrapper [#order-page-wrapper] This Dom Element is basically the wrapper of all the order functionalities. Inside the order page you can add all the following elements: ### Order Name [#order-name] Order name is an unique number associated to your order, you can add it to any text element with the following attribute: ### Financial Status [#financial-status] Is a label that indicates the status of the payment, you can add it to any text element with the following attribute: ### Fulfillment Status [#fulfillment-status] Is a label that indicates the status of the shipping, you can add it to any text element with the following attribute: Shopify Status Labels are codes like 'PENDING' or 'PAID', if you want to show up a different value you have to write a custom script ```html ``` Where labels for [Financial](https://shopify.dev/docs/api/storefront/latest/enums/OrderFinancialStatus) and [Fulfillment](https://shopify.dev/docs/api/storefront/latest/enums/OrderFulfillmentStatus) can be found only in the Shopify Storefront doc. Note that you must add all labels inside the same script! ### Billing Address [#billing-address] Is the address used for billing by the customer, you can add it to any text element with the following attribute: ### Shipping Address [#shipping-address] Is the address used for shipping by the customer, you can add it to any text element with the following attribute: ### Processed At [#processed-at] Is the date in the current browser format for the order, you can add it to any text element with the following attribute: ### Shipping Price [#shipping-price] Is shipping price of the order, you can add it to any text element with the following attribute: ### Subtotal Price [#subtotal-price] Is the subtotal price of the order, you can add it to any text element with the following attribute: ### Total Price [#total-price] Is the total price of the order, you can add it to any text element with the following attribute: ### Total Tax [#total-tax] Is the total tax of the order, you can add it to any text element with the following attribute: ### Status Url [#status-url] Is the url that will go directly to the Shopify new customers account dashboard for that specific order, you can add it to any link element with the following attribute: ### Customer Url [#customer-url] Is the url that will go directly to the Shopify new customers account dashboard on the profile page, you can add it to any link element with the following attribute: ### Customer Url [#customer-url-1] Is the url that will go directly to the Webflow Order Page, you can add it to any link element with the following attribute: ## Line Items [#line-items] This Dom element will be duplicated once per each product purchased inside the order Inside the line item you can add the following elements: ### Name [#name] Is the name of the purchased product, you can add it to any text element with the following attribute: ### Image [#image] Is the image of the purchased product, you can add it to any img or div element with the following attribute: ### Quantity [#quantity] Is the quantity purchased of the product, you can add it to any text element with the following attribute: ### Unit Price [#unit-price] Is the single unit price of the purchased product, you can add it to any text element with the following attribute: ### Total Price [#total-price-1] Is the total price of the purchased product, you can add it to any text element with the following attribute: ### Option [#option] This element is a key value element that shows up variant options and properties of the purchased order, it will be duplicated once for each variant option or property used: Inside the div with the previous attribute, you have to add two text elements with respectively the attributes: and ## Order Fulfillments [#order-fulfillments] This Dom element will be duplicated once per each fulfillment of the order (you can ship items with different options) ### Status [#status] Is the status of the fulfillment (like shipped, delivered, etc..), you can add it to any text element with the following attribute: ### Estimated Delivery [#estimated-delivery] Is the estimated delivery date in the current browser format for the fulfillment, you can add it to any text element with the following attribute: ### Updated at [#updated-at] Is the updated date in the current browser format for the fulfillment last status, you can add it to any text element with the following attribute: ### Tracking Company [#tracking-company] Is the name of the tracking company for the fulfillment, you can add it to any text element with the following attribute: ### Tracking Number [#tracking-number] Is the number of the tracking for the fulfillment, you can add it to any text element with the following attribute: ### Tracking Url [#tracking-url] Is the url of the tracking for the fulfillment, you can add it to any link element with the following attribute: # Subscription Listing (/docs/accounts/subscription-listing) This is the list of subscriptions purchased up by the current logged in customer, the element will be automatically duplicated once for each subscription attached to your customer. The Element is made by two custom dom elements Smootify Docs

The customer subscriptions element is the loader that will render all subscription elements, inside you will find pagination buttons and the customer subscription custom element that will be duplicated once for each subscription. Inside this element you can add the following elements: ## Name [#name] Subscription name is an unique number associated to your subscription, you can add it to any text element with the following attribute: ## Status [#status] Is a label that indicates the status of the subscription, you can add it to any text element with the following attribute: Shopify Status Labels are codes like 'ACTIVE' or 'EXPIRED', if you want to show up a different value you have to write a custom script ```html ``` Where labels for [Subscription Statues](https://shopify.dev/docs/api/customer/latest/enums/SubscriptionContractSubscriptionStatus) can be found only in the Shopify doc. Note that you must add all labels inside the same script! ## Next Billing Date [#next-billing-date] Is the extimated next billing date for the subscription formatted based on the Browser settings ## Billing Interval [#billing-interval] Is the interval of the subscription (like 1 week, 1 month, etc... ) ## Billing Address [#billing-address] Is the address used for billing by the customer, you can add it to any text element with the following attribute: ## Shipping Address [#shipping-address] Is the address used for shipping by the customer, you can add it to any text element with the following attribute: ## Processed At [#processed-at] Is the date in the current browser format for the order, you can add it to any text element with the following attribute: ## Shipping Price [#shipping-price] Is shipping price of the order, you can add it to any text element with the following attribute: ## Subtotal Price [#subtotal-price] Is the subtotal price of the order, you can add it to any text element with the following attribute: ## Total Price [#total-price] Is the total price of the order, you can add it to any text element with the following attribute: ## Total Tax [#total-tax] Is the total tax of the order, you can add it to any text element with the following attribute: ## Status Url [#status-url] Is the url that will go directly to the Shopify new customers account dashboard for that specific order, you can add it to any link element with the following attribute: ## Customer Url [#customer-url] Is the url that will go directly to the Shopify new customers account dashboard on the profile page, you can add it to any link element with the following attribute: ## Subscription Url [#subscription-url] Is the url that will go directly to the page you created in Webflow with the purpose of being a subscription page, you can add it to any link element with the following attribute: If you do not want to use our default page url for subscription page (/account/subscription), do not forget to inform the [Smootify scripts](/docs/custom-code/js) about your configuration! # Subscription Page (/docs/accounts/subscription-page) You can create an order page that will be accessible only through the link present inside the Customer Orders element. This page should be created in Webflow inside the `account` folder with slug `subscription`. Is greatly suggested to start from the Subscription Page elements that contains all relevant functionalities of a subscription page, it’s made by different Custom Elements. ## Subscription Page Wrapper [#subscription-page-wrapper] This Custom Element is basically the wrapper of all the subscription functionalities and has the tag \`\`\`subscription-page\`\` Inside this element you can add the following elements: ## Name [#name] Subscription name is an unique number associated to your subscription, you can add it to any text element with the following attribute: ## Status [#status] Is a label that indicates the status of the subscription, you can add it to any text element with the following attribute: Shopify Status Labels are codes like 'ACTIVE' or 'EXPIRED', if you want to show up a different value you have to write a custom script ```html ``` Where labels for [Subscription Statues](https://shopify.dev/docs/api/customer/latest/enums/SubscriptionContractSubscriptionStatus) can be found only in the Shopify doc. Note that you must add all labels inside the same script! ## Next Billing Date [#next-billing-date] Is the extimated next billing date for the subscription formatted based on the Browser settings ## Billing Interval [#billing-interval] Is the interval of the subscription (like 1 week, 1 month, etc... ) ## Billing Address [#billing-address] Is the address used for billing by the customer, you can add it to any text element with the following attribute: ## Shipping Address [#shipping-address] Is the address used for shipping by the customer, you can add it to any text element with the following attribute: ## Processed At [#processed-at] Is the date in the current browser format for the order, you can add it to any text element with the following attribute: ## Shipping Price [#shipping-price] Is shipping price of the order, you can add it to any text element with the following attribute: ## Subtotal Price [#subtotal-price] Is the subtotal price of the order, you can add it to any text element with the following attribute: ## Total Price [#total-price] Is the total price of the order, you can add it to any text element with the following attribute: ## Total Tax [#total-tax] Is the total tax of the order, you can add it to any text element with the following attribute: ## Status Url [#status-url] Is the url that will go directly to the Shopify new customers account dashboard for that specific order, you can add it to any link element with the following attribute: ## Customer Url [#customer-url] Is the url that will go directly to the Shopify new customers account dashboard on the profile page, you can add it to any link element with the following attribute: ## Subscription Url [#subscription-url] Is the url that will go directly to the page you created in Webflow with the purpose of being a subscription page, you can add it to any link element with the following attribute: ## Subscription Line Items [#subscription-line-items] This Custom element with tag `subscription-line-item` will be duplicated once per each product purchased inside the order Inside the line item you can add the following elements: ### Name [#name-1] Is the name of the subscription, you can add it to any text element with the following attribute: ### Image [#image] Is the image of the purchased subscription, you can add it to any img or div element with the following attribute: ### Quantity [#quantity] Is the quantity purchased of the subscription, you can add it to any text element with the following attribute: ### Total Price [#total-price-1] Is the price of the purchased subscription, you can add it to any text element with the following attribute: ## Activate Subscription [#activate-subscription] This form will appear only if the subscription is in Failed or Paused State. ## Cancel Subscription [#cancel-subscription] This form will appear only if the subscription is in Active or Paused State. ## Pause Subscription [#pause-subscription] This form will appear only if the subscription is in Active State. If you do not want to use our default page url for subscription page (/account/subscription), do not forget to inform the [Smootify scripts](/docs/custom-code/js) about your configuration! # Cookie Consent (/docs/analytics/cookie-consent) Create a custom cookie consent (that complies with GDPR law) directly in Shopify and customize it in Webflow. Smootify Docs

### Copy & paste the component [#copy--paste-the-component] Copy & paste the Manage Preferences button into your Webflow project. You can style the button however you like, with complete creative freedom. ### Go to Shopify Panel [#go-to-shopify-panel] Go to your Shopify Panel > Settings > Customer Privacy and click on Cookie banner. Smootify Docs

### Activate Cookie [#activate-cookie] Click on Activate cookie banner button. Smootify Docs

### Go to Appearance [#go-to-appearance] Then you can go to the Appearance section and click on Customize. Smootify Docs

### Customize the cookie banner [#customize-the-cookie-banner] From the customize menu you can manage any aspect of your cookie consent banner, including text, colors, and layout. Smootify Docs

### Add CSS Variables [#add-css-variables] ou can also add 4 CSS Variables in Webflow to customize the banner (use the exact variable names below): * Shopify-banner-border * Shopify-banner- border-radius * Shopify-banner-margin-vertical * Shopify-banner-border-color Smootify Docs

## Custom CSS selectors [#custom-css-selectors] Below you can find all selectors Shopify uses for the main elements of the Cookie Banner, use the following snippet as a starting point for custom css customization: ```css /* Preference Dialog */ #shopify-pc__prefs__dialog { } /* Accept Prefs Button */ #shopify-pc__prefs__header-accept { } /* Decline Prefs Button */ #shopify-pc__prefs__header-decline { } /* Save Prefs Button */ #shopify-pc__prefs__header-save { } /* Prefs Title */ #shopify-pc__prefs__header-title { } /* Prefs Subtitle */ .shopify-pc__prefs__intro-main h3 { } /* Prefs Paragraph */ .shopify-pc__prefs__intro-main p { } ``` # Analytics (/docs/analytics) Shopify Headless offers built-in analytics for essential e-commerce events like "page-views" and "add-to-cart." While these metrics provide a baseline understanding of user behavior, it's crucial to acknowledge the inherent limitations of web analytics in today's privacy-conscious environment. Smootify Docs

You must have analytics consent by your visitors before activate it on your website. For this reason you need to use it in combination with a cookie consent system. ## Built-in Analytics: Core Functionality [#built-in-analytics-core-functionality] * **Page Views:** Tracks the number of times specific pages are loaded. * **Add-to-Cart Events:** Records instances where users add products to their shopping cart. These metrics can offer insights into: * Popular product pages. * Conversion funnel initiation. * Basic user engagement. ## Limitations and Challenges [#limitations-and-challenges] However, relying solely on these built-in analytics presents significant challenges: 1. **Browser Privacy Settings:** * Modern browsers, such as Firefox (with Enhanced Tracking Protection) and Chromium-based browsers in "Do Not Track" mode, actively block tracking scripts. * This results in **incomplete and potentially inaccurate data**, underrepresenting actual user activity. 2. **Ad Blockers:** * Ad blockers often interfere with analytics scripts, further skewing data. 3. **Cookie Restrictions:** * Increased privacy regulations (e.g., GDPR, CCPA) and browser policies (e.g., Intelligent Tracking Prevention) limit the use of third-party cookies, impacting user tracking and attribution. 4. **Bot Traffic:** * Analytics can be skewed by automated bot traffic. Distinguishing legitimate user interactions from bot activity is crucial for accurate data. 5. **Limited Scope:** * The built-in analytics may lack detailed insights into user behavior, such as: * User journey across different devices. * Detailed conversion funnel analysis. * Attribution modeling. * Custom events related to specific business needs. ## Shopify Cookie Consent [#shopify-cookie-consent] We advice to use the native [Shopify Cookie Consent](/docs/analytics/cookie-consent) system that automatically allows consent both in Webflow and Shopify, allowing you to track pixels both in Webflow and Shopify checkout. ## Third party cookie consent systems [#third-party-cookie-consent-systems] To activate the Shopify page views and product add to cart analytics with your own cookie consent system you just need to call the JS function: ```html Smootify.enableAnalytics(true); ``` after receiving the user consent. Follow up the documentation of the cookie consent system of your choice in order to run the previous code properly only when user accepted analytics. A part from running up that code to enable the page-views and add-to-cart events, you have also to give Shopify consent to track using [Shopify Customer Privacy APIs](https://shopify.dev/docs/api/customer-privacy#installation-on-a-custom-storefront). # Integrations (/docs/analytics/integrations) You can experimentally enable auto analytics tracking integration by enabling the respective option inside [Smootify JS Options](/docs/custom-code/js). We are not responsible of a not compliant analytics tracks on your website. You have to enable analytics only previous explicit user consent. ## Automatic Event Tracking [#automatic-event-tracking] To enable analytics you can use [JS APIs](https://docs.smootify.io/js-utilities/extensibility#enable-analytics) or you can follow up the previous guide. The auto track feature automatically sends the following events: * Add to cart * Product page viewed using automatically Mixpanel, GTag, fbq or Klaviyo utilities that are already installed on your site. Smootify doesn’t inject any of these before mentioned utilities, you have to enable them by following their respective documentations: * [Mixpanel](https://docs.mixpanel.com/docs/quickstart/connect-your-data?sdk=javascript) * [gtag.js](https://developers.google.com/tag-platform/gtagjs) * [fbq](https://developers.facebook.com/docs/meta-pixel/get-started) * [Klaviyo](https://developers.klaviyo.com/en/docs/javascript_api#add-the-klaviyo-snippet) - Klaviyo tracks events that happens only and exclusively after customers are logged in Naturally be aware that making up analytics from a website nowadays is not reliable at all. Most browsers (Firefox by default, Chromium when set in “Do not track” mode) will block automatically all analytics scripts. If you want to track more events with your own code, don’t forget to check out our global events. Automatic event tracking works only in combination with [Shopify's cookie consent](/docs/analytics/cookie-consent). Without it, enabling this feature will have no effect, and you will need to track events manually. ## Google Analytics [#google-analytics] If you want to correctly track AddToCarts with your gtag script, you have to listen to the Smootify Add To Cart event and send the event using the gtag utility of Google, as example you can use the snippet below: ```js document.addEventListener('smootify:added_to_cart', (event) => { const {lines, cart} = event.detail; if (window.gtag) { for (let line of lines) { const cartLine = cart.lines.nodes.find(e => e.merchandise.id === line.merchandiseId); if (cartLine) { gtag('event', 'add_to_cart', { 'items': [{ 'id': line.merchandiseId.split("/").pop(), 'quantity': line.quantity, 'price': Number(cartLine.cost.totalAmount.amount), 'currency': cartLine.cost.totalAmount.currencyCode }] }); } } } }); ``` This is the correct way to track the add to cart, since a click on the button will not ensure you that the product is purchasable or not. Naturally, be sure you have the consent to track! If you do not want to customize the code in any way, you can also just enable the Automatic Event Tracking. ## Meta Analytics [#meta-analytics] If you want to correctly track AddToCarts within your meta pixel, you have to listen to the Smootify Add To Cart event and send the event using the fbq utility of Meta, as example you can use the snippet below: ```js document.addEventListener('smootify:added_to_cart', (event) => { const {lines, cart, goToCheckout} = event.detail; if (window.fbq) { for (let line of lines) { const cartLine = cart.lines.nodes.find(e => e.merchandise.id == line.merchandiseId); if (cartLine) { fbq('track', 'AddToCart', { content_type: "product", contents: [{ id: line.merchandiseId.split("/").pop(), quantity: line.quantity, value: Number(cartLine.cost.totalAmount.amount), currency: cartLine.cost.totalAmount.currencyCode }] }) } } } }) ``` This is the correct way to track the add to cart, since a click on the button will not ensure you that the product is purchasable or not. Naturally, be sure you have the consent to track! If you do not want to customize the code in any way, you can also just enable the Automatic Event Tracking. # Custom Code (/docs/custom-code) Unlock the full potential of your website with custom code! This page explores the powerful extensibility options available through JavaScript (JS) and Cascading Style Sheets (CSS). Whether you're looking to add unique functionality, create bespoke designs, or fine-tune existing features, custom code provides the flexibility and control you need. Here, we'll delve into the possibilities, offering examples, best practices, and resources to help you leverage JS and CSS to create truly tailored and exceptional web experiences. From simple tweaks to complex integrations, discover how custom code can elevate your website to the next level. Learn more about Events, APIs and Options that are available when you use Smootify! Learn more about CSS Variables and Snippets you can use on your Webflow project! # Hello World (/docs/custom-code/urgent-cart-countdown) # FAQs (/docs/ecommerce/faqs) We understand that navigating these elements can sometimes be tricky, so we've compiled a list of common queries to help you create a seamless and visually appealing shopping experience. Whether you're curious about best practices for showcasing product variants, optimizing collection pages for discoverability, or understanding the nuances of product image presentation, you'll find helpful information here. ## Products & Variants [#products--variants] No! Shopify is limited to 3 option sets, if you need a product that requires more than 3 variables that do change the price, you have to either to split up the product into multiple ones and leverage our **Magic Add-ons**, or you have to use our Server Add-on **Product Configurator**. Depends by your Shopify store. Shopify announced that the limit would have been lifted and set to 2k but not all stores already have that. ## Sync Issues [#sync-issues] Webflow APIs do not allow to modify/create CMS items if you are using both the \*.webflow\.io subdomain and your main domain and the site is not published on both at same time. To fix the issue, you have to either unpublish the \*.webflow\.io subdomain or you have to push on all the domains attached to your project Be sure that your products/collections in Shopify are published on all the relevant Sales Channels, if you do publish those only on the Online Store and not on the Headless Channel they will not be imported. Be also sure that they are published in all Markets, and for collections be sure they do have at least 1 product inside! A default Locale is necessary for Smootify to properly fetch products in the correct language from Shopify. You can set your default locale by entering your Webflow Designer > Settings > Localization > Default Locale. When you move around Webflow projects the token to access the Webflow APIs get's deactivated. Just [reconnect it](https://dashboard.smootify.io/new). If you are syncing with the desktop app wait few minutes ☕ and after that logout and relogin. # Products & Collections (/docs/ecommerce) This folder contains documentation and resources to help you understand and utilize Shopify product, collection, and vendor data within your Webflow project, specifically when integrated with Smootify. Smootify Docs

## Purpose [#purpose] The goal of this documentation is to provide a clear and concise guide on how to: * **Access Shopify Data:** Understand how Smootify bridges the gap between your Shopify store and your Webflow site, making product, collection, and vendor information available. * **Structure and Use Data:** Learn about the data structure of products, collections, and vendors as delivered by Smootify, and how to effectively use this data within Webflow's dynamic content and CMS features. * **Implement Common Use Cases:** Find examples and explanations for common scenarios, such as displaying product grids, collection pages, vendor listings, and product detail pages. * **Leverage Smootify's Features:** Explore the specific Smootify features and functionalities that facilitate the seamless integration of Shopify data within your Webflow project. ## What You'll Find Inside [#what-youll-find-inside] This folder includes: * **Documentation:** Detailed explanations of data structures, Smootify settings, and implementation guidelines. * **Code Snippets:** Example code for common Webflow implementations, including custom code and embed components. * **Tutorials and Guides:** Step-by-step instructions for specific tasks, such as creating dynamic product listings and collection pages. * **Troubleshooting Tips:** Solutions to common issues and FAQs related to Shopify data integration. **Let's get started!** Please explore the documents and resources within this folder to begin utilizing your Shopify data in Webflow. We hope this documentation empowers you to create a seamless and engaging e-commerce experience. # FAQs (/docs/getting-started/faqs) Welcome to the Smootify FAQs page! Here, we've compiled answers to the most common questions we receive about using Smootify with both Webflow and Shopify. Whether you're curious about setup, pricing, features, or troubleshooting, this is the place to find the information you need. We've organized the FAQs into categories to make it easier to navigate. If you can't find the answer you're looking for, please don't hesitate to contact our support team – we're happy to help! ## Pricing [#pricing] To start developing a Smootify site you need a paid plan only and exclusively on Webflow. You can create a development store for free on Shopify using your [**Shopify partner account**](https://www.shopify.com/it/partner) and use Smootify for free on webflow\.io subdomains! **No!** The Starter Shopify Plan doesn't allow to use Headless sale channel, you need at least the **Basic** plan To develop your site any workspace/site plan will do! To publish you will need a site plan, and that depends by the number of CMS items and bandwidth you will need, but in general any Site plan will do. Do not get an eCommerce plan, it's absolutely not necessary! All Add-ons that are not marked as Server Add-ons are included both in the Free and Lite Plan. Server add-ons can be used only with an active server plan instead ## Limitations [#limitations] On Shopify you absolutely can, but you will not be able to import them in Webflow. Based on your Site plan you will be limited to max 2k - 20k of CMS items. Note that "CMS items" is not per CMS collection, but global. So you will have way less products as maximum of your store. All backend apps will work since they are not influenced by the theme. But for frontend apps you can only use those who do support headless sale channel. **No!** Shopify checkout is not modifiable, you can only modify logos, colors and few other settings directly on your Shopify dashboard. ## Design [#design] Absolutely not! Our libraries are just a starting point! You are not forced to use any pre-made library and you can re-create everything from scratch. Smootify is based on **DOM Elements** and attributes, so you will just need to use those properly to integrate them in your design! Not at all! If your store is mono-product or has just few products and you do require a very different design for each product you can use Smootify elements with static attributes, by just adding the correct Product ID to our DOM elements! **No!**. Your absolutely free to use any class system you do prefer, Smootify mainly uses only DOM Elements and attributes even for styling, there are only few combo-classes that must be set with the exact same name, (e.g: is-disabled on the variant swatches). For all the reset you can use whatever you like! ## Issues [#issues] Double check in the Smootify Dashboard that you set the correct Webflow domain. It must be in the form `www.domain.tld` Join our [Discord](https://discord.com/invite/MKeQqEZmjd) channel! We are always there to answer you during our business hours. We are located in

you will find us on the server usually from **Monday** to **Friday** from **10 AM** to **5 PM** (CET/CEST timezone). Current Time in Italy: **No!**. Your absolutely free to use any class system you do prefer, Smootify mainly uses only DOM Elements and attributes even for styling, there are only few combo-classes that must be set with the exact same name, (e.g: is-disabled on the variant swatches). For all the reset you can use whatever you like! # Getting started with Smootify (/docs/getting-started) Smootify Docs

### Welcome to the Smootify documentation! \[!toc] [#welcome-to-the-smootify-documentation-toc] Smootify bridges the gap between the design flexibility of Webflow and the robust e-commerce power of Shopify, empowering you to build stunning, high-performance headless Shopify stores directly within your Webflow projects. This documentation is your comprehensive guide to understanding and utilizing Smootify's features, from initial setup and product integration to advanced customization and troubleshooting. Whether you're a seasoned Webflow developer or new to the world of headless commerce, you'll find the resources you need to create exceptional online shopping experiences. Dive in and discover how Smootify can revolutionize your e-commerce workflow. # EU Right of Withdrawal Compliance (/docs/internationalization/eu-withdrawal-compliance) ## Overview \[!toc] [#overview-toc] Starting **June 19, 2026**, businesses selling online to consumers in the European Union must comply with [EU Directive 2023/2673](https://help.shopify.com/en/manual/compliance/legal/eu-right-of-withdrawal). This directive requires merchants to provide a clearly visible electronic withdrawal function — such as a button or link — that customers can use to exercise their 14-day right of withdrawal directly from your store. ### Key Requirements [#key-requirements] * **Visible withdrawal button**: A clearly labeled feature that's easy to find and accessible without requiring the customer to log in. * **Two-step confirmation**: After clicking the withdrawal button, the customer must confirm the withdrawal and provide their name and order details. * **Automatic confirmation**: Your store must send a confirmation of the withdrawal request to the customer on a durable medium (e.g., email). ### Who Must Comply [#who-must-comply] EU Directive 2023/2673 applies to **any business** that sells goods, services, or digital content online to consumers in the EU — regardless of where the business is located. ### Exemptions [#exemptions] The 14-day withdrawal right has exemptions for certain products. Consult local legal counsel to learn more about the exemptions and to make sure that your solution meets your legal obligations. ### Penalties for Non-Compliance [#penalties-for-non-compliance] If you don't provide the required withdrawal function after June 19, 2026, you may face: * Legal warnings * Fines of up to **4% of annual turnover** in some EU member states * An extended withdrawal period (14 days may be extended to 12 months and 14 days) > **Disclaimer** > Following this guide does not guarantee full legal compliance with EU Directive 2023/2673. Smootify provides these instructions as guidance only and assumes no responsibility for any fines, penalties, or legal consequences resulting from the implementation of this solution. We strongly recommend consulting with a legal expert to ensure your specific business meets all applicable legal obligations. *** ## Shopify Spring Edition 2026 [#shopify-spring-edition-2026] Shopify announced new features for "Customer Accounts" that help to comply with the rules, more infos on their doc [https://help.shopify.com/en/manual/fulfillment/managing-orders/returns/self-serve-returns/setup](https://help.shopify.com/en/manual/fulfillment/managing-orders/returns/self-serve-returns/setup) Double check with your lawyer if the implementation is enough, it seems not fully 100% compliant since it requires login. *** ## How to Comply on Smootify Sites [#how-to-comply-on-smootify-sites] Since headless Shopify stores built with Smootify don't use Shopify's Online Store theme directly, the native UI extensions provided by compliance apps can't be embedded into your Webflow site. The solution is to **host the withdrawal form on a Shopify-hosted page** and link to it from your Webflow site. There are several apps on the Shopify App Store that provide EU withdrawal functionality, such as: * [Revoq - EU Withdrawal Button](https://apps.shopify.com/eu-withdrawal-form) (Free plan available — tested and recommended by Smootify) * [EU Withdrawal Button & Form](https://apps.shopify.com/eu-widerrufsbutton) (Free plan available) * [Retractly: EU Withdrawal](https://apps.shopify.com/revoka) (Free plan available) The following steps use **Revoq** as the example, since it is the only app tested by the Smootify team. *** ## Implementation Steps [#implementation-steps] ### Create a Minimal Layout File [#create-a-minimal-layout-file] In your Shopify Admin, go to **Online Store > Themes** and edit the **Smootify Redirect** theme. Create a new layout file called `eu.liquid` with the following content: ```liquid {{ page_title }} {%- if settings.favicon != blank -%} {%- endif -%} {{ content_for_header }} {{ content_for_layout }} ``` This is a minimal layout that only renders the app block content, with `noindex` to prevent search engines from indexing the page. ### Create a Page Template [#create-a-page-template] The page template cannot be created directly with code because it needs to include the app block. Instead, follow these steps: 1. Go to **Online Store > Pages** and create a new page with any title (e.g., "EU Withdrawal"). 2. In your Shopify Admin, go to **Online Store > Themes** and click **Customize** on the Smootify Redirect theme. 3. In the customizer, navigate to the page you just created using the dropdown at the top. 4. Click **Save** — this creates the `page.eu.json` template file with the necessary app block structure. 5. Now go back to **Online Store > Themes**, click the three-dot menu on the Smootify Redirect theme, and select **Edit code**. 6. Navigate to **Templates** and open `page.eu.json`. Change the `"layout"` value from `"default"` to `"eu"`: ```json { "layout": "eu", ...rest of the file } ``` This ensures the page uses the minimal `eu.liquid` layout instead of the default theme layout. ### Install Revoq and Add the App Block [#install-revoq-and-add-the-app-block] Install the [Revoq app](https://apps.shopify.com/eu-withdrawal-form) from the Shopify App Store. Once installed, open the page you created in Step 2 and add the **Revoq withdrawal form app block** to it. Configure the app settings as needed (appearance, languages, etc.). ### Link to the Shopify-Hosted Page [#link-to-the-shopify-hosted-page] Copy the URL of the Shopify-hosted page (e.g., `https://your-store.myshopify.com/pages/eu-withdrawal`) and add it as a link in your Webflow site — typically in the footer, a dedicated compliance page, or wherever your legal links are located. *** ## Important Notes [#important-notes] * The Shopify-hosted page uses the `noindex` meta tag to prevent search engines from indexing it — this is intentional since it's a functional page, not a content page. * The minimal layout ensures only the withdrawal form is rendered, with no theme styling interference. * The Revoq app supports all 24 EU languages out of the box. # Overview (/docs/internationalization) # Selling Globally [#selling-globally] Smootify Docs

## Introduction [#introduction] **Smootify** empowers global e-commerce by seamlessly integrating Shopify and Webflow. Leverage Shopify's multi-currency and multi-language capabilities while utilizing Webflow's native Localization Plan. Smootify automatically synchronizes all language variations, dynamically adjusting the Shopify Market to match the currently selected Webflow language, ensuring a consistent and localized shopping experience. ### Multi-Currency Support [#multi-currency-support] Shopify allows merchants to sell in multiple currencies, providing a seamless shopping experience for customers worldwide. Key features include: * Automatic currency conversion based on customer location * Display of local currency throughout the shopping experience * Integration with Shopify Payments for real-time exchange rate adjustments ### Localized Storefronts [#localized-storefronts] To create a personalized experience for global customers, Shopify offers localization features such as: * Multiple language support with Shopify's translation APIs and apps * Custom domain settings for different regions * Geo-targeting to display region-specific content and pricing ### Duties and Taxes Calculation [#duties-and-taxes-calculation] Selling internationally involves handling different tax regulations. Shopify simplifies this by: * Automatically calculating duties and import taxes at checkout * Providing tax-inclusive pricing for compliance with regional tax laws * Integration with tax services for accurate reporting ### International Shipping and Fulfillment [#international-shipping-and-fulfillment] Shopify provides various shipping options to cater to global customers: * Carrier-calculated shipping rates with major providers like DHL, UPS, and FedEx * Shopify Markets for region-based shipping rules and delivery options * Partnership with fulfillment networks for efficient global logistics ### Shopify Markets [#shopify-markets] Shopify Markets is a centralized hub that allows merchants to manage global selling in one place. Features include: * Custom pricing for different regions * Market-specific SEO optimization * Automated currency and language detection ### Payment Gateway Support [#payment-gateway-support] To cater to diverse global audiences, Shopify supports: * Multiple payment gateways beyond Shopify Payments, such as PayPal, Stripe, and local processors * Fraud prevention tools for secure transactions * Buy now, pay later (BNPL) options in select regions ## Benefits of Internationalization [#benefits-of-internationalization] * **Increased Sales**: Expanding to international markets unlocks new revenue streams. * **Enhanced Customer Experience**: Localized content and pricing improve customer trust and satisfaction. * **Simplified Operations**: Automated tax, shipping, and currency features reduce manual workload. * **Competitive Advantage**: A global presence strengthens brand positioning. For more information, visit [Shopify Markets](https://www.shopify.com/markets) and [Webflow Localization](https://webflow.com/localization). # Markets Switcher (/docs/internationalization/markets-switcher) ## Component [#component] To sell in multiple currencies with Smootify you have just to add the country switcher, is a dropdown that will let your customers select the market they want to view.

The dropdown will automatically refresh cart and all your products. Products that are not available on the selected market will show a banner in DEV mode (webflow\.io domain) and deleted/redirected on the live domain. # Shopify Markets (/docs/internationalization/markets) Shopify is known for helping businesses get up and running with incredible ease and speed. And now, Shopify is going to help you grow and expand your business just as easily and just as fast. Smootify Docs

## What is Markets? [#what-is-markets] Markets, formerly known as Shopify’s cross-border selling solution, has evolved to become a one-stop shop for expansion on Shopify. Markets enables growth not only via international expansion, but also through retail and B2B (B2B is available on Plus plans only). What’s more, businesses will be able to customize everything from their catalog to their store’s theme, currency, domains and business entities—all within a single shop—in order to create customized buyer experiences for each of their markets. ## What are the benefits of using Markets? [#what-are-the-benefits-of-using-markets] Markets is for businesses in every stage of growth an able to accommodate any expansion journey, whether you’re a brand new customer on Shopify looking to expand internationally, a scaling business selling B2B, or an enterprise already operating a network of retail stores. Think of Markets as your command center for growth: the place to see all the markets you operate in, to compare their performance, and to expand your business to new countries or experiment with new business models. When Markets rolls out, if you’re already selling cross-border, B2B, or retail with Shopify, you’ll automatically start seeing your existing markets within the new Markets interface. And if you haven’t yet expanded your business and you’re not sure where to begin, you’ll be able to jump into Markets and get started. ## How does Markets work? [#how-does-markets-work] Let’s say you’re hoping to expand to the UK. To start, you’d create a new market and add the UK as a region. You can then customize your catalog for your UK market, making sure that the products, pricing, and availability are what you want to surface to your UK buyers. You can also customize your store’s theme to be tailored to your UK audience. Let’s say you start getting traction in the UK, and, because you are on a Plus plan, you decide to start selling wholesale in the region. Simply create a new market, and add your UK region and your UK B2B buyer company locations. Markets automatically inherits all your customizations from your UK market, and you can tweak your catalog and theme to be just right for your B2B buyers. Reference: [https://www.shopify.com/blog/markets](https://www.shopify.com/blog/markets) # Shopify Localization (/docs/internationalization/shopify) The Shopify [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) app is a powerful tool designed to help Shopify merchants expand their global reach by localizing their online stores. ## Purpose [#purpose] The primary goal of the app is to enable merchants to easily translate and adapt their store's content for different languages and markets. This allows businesses to cater to a wider audience and provide a more personalized shopping experience for international customers. ## Translation [#translation] It offers both manual and automatic translation capabilities. Merchants can manually edit and refine translations to ensure accuracy and cultural relevance. The app also provides auto-translation, allowing for quick and efficient translation of store content, with a certain amount of free auto translations. ## Adaptation [#adaptation] Beyond simple translation, the app allows for adaptation of content to suit specific markets. This means merchants can adjust product descriptions, marketing messages, and other content to resonate with local preferences and cultural nuances. ## Integration [#integration] Being a native Shopify app, it integrates seamlessly with the Shopify platform, simplifying the localization process. ## Market Expansion [#market-expansion] It is a tool that greatly helps merchants to expand into new markets, by removing language barriers. In essence, the Shopify Translate & Adapt app empowers businesses to create a truly localized shopping experience, fostering trust and increasing conversions among international customers. # Store Availability (/docs/internationalization/store-availability) ## Overview [#overview] **Store Availability** is a feature designed to assist merchants with multiple physical store locations in displaying where a specific product is available. Smootify Docs

Typically integrated into the product page, this functionality informs customers about the product's availability at a particular store and provides the estimated delivery date accordingly.

## Component [#component] To integrate it into your store, simply add the following component to the product page, ensuring it is placed within the product page wrapper. ## How to add more Locations [#how-to-add-more-locations] To add multiple physical locations to your store, navigate to **Settings > Locations** and enter the name and address of each new location. Smootify Docs

To manage the availability of an individual product at a specific location, simply update the availability settings within the product’s page, selecting the relevant location where it is in stock. Smootify Docs

# Store Locator (/docs/internationalization/store-locator) ## Overview [#overview] Our Store Locator add-on will help you show all your physical stores, dealers, distributors, and more on a single page on your Shopify website. Use [Mapbox](https://www.mapbox.com/) maps to display store locations/dealer locations with exact addresses to make the shopping process as easy as it can be.

## Component [#component] To start, copy the element below inside your Webflow project. ## Create a Mapbox Token [#create-a-mapbox-token] Once you’ve created your Mapbox account, click on Create a Token Smootify Docs

Add the name you want and leave the Public Scopes as default Smootify Docs

Then add the URL of your project like the samples below and click on Create a Token Smootify Docs

Once done you can Copy the token. Smootify Docs

Select the Store Locator custom element (from the component used in the first step) into the Webflow navigator and paste the token into the data-api-key value. Smootify Docs

## How to add Locations [#how-to-add-locations] To add your stores locations, go to Shopify Settings and click on Locations. Then you need to add your locations clicking on the Add location button. Smootify Docs

Don’t forget to select the pick-up in store from the Shipping and delivery menu.

## How to customize the map style [#how-to-customize-the-map-style] To create your own map style, go to Mapbox Studio and click on New Style button.

Once done, copy the Style URL.

# Preferred Store (/docs/internationalization/store-switcher) ## Overview [#overview] This feature allows you to preselect a physical store from the available locations, displaying only the products currently in stock at that specific location.

## Component [#component] To add this feature to your store, simply copy the component below and place it anywhere in your Webflow project. ## How to add more Locations [#how-to-add-more-locations] To add multiple physical locations to your store, navigate to **Settings > Locations** and enter the name and address of each new location. Smootify Docs

To manage the availability of an individual product at a specific location, simply update the availability settings within the product’s page, selecting the relevant location where it is in stock.

# Webflow Localization (/docs/internationalization/webflow) ## Customize your locales [#customize-your-locales] Design, build, and customize localized sites directly in Webflow — visually, without writing code. ## What are the benefits of website localization? [#what-are-the-benefits-of-website-localization] Embracing website localization offers multiple advantages that are crucial for businesses aiming to expand their global footprint, such as: ## Higher SEO rankings [#higher-seo-rankings] Localizing your website optimizes it for region-specific keywords and phrases commonly used in search engines like Google and Bing. This localization leads to better search engine optimization (SEO) and visibility in local search results, drawing in audiences actively searching in their native language. For example, incorporating popular Japanese search terms into your website will boost its rankings on Japanese search engine results pages (SERPs), which drives more targeted and organic traffic. ## Enhanced brand image [#enhanced-brand-image] Adapting your website to respect and reflect your target audience’s local culture and language demonstrates a commitment to understanding their unique needs and preferences. This level of personalization shows cultural sensitivity and fosters trust and loyalty among your audience, helping create stronger, more meaningful connections with existing and potential customers. Consider how a website that reflects local holidays and traditions in its content and design can significantly improve the audience’s perception of the brand as empathetic and considerate. For example, an ecommerce platform might adapt its color scheme and imagery to appeal to Japanese cultural preferences. It could introduce red to symbolize excitement and energy and white to create a sense of space and simplicity, aligning the site’s aesthetic with Japanese cultural values. ## Expanded audience reach [#expanded-audience-reach] Each new localized site version opens doors to a new demographic, complete with its own market dynamics and consumer preferences. By breaking down linguistic and cultural barriers, website localization enables you to connect with consumers who might otherwise be inaccessible or not interact with a non-localized website. This enhances your market penetration and brand reach. ## Increased customer engagement [#increased-customer-engagement] When users can navigate your site in their native language and effortlessly comprehend its contents, they’re more likely to interact with your offerings. This increased familiarity leads to longer browsing sessions, more satisfying user experiences, and higher conversion rates. For example, the ecommerce store localizing for a Japanese audience might showcase products in settings familiar to Japanese customers, using local living contexts and backgrounds in its product images. Doing so enhances product relatability and integrates products into the Japanese lifestyle narrative, making them more appealing to Japanese consumers. Additionally, the brand can reconfigure the website’s layout and visual hierarchy to support right-to-left reading patterns to meet the standard Japanese navigation expectations. ## Alignment with local buying habits [#alignment-with-local-buying-habits] Tailoring your website to regional preferences and buying habits includes customizing payment methods, shipping options, product page layouts, and even promotional activities like seasonal discounts. This customization ensures that your website aligns with the local market’s shopping behavior, making it more user-friendly and increasing the likelihood of conversions. With the example of an ecommerce store localizing for a Japanese market, the platform might update its pricing to include Japanese currency symbols and adopt local pricing conventions for quick comprehension. ## A competitive edge in global markets [#a-competitive-edge-in-global-markets] By presenting a website that speaks directly to local audiences, your brand distinguishes itself from competitors who have yet to make similar efforts. This strategic approach positions your brand as more accessible and relatable because it resonates with each region’s cultural and practical preferences. Such positioning not only enhances brand loyalty but also helps attract new customers who appreciate the tailored experience. Such targeted localization efforts help transform a company’s website design into a culturally relevant, user-friendly destination for international customers. It overcomes language barriers and cultural differences to offer an easy-to-navigate, engaging experience that enhances brand loyalty and helps attract new customers who appreciate the tailored experience. # App Embeds (/docs/apps/blocks) Some Shopify Apps do work by enabling App Embeds from the Shopify Customizer and are compatible with Webflow as well! We have created a tool inside the dashboard that automatically will help you using app embeds. This feature automatically parses the code of some apps and modifies it in order to make it compatible with Webflow & Smootify! Every time we test and found new app embeds that are compatible with Webflow we will update the integration page! So be sure to subscribe to our newsletter to stay updated about the new app features you can use! ## How to enable Apps [#how-to-enable-apps] First, go to the Shopify dashboard. On the main menu on the left, click on Online Store and go on Customize. Smootify Docs

If you have already installed the Redirect theme for the correct redirection of the checkout page links of your project, as shown in [this guide](/docs/getting-started/publish/shopify-theme), temporarily delete the URLs you added before performing this operation. Don’t forget to re-enter them at the end of this operation. Where to temporarily delete URL: Smootify Docs

### Activate the Embeds [#activate-the-embeds] Now you need to activate all the third-party apps (compatible with Smootify) that you want to show on your Webflow project. To do this, go to the App Embeds section in the upper left corner and enable the third-party apps compatible with Smootify. Smootify Docs

### Click on View [#click-on-view] Open the menu in the upper left corner and click on View. Smootify Docs

### Save as HTML [#save-as-html] From this empty preview, you will need to click CMD+S (Mac) or CTRL+S (Windows). You will be prompted to save the HTML page. Remember to select **HTML ONLY** before saving the file. For Mac: Smootify Docs

For Windows: Smootify Docs

### Drag & drop on the dashboard [#drag--drop-on-the-dashboard] Once you have saved the file, go to the App embeds section of Smootify and drag the file you just saved into the dotted area. Smootify Docs

### Browse compatible apps [#browse-compatible-apps] You will automatically see all the [listed](https://www.smootify.io/integrations) Shopify Third Party Apps enabled in your store. Smootify Docs

### Copy the code in Webflow [#copy-the-code-in-webflow] To complete the configuration correctly, follow the instructions for each individual App to copy the code into the appropriate section in Webflow. Smootify Docs

## Compatible 3rd Party Apps [#compatible-3rd-party-apps] Known supported app embeds: * [Shopify Inbox](https://apps.shopify.com/inbox) * [Instafeed](https://apps.shopify.com/instafeed?locale=it\&search_id=a68182a1-7d51-46e0-9269-79310a7dd43d\&show_store_picker=1\&surface_detail=instafeed\&surface_inter_position=1\&surface_intra_position=5\&surface_type=search) * [Klaviyo](https://apps.shopify.com/klaviyo-email-marketing?locale=it\&search_id=3a5939b3-9850-4123-94ac-6b935d05308d\&show_store_picker=1\&surface_detail=klaiviyo\&surface_inter_position=1\&surface_intra_position=2\&surface_type=search) * [Appointment Booking Cowlendar](https://apps.shopify.com/cowlendar?locale=it\&show_store_picker=1\&st_source=autocomplete) * [Shopify Forms](https://apps.shopify.com/shopify-forms) # FAQs (/docs/apps/faqs) All **Backend** Apps will work out-of-the-box. Frontend Apps instead depends by each App if it supports headless sale channel or not. Backend apps are apps that do work on the checkout, on the native Customer Account dashboard or just in the Shopify Dashboard. Frontend apps are apps that do require to inject code into your website in order to work. Not all frontend apps can be automatically embedded into Webflow, but most functionalities are either covered by our add-ons or can be recreated directly in Webflow # Overview (/docs/apps) Generally speaking all Shopify Apps that are backend only will work without any particular configuration, while for frontend apps, case by case you have to double check if the app can work in headless mode. Smootify Docs

**Backend Apps**: all apps that do not require to inject widgets or code into your own Webflow site. E.G: order invoices, product importers, inventory management etc. **Frontend Apps**: all apps that instead inject widgets or code into your own Webflow site. E.G: Instafeed, Shopify Inbox etc. Many of the frontend apps are still compatible with your Webflow site, but do require a bit of configuration or manual code. We have created a list of tested integrations that comprehend both tested backend and frontend apps. The list is not exclusive naturally, so contact us if an app you want to use is not listed yet, so we can help you find an alternative, or help you integrate it! # Judge.me (/docs/apps/judge-me-reviews) Judge.me can be installed on any external platform and not only on Shopify. It has many widgets that can easily be integrated within Webflow. that do only require you to add specific classes to divs. There are 2 elements though that will require the product id and product handle, to integrate it in an easier way with Smootify there are 2 Custom Elements that automatically inject the necessary data. Jugde.me will work in headless mode only and exclusively with the Judge.me Awesome plan ## How to setup Judge.me [#how-to-setup-judgeme] You can find here the [official documentation](https://help.judge.me/en/articles/8394958-installing-judge-me-widgets-on-external-platforms). ### Enable Review widgets [#enable-review-widgets] From your Judge.me admin, go to General Settings > Advanced > Platform-independent Review Widget. Then click on Enable platform-independent widgets Smootify Docs

Toggle the switch to enable this setting. Smootify Docs

### Copy the script in Webflow [#copy-the-script-in-webflow] After enabling the setting, you will receive a script. Please follow these instructions to add it to your page: Copy the provided script. Paste it at the bottom of your Webflow global custom code Head code section (or page by page if you use it only on few pages) ## Widgets [#widgets] ### Star Ratings [#star-ratings] This element shows up the star rating of the product. It must be added inside a Smootify product wrapper ### Reviews [#reviews] This element shows up the reviews of the product. It must be added inside a Smootify product wrapper ### Other Widgets [#other-widgets] All the other [Widgets](https://help.judge.me/en/articles/8394958-installing-judge-me-widgets-on-external-platforms#h_67cd2354b0) can be just created as normal Webflow elements, nothing created by us. # Klaviyo (/docs/apps/klaviyo-back-in-stock) [Klaviyo](https://www.klaviyo.com/) is a very powerfull platform for marketing automation. Marketing automation helps you complete tasks across your entire customer experience without having to be hands-on. With Klaviyo’s intelligent marketing automation software, you can automate personalized content with your data—without pressing send—and get a complete view of every customer. For example, build cross-channel experiences with email, SMS, and push notifications in the same flow—with consolidated reports in one place. Integrating Klaviyo with Webflow is very easy. If you use the Shopify App embed, you have just to copy and paste the code you will find in your Smootify dashboard! Otherwise you can just follow up their [official doc](https://developers.klaviyo.com/en/docs/javascript_api#add-the-klaviyo-snippet) in order to embed the scripts inside Webflow. Is suggested to enable the [auto track](https://docs.smootify.io/analytics/auto-track) feature in order to automatically track add to cart events on klaviyo. ## Back in Stock [#back-in-stock] Klaviyo has a very cool flow that integrates with Shopify! Back in Stock flow that automatically notifies all customers subscribed when a product is back in stock! To use it in Webflow just copy and paste the following element inside the Product Wrapper: On the Klavivyo back in stock dom element, modify the custom attribute: Your company ID public key can be found in your Klaviyo dashboard > Profile Settings > API Keys Smootify Docs

## Flow [#flow] Without creating a flow this integration will basically do nothing. So create a new flow starting directly from the Klaviyo premade Back In Stock Flow. Smootify Docs

# Klaviyo (/docs/apps/klaviyo-reviews) [Klaviyo](https://www.klaviyo.com/) is a very powerfull platform for marketing automation. Integrating Klaviyo with Webflow is very easy. If you use the Shopify App embed, you have just to copy and paste the code you will find in your Smootify dashboard! Otherwise you can just follow up their [official doc](https://developers.klaviyo.com/en/docs/javascript_api#add-the-klaviyo-snippet) in order to embed the scripts inside Webflow. After integrating the App Embed, you can also install [Klaviyo Reviews App](https://apps.shopify.com/klaviyo-reviews), it has many widgets that can be embedded into Webflow very easily. ## General Widgets [#general-widgets] This widgets can be used in all pages by just adding a code embed inside Webflow ### All Reviews [#all-reviews] ![](https://help.klaviyo.com/hc/article_attachments/28716056674203) ```html

``` ### Featured Reviews Carousel [#featured-reviews-carousel] ![](https://help.klaviyo.com/hc/article_attachments/28716067105435) ```html

``` ## Product Page Widgets [#product-page-widgets] The following widgets instead can be used only in the Product template page ### Product Reviews [#product-reviews] ```html

``` ### Product Reviews List [#product-reviews-list] ![](https://help.klaviyo.com/hc/article_attachments/28716067100827) ```html

``` ### Product Reviews Summary [#product-reviews-summary] ![](https://help.klaviyo.com/hc/article_attachments/28716056660891) ```html

``` ### Product Average Rating [#product-average-rating] ```html

``` # Loox (/docs/apps/loox-reviews) Loox can be installed on any external platform and not only on Shopify, follow up their [official guide](https://help.loox.io/article/416-how-do-i-white-list-an-external-domain-to-display-the-loox-iframe) in order to properly configure domains. It has many widgets that can easily be integrated within Webflow. that do only require you to add specific classes to divs. Loox will work in headless mode only and exclusively from the Scale plan and above. ## General Widgets [#general-widgets] This widgets can be used in all pages by just adding a code embed inside Webflow ### All Reviews [#all-reviews] ![](https://cdn.prod.website-files.com/5ffc7412b3a51afe672e9657/64ef2dde1df0f365b3dcec5c_image%20frame-p-500.png) ```html

``` ### Cards Carousel Widget [#cards-carousel-widget] ![](https://cdn.prod.website-files.com/5ffc7412b3a51afe672e9657/64ef33b71577b0336b0d63bd_cards-carousel-widget-p-500.png) ```html

``` ### Testimonials Carousel Widget [#testimonials-carousel-widget] ![](https://cdn.prod.website-files.com/5ffc7412b3a51afe672e9657/64ef339eddb0cd20b512e596_testimonials-carousel-widget.png) ```html

``` ### Gallery Carousel Widget [#gallery-carousel-widget] ![](https://cdn.prod.website-files.com/5ffc7412b3a51afe672e9657/64ef33ac79d2d5dc32452c0b_gallery-carousel-widget-p-500.png) ```html

``` ### Popup Widget [#popup-widget] ![](https://cdn.prod.website-files.com/5ffc7412b3a51afe672e9657/64ef32f6417007f9e9ef65a1_pop-up-widget-p-500.png) ```html ``` ### Sidebar Widget [#sidebar-widget] ![](https://cdn.prod.website-files.com/5ffc7412b3a51afe672e9657/64f8868321b843d317c022af_reviews-sidebar-widget-p-500.png) ```html ``` ### Video Slider Widget [#video-slider-widget] ![](https://cdn.prod.website-files.com/5ffc7412b3a51afe672e9657/667d60e49149b3267c6d4265_video-slider-widget-cover-p-500.webp) ```html ``` ## Product Page Widgets [#product-page-widgets] The following widgets instead can be used only in the Product template page ### Product Reviews [#product-reviews] ![](https://cdn.prod.website-files.com/5ffc7412b3a51afe672e9657/64ef2dde1df0f365b3dcec5c_image%20frame-p-500.png) ```html

``` ### Star Rating Widget [#star-rating-widget] ![](https://cdn.prod.website-files.com/5ffc7412b3a51afe672e9657/64ef335530957f505b374a77_rating-widget-p-500.png) ```html

``` # Additional Data (/docs/cart/additional-data) In Shopify, "cart attributes" are essentially custom pieces of information that you can attach to a customer's shopping cart. They allow you to gather extra details from the customer during the purchase process, beyond the standard products informations. Cart attributes enable you to capture specific data that might be relevant to an order, such as: * Gift messages * Delivery instructions * Special requests * Survey responses ## Cart Attributes in Webflow [#cart-attributes-in-webflow] Since in Webflow the Cart created by Smootify is just a simple form, you can add any additional input element (Select, radio buttons, text fields, textarea, checkboxes…) and it will be automatically saved up as Cart Attribute. You will be able to see the cart attributes on your Shopify backend in the Additional Details area: Smootify Docs

There is no need for code, or for any attribute or things like that. Just add native Webflow inputs inside the Cart form and they will be automatically sent as cart attributes. ## File Uploader Input [#file-uploader-input] Inside the cart form you can also use the File Uploader File Uploader Input requires the Server Plan. The file will be uploaded directly on Shopify so the limits are imposed by Shopify: * Maximum file size is 20MB; * Maximum resolution is (4300 x 4300); * Allowed formats: png, jpg, web, csv, pdf and json. If you need different limits we suggest you using **UploadCare** or create a solution with **Cloudflare R2** that is the cheapest file hosting on the market. In that case you will use a different upload solution be sure to set the field on Shopify as url, Shopify File field will not accept files not uploaded on Shopify. ### Options [#options] The component can be customized with the Custom Attributes explained in the section below: #### Input Name [#input-name] By default the Input will be created with name `File`, if you need to customize the name just use the attribute: #### Multiple Files [#multiple-files] If you need to allow multiple files uploading you can use the attribute: #### Min File Size [#min-file-size] If you need to customize the minimuum file size required you can use the attribute: for example Will set the minimuum allowed file size to 2MB Max file size is 20MB and cannot be modified, since that is the limit imposed by Shopify #### Min Resolution [#min-resolution] If you need to customize the minimuum file image resolution required you can use the attribute: Max resolution is 18.490.000 and cannot be modified, since that is the limit imposed by Shopify #### Show Image Preview [#show-image-preview] If you want to see the preview image of the file just uploaded in the file input, you can use the attribute: #### Accept only images [#accept-only-images] By default the file uploader will accept all file types accepted by Shopify, if you want to accept only images you can add the attribute: # Cart Page (/docs/cart/cart-page) ## What is the Shopify Cart Page? [#what-is-the-shopify-cart-page] The Shopify Cart page is a crucial part of the customer's buying journey. It's where customers review the items they've added to their cart, adjust quantities, apply discounts, and proceed to checkout. It's more than just a list of products; it's a critical touchpoint that can significantly influence conversion rates. Smootify Docs

## Key Elements of the Shopify Cart Page [#key-elements-of-the-shopify-cart-page] A typical Shopify Cart page includes the following elements: * **Product Listings:** Displays each item in the cart, usually with an image, name, price, and any selected variants (e.g., size, color). * **Quantity Adjustments:** Allows customers to change the quantity of each item. This is essential for both customers and potential upselling opportunities. * **Remove Item Option:** Provides a way for customers to delete items from their cart. * **Subtotal Calculation:** Shows the total cost of the items in the cart before taxes and shipping. * **Discount Code Field:** A place for customers to enter and apply discount codes. * **Gift Card Field:** A place for customers to enter and apply gift cards. * **Order Total:** Displays the final price, including all taxes and shipping costs (if calculated). * **Checkout Button:** A prominent button that leads the customer to the checkout process. * **(Optional) Cross-selling/Upselling Suggestions:** May display related products or suggestions to increase average order value. ## Cart Element [#cart-element] The Cart element can be customized to match your store's branding and improve the user experience. The Cart element component is a **Custom Element** with tag `smootify-cart` that contains a Webflow form, the empty state of the cart is the **Success State** of the form so be sure to style it! ### All Parts of the Cart [#all-parts-of-the-cart] #### Cart Item [#cart-item] The Cart Item is a **Custom Element** with the tag `cart-item`, it's a template placeholder that will be replicated automatically once for each **Line Item** added to the cart. In the context of Shopify, a **Line Item** refers to an individual *merchandise* added to the cart. Where for merchandise Shopify means the unique product variant + properties combination added to the cart. Essentially, it represents each separate variant with same properties that a customer purchases. Inside the `Cart Item` you can use the following elements: #### Quantity Input \[!toc] [#quantity-input-toc] The quantity input component is an user interface element designed to facilitate the selection of numerical values. It provides a structured way for users to increment, decrement, or directly input a desired quantity. This component includes interactive elements like increment and decrement buttons, as well as a numerical input field, to enhance user experience. #### Product Title \[!toc] [#product-title-toc] You can mark any text element with the attribute to render the product title relative to the *line item* added to the cart. #### Quantity \[!toc] [#quantity-toc] You can mark any text element with the attribute to render the quantity of the *line item* added to the cart. #### Price \[!toc] [#price-toc] You can mark any text element with the attribute to render the price of a single product relative to the *line item* added to the cart. #### Compare At Price \[!toc] [#compare-at-price-toc] You can mark any text element with the attribute to render the compare at price of a single product relative to the *line item* added to the cart. #### Subtotal \[!toc] [#subtotal-toc] You can mark any text element with the attribute to render the subtotal of the *line item* added to the cart. #### Total \[!toc] [#total-toc] You can mark any text element with the attribute to render the total of the *line item* added to the cart. Total is Subtotal less Discount Code applied. #### Compare At Total \[!toc] [#compare-at-total-toc] You can mark any text element with the attribute to render the compare at price multiplied by the quantity of a product relative to the *line item* added to the cart. #### Vendor \[!toc] [#vendor-toc] You can mark any text element with the attribute to render the vendor of the *line item* added to the cart. #### URL \[!toc] [#url-toc] You can mark any link element with the attribute to render the url to the product relative to the *line item* added to the cart. #### Image \[!toc] [#image-toc] You can mark any image element with the attribute to render the url to the variant relative to the *line item* added to the cart. #### Product Image \[!toc] [#product-image-toc] You can mark any image element with the attribute to render the url to the product relative to the *line item* added to the cart. #### Discount \[!toc] [#discount-toc] You can create a template element that will be duplicated once for each Discount code that is applied at **line item** level by using the attribute Inside the template you marked as discount you can use 2 additional attributes on any text element: ##### Discount Title \[!toc] [#discount-title-toc] ##### Discounted Amount \[!toc] [#discounted-amount-toc] #### Options and Properties \[!toc] [#options-and-properties-toc] You can create a template element that will be duplicated once for each Option and Property that is relative to the **line item** by using the attribute Inside the template you marked as discount you can use 2 additional attributes on any text element: ##### Name \[!toc] [#name-toc] ##### Value \[!toc] [#value-toc] #### Metafields \[!toc] [#metafields-toc] You can also use metafields connected to the product relative to the merchandise by using same attributes you found in the [products documentation](/docs/ecommerce/products/metafields). #### Checkout Button [#checkout-button] The `Checkout` button is a prominent interactive element that initiates the final stage of the online purchase process. Clicking this button transitions the user from their shopping cart to the checkout page, where they will provide shipping, payment, and order confirmation details. In Webflow this element is just the `Submit Input` of the form (in Webflow is called `Form Button`). #### Coupon Input [#coupon-input] This Component allows you to apply a Coupon code directly from the cart When you copy and paste forms in Webflow, the field names are automatically changed. Please note that the input field name must be set to: **coupon**. #### Gift Card Input [#gift-card-input] This Component allows you to apply a Gift Card directly from the cart When you copy and paste forms in Webflow, the field names are automatically changed. Please note that the input field name must be set to: **gift-card**. ### All Cart Attributes [#all-cart-attributes] Below you can find a list of all attributes you can use to customize your Cart Element #### Count [#count] You can mark any text element with the attribute to render the number of items added to the cart. #### Subtotal [#subtotal] You can mark any text element with the attribute to render the formatted price of the subtotal amount for the customer to pay, before discounts being applied #### Total [#total] You can mark any text element with the attribute to render the formatted price of the total amount for the customer to pay, it's an estimation since taxes, duties and shipping are calculated correctly only on Checkout. So basically it will be Subtotal less Discounts #### ~~Taxes~~ [#taxes] You can mark any text element with the attribute to render the formatted price of the taxes amount for the customer to pay, it's an estimation since taxes are calculated correctly only on Checkout. [Tax and Duties are deprecated in Storefront Cart API](https://shopify.dev/changelog/tax-and-duties-are-deprecated-in-storefront-cart-api) As of API version `2025-01`, Shopify deprecated the tax and duty fields in Storefront API Cart. Tax and Duties are calculated at Checkout where they can be finalized with the complete context of the buyer's information, ensuring greater accuracy. #### ~~Duties~~ [#duties] You can mark any text element with the attribute to render the formatted price of the duties amount for the customer to pay, it's an estimation since duties are calculated correctly only on Checkout. [Tax and Duties are deprecated in Storefront Cart API](https://shopify.dev/changelog/tax-and-duties-are-deprecated-in-storefront-cart-api) As of API version `2025-01`, Shopify deprecated the tax and duty fields in Storefront API Cart. Tax and Duties are calculated at Checkout where they can be finalized with the complete context of the buyer's information, ensuring greater accuracy. #### Discount [#discount] You can create a template element that will be duplicated once for each Discount code that is applied at cart level by using the attribute Inside the template you marked as discount you can use 2 additional attributes on any text element: ##### Title \[!toc] [#title-toc] ##### Discounted Amount \[!toc] [#discounted-amount-toc-1] And additionally you can mark an element inside the template element (like an icon or a div) to be used as remove coupon by adding the attribute #### Gift Card [#gift-card] You can create a template element that will be duplicated once for each Gift Card that has been applied to the cart Inside the template you marked as gift card you can use 2 additional attributes on any text element: ##### Code \[!toc] [#code-toc] ##### Amount \[!toc] [#amount-toc] And additionally you can mark an element inside the template element (like an icon or a div) to be used as remove gift card by adding the attribute ### Link to Online Store Cart Page [#link-to-online-store-cart-page] You can mark any link of your store as a link to the Online Store Cart Page with the attribute: This can be usefull when you have to use an app for cart that works only on the Online Store, like [Pickeasy](https://apps.shopify.com/order-delivery-date-time) This feature will work properly only if you correctly configured domains and our **modified redirect theme**. To share the cart across Webflow server and Shopify server a cookie must be set and they are accepted by the browser only and exclusively if the **domain authority** is the same. This means that you will not see the proper cart if you are testing your site on `*.webflow.io` and will not work either if you didn't properly attached domains to **Webflow** and **Shopify**. Basically works only if you are in this domain situation: * Domain on Webflow -> `www.domain.tld` * Domain on Shopify -> `*.domain.tld` # Cart Upsells (/docs/cart/cart-upsells) Cart upsells is a very handy features that is basically a reactive Product alert system that will recommend you products based on the latest product added to the cart. Like the other recommended products you can also choose manual recommendations using the app [Search & Discovery](https://apps.shopify.com/search-and-discovery). This Add-On is included in all plans. ## How to Setup \[Webflow] [#how-to-setup-webflow] ### Create a Cart Upsell Listing [#create-a-cart-upsell-listing] To display cart upsells, create a dynamic product listing. #### Add a Flex or Grid element [#add-a-flex-or-grid-element] Design your flex/grid by keeping in mind that the replication of your product items will only occur on the live website, where your placeholder will be transformed into the full product listing. #### Design the Product Template item [#design-the-product-template-item] Copy and paste the Product Custom Element inside the flex/grid element you created. Inside the Product Custom Element you can insert any static Webflow element. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) Copy and paste our pre-made example inside the flex/grid element you created.

Naturally you can insert any Webflow element you desire inside the pre-made examples. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) #### Add the `data-id` attribute [#add-the-data-id-attribute] To retrieve the correct data from Shopify, add the necessary `data-id` attribute. #### \[Optional] Limit the number of products [#optional-limit-the-number-of-products] By default the dynamic queries explained before will fetch 3 products. You can override this limit by adding another custom attribute to the **Product Custom Element** E.g to fetch 10 products you can add: Note that max 10 products can be effectively show ### Use Conditional visibility for the listing [#use-conditional-visibility-for-the-listing] To further enhance your design you can use conditional visibility attributes #### Has Cart Upsells [#has-cart-upsells] Apply the following custom attribute on the element that you want to appear only and exclusively when there is at least 1 cart upsell ## How products are recommended? [#how-products-are-recommended] The products you will see in the **Cart Upsell** listing are the related and complementary of the latest product added to the cart, with priority given to complementary so you can slightly modify them by using the app `Search & Discovery`. Since related products if not set manually inside Search & Discovery app are defined by Shopify directly, you can also further fine up the upselling section by changing the attribute With 2 different values that you can find listed below: ### Cart Complementary [#cart-complementary] If you want to show up only complementary products of the latest product added to the cart use the attribute on the Smootify Product Custom Element ### Cart Related [#cart-related] If you want to show up only related products of the latest product added to the cart use the attribute on the Smootify Product Custom Element # Draft Orders (/docs/cart/draft-orders) With this Add-on, you can enable your customers to submit a quote request for selected products. Customers can specify the desired quantities, provide their email address, and include a message directly from your store. You will receive a draft order in your Shopify dashboard, where you have the option to apply a discount and send an invoice. The customer can then complete the payment seamlessly through Shopify’s checkout. This Add-On requires the Server Plan. The server is necessary to create a draft order with price override This Add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing. ## How to use it? [#how-to-use-it] ### Activate the Add-on [#activate-the-add-on] To activate the Draft Orders add-on you need to select your connected project from the Smootify dashboard and enable the Draft Orders add-on available in the Sites add-ons section. Smootify Docs

### Copy the Component [#copy-the-component] Now you only need to copy and paste the following Webflow component to your Webflow project: When you copy and paste forms in Webflow, the field names are automatically changed. Please note that the email field for this add-on must be set to: **email**. Smootify Docs

### Send the Draft Orders [#send-the-draft-orders] Once the customer submits a quote request through your website, a draft order will be automatically generated and available in the Draft Orders section of your Shopify dashboard. Smootify Docs

From the Shopify panel, you can apply a discount and send an invoice directly to the email address provided by the customer during the quote request. Smootify Docs

The customer will receive an email with a payment request, which will be processed directly through your store’s checkout at the pre-determined discounted price. The `Draft Order` Component is basically the `Smootify Cart`element with the custom attribute applied 2 inputs, the first one of type Email and name Email is mandatory to have, the second one is not mandatory, so if you wish you can use your already designed cart page and just add the input and the custom attribute! and a different Success State, in this case the Success State is used to really indicate that the Draft Order has been sent ## Conditional Visibility [#conditional-visibility] Inside the `Draft Order Cart` there are 2 additional conditional visibility attributes you can use, that's because the Success State in this case is used to inform the customer that the draft order request has been sent successfully ### Has Items In Quote [#has-items-in-quote] Apply the following custom attribute on the element that you want to appear only and exclusively when there is at least 1 item in the cart ### No Items In Quote [#no-items-in-quote] Apply the following custom attribute on the element that you want to appear only and exclusively when there are no items in quote ## Get notified of new Draft Orders [#get-notified-of-new-draft-orders] Thanks to the Shopify Flow App, you can automate notifications directly from your Shopify dashboard. Each time a user submits a quote request, you can receive an instant email alert. We have already created the workflow for you—simply download the file below and import it into your Shopify Flow app. Once imported, please remember to edit the flow to replace the default email with your own (the address where you wish to receive notifications). # FAQs (/docs/cart/faqs) Yes absolutely! The Cart Component is just a form you can add any input you wish! You will see it in the backend of Shopify inside Orders or Draft Orders section! # Free Shipping Progress (/docs/cart/free-shipping-progress) ## Overview [#overview] Add a dynamic progress bar inside your cart to encourage customers to add more products and unlock free shipping.

## Component [#component] Copy and paste the component below into the Smootify Mini Cart and/or the Smootify Cart DOM Element. You can choose to offer free shipping once a set quantity of products is in the cart by simply changing the value of the custom attributes in the Free Shipping Bar DOM element. Or you can choose to offer free shipping once a predetermined order amount is reached by adding this custom attribute to the Free Shipping Bar DOM element. # Overview (/docs/cart) ## What is the Shopify Cart? [#what-is-the-shopify-cart] The Shopify cart is a virtual shopping basket that allows customers to collect items they intend to purchase from a Shopify store. It's a crucial part of the customer journey and a well-optimized cart experience is essential for maximizing conversions and customer satisfaction. ## Key Functionalities [#key-functionalities] The Shopify cart offers a range of features designed to streamline the purchasing process: * **Product Display:** Displays selected products with details like image, name, quantity, price, and variants (e.g., size, color). This allows customers to review their choices. * **Quantity Management:** Enables customers to adjust the quantity of each item in their cart. This is important for both customers and upselling opportunities. * **Price Calculation:** Automatically calculates the subtotal, including the price of each item and the total cost of all items. * **Discount Application:** Allows customers to apply discount codes or gift cards for promotions and incentives. The cart updates the total accordingly. * **Secure Checkout Pathway:** Provides a clear and secure route to the checkout process, building trust and ensuring a smooth transition to order completion. A prominent "Checkout" button is typically used. * **Cross-selling/Upselling Opportunities (Sometimes):** May display related products or suggest upgrades to increase average order value. ## Importance of the Shopify Cart [#importance-of-the-shopify-cart] The Shopify cart is critical for several reasons: * **Conversion Rate Optimization:** A well-designed and user-friendly cart minimizes friction and encourages customers to complete their purchases. A confusing or difficult cart experience can lead to abandoned carts. * **Enhanced Customer Experience:** A clear and intuitive cart makes shopping easier and more enjoyable, increasing customer satisfaction and loyalty. * **Sales Facilitation:** By providing a clear overview of the order and a smooth path to checkout, the cart directly contributes to sales revenue. # Mini Cart (/docs/cart/mini-cart) ## Overview [#overview] The Shopify Mini Cart is a compact shopping cart interface that provides customers with a quick and seamless way to view and manage the items in their cart without leaving the current page. It enhances user experience by reducing friction in the shopping process and encouraging conversions. ## Features [#features] * **Real-time Cart Updates**: Automatically updates when items are added or removed. * **Quick View**: Displays a summary of cart items, quantities, and subtotal. * **Interactive Buttons**: Allows users to modify quantities or remove items instantly. * **Seamless Checkout Link**: Directs users to the checkout page efficiently. * **Customization Options**: Can be styled and modified to match the store's branding. The mini cart element is just the Cart Element modified to work inside a a dropdown, you can add inside same attributes and same elements you can find explained in the [cart page](/docs/cart/cart-page) ## Mini Cart (Webflow Dropdown) [#mini-cart-webflow-dropdown] The mini cart element is just the Cart Element modified to work inside a native Webflow Dropdown. Our mini cart element by default opens up whenever a customer adds a product to the cart. You can disable this behaviour by removing the custom attribute, that is already inserted on our element: ## Mini Cart Modal [#mini-cart-modal] The Mini Cart Modal component allows you to have a customized version compared to the native Webflow Dropdown Mini Cart. To personalize the content of the Mini Cart Modal, simply select the Dialog DOM element and add the following custom attribute, which will make the customizable modal appear in the designer.

The mini cart modal uses Motion One animations under the hood, you can modify them by adding the script below ```html ``` Those are our default values, you can modify them as you prefer! ## Mini Cart (Webflow Interactions) [#mini-cart-webflow-interactions] The Mini Cart (Webflow Interactions) component allows you to have a mini cart created directly with Webflow interactions The interaction is applied on the click of a specific element that has the attribute If you create your Mini Cart from scratch # Urgent Cart Countdown (/docs/cart/urgent-cart-countdown) ## Overview [#overview] Add a countdown inside your store’s cart to encourage users to complete their purchase more quickly.

## Component [#component] Copy and paste the component below into the Smootify Mini Cart and/or the Smootify Cart DOM Element. You can set the number of minutes for your countdown simply by changing the value of the custom attribute in the Urgent Cart Countdown DOM element. You can also choose to automatically empty the cart when the set time expires by adding this custom attribute to the Urgent Cart Countdown DOM element. Or you can choose to redirect to a page on your site after the set time expires by adding this attribute to the Urgent Cart Countdown DOM element. # Metaobject Creator (/docs/metaobjects/creator) This document introduces the "Metaobject Creator" add-on, a powerful tool that bridges the gap between Webflow's intuitive form building capabilities and Shopify's robust data management through Metaobjects. With this add-on, you can empower your users to create and populate Shopify Metaobjects directly from your Webflow website, eliminating the need to manually enter data in the Shopify admin. This Add-On requires the Server Plan. The server is necessary to create the metaobject on Shopify This Add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing. ## What is the Metaobject Creator Add-on? [#what-is-the-metaobject-creator-add-on] This add-on allows you to build custom forms in Webflow that directly interact with your Shopify Metaobjects. Imagine creating a form for: * **Customer Reviews:** Allow customers to submit detailed reviews with ratings, comments, and images, which are automatically stored as Metaobject entries. * **Product Submissions:** Enable vendors or creators to submit new product information, including specifications, images, and pricing, directly through your Webflow site. * **Event Registrations:** Collect detailed information for event registrations and store it as structured data in Shopify Metaobjects. * **Custom Data Collection:** Build any form to gather and organize specific data related to your business, such as feedback, surveys, or applications, and store it directly into your shopify metaobjects. ## Why Use Webflow Metaobject Forms? [#why-use-webflow-metaobject-forms] * **Simplified Data Entry:** Eliminate the need for manual data entry in the Shopify admin, saving time and reducing errors. * **Enhanced User Experience:** Provide a seamless and intuitive way for users to interact with your Shopify data through Webflow forms. * **Customizable Forms:** Leverage Webflow's powerful form builder to create visually appealing and user-friendly forms that match your brand. * **Direct Shopify Integration:** Capture data directly into Shopify Metaobjects, ensuring data consistency and accessibility. * **Automated Workflows:** Automate data collection and processing, streamlining your business operations by also leveraging new Shopify Flows triggers! ## How to configure \[Shopify] [#how-to-configure-shopify] ## Create metaobject definition [#create-metaobject-definition] Create the metaobject definition from Shopify panel > Settings > Custom Data > Metaobjects. You can create it in whatever way you like, just be sure to enable the options: * **Active-draft** status; * **Storefronts** API access; ## How to configure \[Webflow] [#how-to-configure-webflow] ## Copy our Component [#copy-our-component] The component is just a Custom Element with tag `metaobject-creator` that inside has a normal Webflow Form! ## Change the attribute [#change-the-attribute] On the **Custom Element** `metaobject-creator` there is a `Custom Attribute` that you have to modify: #### Type [#type] For example if you created a Metaobject definition with type "testimonials" and you want to connect the form to that metaobject type use the attribute: ## Configure the inputs [#configure-the-inputs] Inside the form you have to add the input fields that are necessary for the metaobject creation. The Input Names you create in Webflow must match exactly the `keys` of the fields you created in the Shopify metaobject definition. The key is usually the `snake_case` version of the label E.g: My title -> my\_title ## Configure the Active/Draft Status [#configure-the-activedraft-status] By default the metaobjects are created with **Active** status, if you want to create them instead with **Draft** status, add the attribute: on the `metaobject-creator` Custom Element. ## \[Optional] Create Flows [#optional-create-flows] If you want to further automatize your processes, you can use the Shopify Flow app to automatically react to any time a Metaobject get's created ## \[Optional] Use Customer Accounts Visibility [#optional-use-customer-accounts-visibility] You can use customer accounts and flows in order to enable or disable the metaobject creator form only for certain users. E.g you can use customer tags, or a customer metafield to enable disable the creation of metaobjects based on your conditions. For example you can allow to create max a tot of metaobjects per customer, so you would set a flow that on product purchase set a certain amount of `credits` to the customer and another flow that on each metaobject creation decreases the tokens. (Just fantasizing, but you have really unlimited possibilities) ## File Uploader Input [#file-uploader-input] Inside the metaobject creator you can also use the File Uploader The file will be uploaded directly on Shopify so the limits are imposed by Shopify: * Maximum file size is 20MB; * Maximum resolution is (4300 x 4300); * Allowed formats: png, jpg, web, csv, pdf and json. If you need different limits we suggest you using **UploadCare** or create a solution with **Cloudflare R2** that is the cheapest file hosting on the market. In that case you will use a different upload solution be sure to set the field on Shopify as url, Shopify File field will not accept files not uploaded on Shopify. ### Options [#options] The component can be customized with the Custom Attributes explained in the section below: #### Input Name [#input-name] By default the Input will be created with name `File`, if you need to customize the name just use the attribute: #### Multiple Files [#multiple-files] If you need to allow multiple files uploading you can use the attribute: #### Min File Size [#min-file-size] If you need to customize the minimuum file size required you can use the attribute: for example Will set the minimuum allowed file size to 2MB Max file size is 20MB and cannot be modified, since that is the limit imposed by Shopify #### Min Resolution [#min-resolution] If you need to customize the minimuum file image resolution required you can use the attribute: Max resolution is 18.490.000 and cannot be modified, since that is the limit imposed by Shopify #### Show Image Preview [#show-image-preview] If you want to see the preview image of the file just uploaded in the file input, you can use the attribute: #### Accept only images [#accept-only-images] By default the file uploader will accept all file types accepted by Shopify, if you want to accept only images you can add the attribute: ## Ignore Inputs [#ignore-inputs] If you need to include inputs that are not explicitly defined within the Metaobject's structure, prefix the input name with an underscore (\_). This convention allows you to add extra inputs that will not be sent to the Metaobject. Example: If you send to the server a field that is not defined in the Metaobject definition, the creation of it will fail. # FAQs (/docs/metaobjects/faqs) # Overview (/docs/metaobjects) Shopify Metaobjects are a powerful feature that allows you to define and store structured custom data within your Shopify store. Unlike Metafields, which are simple key-value pairs, Metaobjects provide a more robust and organized way to manage complex data structures. ## What are Shopify Metaobjects? [#what-are-shopify-metaobjects] Metaobjects are essentially custom database tables that you create within Shopify. They allow you to define a schema (structure) for your data, including various data types, and then create individual entries (records) that conform to that schema. Think of it like this: * **Metaobject Definition:** The blueprint or template that defines the structure of your data (e.g., "Product Reviews," "Size Charts," "Ingredients"). * **Metaobject Entries:** The individual instances of data that you create based on the Metaobject Definition (e.g., a specific product review, a size chart for a particular product, a list of ingredients for a food item). ## Key Features and Concepts [#key-features-and-concepts] * **Structured Data:** * Metaobjects allow you to define a schema with specific data types (text, numbers, dates, references to other Shopify resources, etc.). * This structured approach ensures data consistency and makes it easier to manage and query. * **Definitions:** * You create Metaobject Definitions to define the structure of your data. * Each definition includes fields with specific data types and validation rules. * **Entries:** * You create Metaobject Entries to store individual instances of your data. * Each entry conforms to the schema defined in its Metaobject Definition. * **References:** * Metaobjects can reference other Shopify resources, such as products, collections, customers, or even other Metaobjects. * This allows you to create complex relationships between your data. * **API Access:** * Metaobjects are accessible through the Shopify API, allowing you to create, read, update, and delete entries programmatically. * This makes them ideal for headless commerce applications. * **Storefront Integration:** * Metaobjects can be displayed on your storefront using Liquid or the Storefront API, enabling you to create dynamic and personalized content. * **Admin UI:** * Shopify provides an admin interface for creating and managing Metaobjects, making them accessible to merchants without coding experience. ## Benefits of Using Metaobjects [#benefits-of-using-metaobjects] * **Enhanced Data Organization:** Store complex data in a structured and organized way. * **Improved Data Consistency:** Enforce data types and validation rules to ensure data accuracy. * **Increased Flexibility:** Create custom data structures that meet your specific business needs. * **Powerful Integrations:** Leverage the Shopify API to integrate Metaobjects with other apps and services. * **Dynamic Content:** Display Metaobject data on your storefront to create personalized experiences. * **Headless Commerce:** Essential for headless commerce builds that require structured custom data. ## Use Cases [#use-cases] * **Product Reviews:** Store customer reviews with ratings, comments, and author information. * **Size Charts:** Create detailed size charts for clothing and footwear. * **Ingredients and Nutritional Information:** Store detailed ingredient lists and nutritional information for food products. * **Product Specifications:** Store technical specifications and detailed information for complex products. * **Customer Profiles:** Store customer preferences and loyalty program information. * **Custom Product Configurators:** Store configurations made by customers. ## How to Create Metaobjects [#how-to-create-metaobjects] 1. **Navigate to Settings:** In your Shopify admin, go to "Settings" > "Custom data." 2. **Create Definition:** Click "Add definition" and select "Metaobject." 3. **Define Fields:** Add fields to your definition, specifying the data type and validation rules for each field. 4. **Create Entries:** Once your definition is created, you can create individual entries in the "Content" section of your admin. 5. **Display on Storefront:** Use Liquid or the Storefront API to display Metaobject data on your storefront. Shopify Metaobjects provide a powerful way to extend the functionality of your Shopify store and create truly custom experiences for your customers. ### How to use Metaobjects in Webflow [#how-to-use-metaobjects-in-webflow] At the moment there is no way to directly import Metaobjects into Webflow CMS, but you can load them directly in Webflow by just using our attributes and custom elements in different places. You can create [Metaobjects Listings](/docs/metaobjects/listing), you can load [a specific Metaobject](/docs/metaobjects/single-item) and you can load metaobjects from [Product metafields](/docs/ecommerce/products/metafields#how-to-render-metafields-inside-webflow)! # Listing (/docs/metaobjects/listing) This document outlines the steps and best practices for creating metaobjects listings in Webflow using Smootify. Learn how to fetch metaobjects data from your Shopify store and display it in visually appealing grids and lists on your Webflow site. You can create metaobjects listings using only one method * **Custom Elements** ## How to configure \[Shopify] [#how-to-configure-shopify] ## Create the metaobject definition [#create-the-metaobject-definition] Create the metaobject definition from Shopify panel > Settings > Custom Data > Metaobjects. You can create it in whatever way you like, just be sure to enable the options: * **Active-draft** status; * **Storefronts** API access; ## Load metaobjects directly from Shopify [#load-metaobjects-directly-from-shopify] Specific project requirements might necessitate loading metaobjects created in Shopify, rather than using Webflow's CMS collections lists. For example when you need to let your customer modify small things directly from Shopify and you don't want to let him mess up with your Webflow project. Or when you for example want to use our Add-on `Metaobject Creator` to create complex interactions with your end site visitors **Key Concepts:** * **Metaobject Template:** * You design a single 'Metaobject Template', and Smootify, leveraging the Shopify Storefront API, automatically replicates that template for each metaobject you have in Shopify. * Dynamic data from the metaobject fields is then populated into each Metaobject Template. * **Dynamic Data Binding:** * Custom attributes and Custom Elements within the 'Metaobject Template' dictate where dynamic Shopify data will be injected into the static elements by Smootify. ## How to create a Metaobject Listing [#how-to-create-a-metaobject-listing] ### Copy our Component [#copy-our-component] ### Customize the Attributes [#customize-the-attributes] On the **Custom Element** `smootify-metaobjects` there are 2 `Custom Attributes` that you have to modify: #### Type [#type] For example if you created a Metaobject definition with type "testimonials" use the attribute You can load list of metaobjects with attributes explained inside the [relative doc](/docs/ecommerce/products/metafields), but those are limited to max 10 references per field. If you need to show more references or even use pagination you have to use Metaobject Listing. Starting from [Smootify v1.0.5](/changelog#version-1.0.5) you can use select metaobjects by a product metafield. To do that you need a specific `data-type` attribute: Where naturally you have to change namespace.key with the actual namespace and key of the metafield. Note that the metafield type must be a list of Metaobjects! Additionally you have to add the attribute: So if you are in the Product Template page you can bind the value to the CMS: #### Limit [#limit] You can modify the number of metaobjects loaded by modifying the attribute By default it's set as 10. Avoid adding more than 100 as limit ### Style the Grid Element [#style-the-grid-element] Inside the component you will find a Grid Element that will contain all loaded metaobjects, style it according to your needs ### Style the Pagination Elements [#style-the-pagination-elements] Inside the component you will find 3 pagination buttons, with respectively the attributes: and You can style them according to your needs, do not keep all 4 buttons at the same time, or you use previous/next or you use the load more ### Design the Metaobject Template item [#design-the-metaobject-template-item] In the component you will find a **Custom Element** with tag `smootify-metaobject`. Add inside it all Webflow elements you do require to style properly your Metaobject Template Item. ### Add the `metaobject` attributes [#add-the-metaobject-attributes] On any Webflow static element you added inside the `smootify-metaobject` custom element, you can add the attribute: to bind that static element to the corresponding field defined for the metaobject ### Supported Fields [#supported-fields]

Only for fields of type `Single Line Text` you can use an additional attribute: This will ask Smootify to output the value inside the attribute explained in the attribute instead of setting the value as the text of the element. E.g: Will set the value of the field in the attribute `data-id` of the element. ### Fields Visibility [#fields-visibility] Learn how to show or hide elements based on whether a fields exists and what its value is. To control visibility of an element you have principally 2 custom attributes to use: This attribute will show the element if the field exists with 2 exceptions: 1. In the case you used a field of type **True / False** it will be shown if the field is set and is set as **True**; 2. In the case of fields of type **Integer Number**, the element will be shown if the metafield is set and the value is higher than **0**; The second custom attribute is: This attribute will act in the opposite way of the first one, so the element will show only if the metafield doesn't exists. #### Check for Value [#check-for-value] By default metafields visibility attributes will just check for the existence of the metafield. If you wish instead to check for the value that is inside the metafield add also the attribute: For example if you created a field of type **Single Line Text** with key `my_option` and you want to show an element only when the metafield value is for example **Option 1**. You have to use the custom attributes: Here are some examples illustrating why you'd choose this approach ## Example cases [#example-cases] ### Ehnance the Vendor Page \[!toc] [#ehnance-the-vendor-page-toc] For example you would like to load a single metaobject of type `brand` on the Webflow Vendor template page, in this way you can add different fields controlled directly from Shopify without tampering with the Webflow CMS ### Banner [#banner] For example you could create a CTA section in Webflow with dynamic content loaded directly from Shopify, to allow the store owner to dynamically change a promo section without going into Webflow ## Product-specific example cases [#product-specific-example-cases] There are many other cases where you want to load metaobjects associated to products, like: Size Charts, List of ingredients, faqs, etc. For all those cases, you are on the wrong doc 😅 Follow [Product metafields doc](/docs/ecommerce/products/metafields#how-to-render-metafields-inside-webflow)! # FAQs (/docs/search-filters/faqs) ## Predictive Search [#predictive-search] No, Predictive Search is limited by Storefront APIs to a max of 10 results. If you need to show more results use the **Search Page**. Even if theoretically you could, we do not support those features, so if you extremely need that you can leverage our APIs! ## Search & Discovery [#search--discovery] Absolutely! You just need to correctly [preselect the filter](/docs/search-filters/search-and-discovery#optional-preselect-value) on either the Collection or on the Vendor filter you created! No! Search & Discovery data is taken directly and exclusively from Storefront APIs and not from Webflow CMS. If you need to use custom dynamic data use [metafields](/docs/ecommerce/products/metafields)! # Predictive Search (/docs/search-filters) Shopify provides a built-in search functionality that helps customers quickly find products, collections, blog posts, and pages within an online store. This feature enhances user experience and increases conversion rates by making it easier for shoppers to navigate large inventories. Predictive search, also known as autocomplete or typeahead, is a powerful feature that enhances the user experience by providing suggested results as customers type their search queries. This functionality significantly streamlines the search process, allowing shoppers to: * **Refine their search in real-time:** Instead of navigating through multiple search result pages, customers can quickly narrow down their search based on the dynamic suggestions presented. * **Explore the store efficiently:** Predictive search exposes top results across various categories, including search terms, products, collections, and even pages, enabling users to discover relevant content and products without extensive browsing. * **Reduce friction and improve conversion rates:** By providing instant and relevant suggestions, predictive search minimizes the effort required to find desired items, leading to a smoother shopping experience and potentially higher conversion rates. Smootify Docs

## How Predictive Search Works [#how-predictive-search-works] The core principle of predictive search lies in its ability to analyze user input in real-time and provide relevant suggestions based on: * **Popular search terms:** The system analyzes frequently searched keywords and phrases to suggest commonly sought items. * **Product names and descriptions:** Matching user input against product titles and descriptions allows for direct access to specific products. * **Collection names:** Suggestions may include relevant collections, guiding users to broader categories of interest. * **Page titles and content:** Certain predictive searches will also show relevant store pages, such as "About Us" or "Contact" pages. ## Limitations of Predictive Search [#limitations-of-predictive-search] It's important to understand the limitations of predictive search: * **Limited result display:** By default, predictive search displays a maximum of 10 results across all result types. This limitation is designed to maintain performance and prevent overwhelming users with too many options. * **Not a comprehensive search:** Predictive search is intended to provide quick suggestions, not a complete search results page. For a full list of results, users must proceed to the dedicated search results page. * **Dependency on data quality:** The accuracy and relevance of predictive search results depend on the quality of product data, including titles, descriptions, and tags. Ensuring accurate and comprehensive product information is crucial for optimal performance. ## Best Practices for Predictive Search [#best-practices-for-predictive-search] To maximize the effectiveness of predictive search, consider the following best practices: * **Optimize product data:** Ensure accurate and detailed product titles, descriptions, and tags. * **Use relevant keywords:** Incorporate commonly used search terms into product descriptions and tags. * **Monitor search analytics:** Analyze search queries to understand customer behavior and identify areas for improvement. * **Test and iterate:** Experiment with different configurations and settings to optimize the search experience. * **Provide a clear call to action:** Encourage users to proceed to the full search results page for a more comprehensive view. By implementing and optimizing predictive search, online retailers can create a more intuitive and efficient shopping experience, ultimately driving customer satisfaction and sales. ## How it works [#how-it-works] You can customize the behavior of predictive search with the [Search & Discovery](https://beta-help.shopify.com/en/manual/online-store/search-and-discovery) app from Shopify. Predictive search presents shoppers with a limited set of highly relevant results. By default, a maximum of 10 possible results are shown across all the queried result types. Because of this limit, there are typically more results available on the dedicated search results page of your store. Search results are based on the searchable properties of the different possible result types. By default, the following properties are searched: * Title * Product type * Variant title * Vendor ## Component [#component] To add the predictive search, just copy and paste the following component on your Webflow project: ### All Parts of the Predictive Search [#all-parts-of-the-predictive-search] Predictive search element is made as a native dropdown of Webflow. So to see up and modify the content you need to open up the dropdown menu. Inside the dropdown you will find 2 DOM elements Smootify Docs

#### Search No Query [#search-no-query] This element shows up when you click on the search input and no query has been added yet. You can use it to show up any marketing data you wish, like latest viewed products. Or most searched queries and so on. #### Search With Query [#search-with-query] This element shows up instead when there is a search query inside the search input. Here you can add several DOM elements

#### Search suggestions [#search-suggestions]

It’s an element that shows up only and exclusively if the query has related search queries to show up Inside on a link element you must add the attribute It will create dynamically related queries to further fine up your search. #### Product Search Listing [#product-search-listing] ### Create a Search Product Listing \[!toc] [#create-a-search-product-listing-toc] To display the search results list (max 10 items). #### Add a Flex or Grid element \[!toc] [#add-a-flex-or-grid-element-toc] Design your flex/grid by keeping in mind that the replication of your product items will only occur on the live website, where your placeholder will be transformed into the full product listing. #### Design the Product Template item \[!toc] [#design-the-product-template-item-toc] Copy and paste the Product Custom Element inside the flex/grid element you created. Inside the Product Custom Element you can insert any static Webflow element. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) Copy and paste any of our pre-made example inside the flex/grid element you created.

## Key Features and Benefits [#key-features-and-benefits] The Search & Discovery app offers a suite of functionalities designed to optimize product discovery: **1. Custom Filters for Enhanced Navigation:** * **Refine Search and Collection Pages:** Create custom filters that enable customers to narrow down their search and collection results based on multiple categories. This granular filtering allows users to quickly locate specific products that meet their precise requirements. * **Surface Relevant Results:** By empowering customers to filter by relevant attributes like size, color, material, price range, and more, you can ensure that they are presented with highly targeted and relevant product listings. * **Improved User Experience:** Custom filters streamline the browsing process, reducing the time and effort required for customers to find desired products. **2. Semantic Search and Synonym Groups for Intuitive Results:** * **Activate Semantic Search:** Enable semantic search to improve the accuracy and relevance of search results by understanding the intent behind customer queries, rather than relying solely on keyword matching. * **Create Synonym Groups:** Define synonym groups to ensure that customers find relevant products even when using different terminology. For example, grouping "sneakers," "trainers," and "athletic shoes" together ensures that all relevant products are displayed regardless of the specific term used. * **Enhanced Search Accuracy:** By understanding the context and meaning of search queries, semantic search and synonym groups deliver more intuitive and accurate results. **3. Product Featuring in Search Results:** * **Highlight Key Products:** Feature specific products in search results to promote best-sellers, new arrivals, or promotional items. * **Strategic Product Placement:** Control which products are displayed prominently in search results to drive sales and achieve marketing objectives. **4. Result Type Adjustment in Search and Predictive Search:** * **Customize Search Results:** Fine-tune the types of results displayed in search and predictive search to prioritize specific content, such as products, collections, or pages. * **Optimize Predictive Search:** Adjust the result types displayed in predictive search to provide relevant and timely suggestions as customers type their queries. ## How to Setup \[Shopify] [#how-to-setup-shopify] ### Install the App [#install-the-app] Install the free Shopify [Search & Discovery](https://apps.shopify.com/search-and-discovery) ### Create Filters [#create-filters] You can follow [official doc](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters) for full documentation on how to setup filters. Review the following considerations for using the Shopify Search & Discovery app: * Collections that contain more than 5,000 products don't display filters. Consider dividing large collections into smaller collections that can display filters. For example, instead of creating a single Women fashion collection, you can create smaller collections based on the type of apparel, such as Tops, Jeans, and Boots. * A search that produces more than 100,000 results doesn't display filters. * A filter can display a maximum of 100 filter values on your store. If your filter has more than 100 possible values, then some values won't be displayed to customers. You can reduce the number of possible filter values by grouping similar values. A filter group can have a maximum of 200 unique filter values, and your store can have a maximum of 1,000 filter groups across all selected filter settings. * In the Shopify Search & Discovery app, a filter displays a maximum of 1,000 filter values. Metafield filters might display fewer than 1,000 values because there is a limit to how many metafields in the store are checked for unique values. Filter values not displayed in the app can still be displayed on your store to customers, provided the filter is displaying fewer than 100 filter values. * Translations aren't supported for the Vendor and Tags filter values. The product tag filter only displays to customers shopping in your store's default language. Vendor filter values are always based on your store's default language. * Filter value translations are based on the languages published for your online store, and won't display translations for markets set up with international sales tools. * The price filter doesn't display for currencies other than your shop's default currency. In the Shopify Search & Discovery app, go to **Filters**, and then click **Add filter**. * Click the Source field, and then select a filter source that you want to make available to your customers. * Optional: Rename the filter. * Optional: Change the filter behavior. * Optional: Change the visual display. * Optional: Select filter values to group together as a single value. * Optional: Sort filter values. * Click Save. ## How to Setup \[Webflow] [#how-to-setup-webflow] ### Copy our Component [#copy-our-component] ### Customize the Options [#customize-the-options] On the **Custom Element** `smootify-search-discovery` there are different `Custom Attributes` that you can modify: #### Limit \[!toc] [#limit-toc] You can modify the number of products loaded by modifying the attribute By default it's set as 50. You can set max 250 #### Disable Scroll \[!toc] [#disable-scroll-toc] If you want to disable scroll when products are rendered add the attribute: #### Disable Scroll on Load More \[!toc] [#disable-scroll-on-load-more-toc] If you want to disable scroll when more products are loaded add the attribute: #### Animation Name \[!toc] [#animation-name-toc] The component uses Motion.dev to animate the card loading by default the animation used is `fade`, you can modify it by changing the attribute Where `animation name` can be: `fade`, `slide`, `slideBlurred`, `fadeBlurred` #### Animation Duration \[!toc] [#animation-duration-toc] By default the animation is set with a duration of 0.5s, you can modify it by changing the attribute: #### Stagger \[!toc] [#stagger-toc] By default the products are animated with a stagger of 0.1s, you can modify it by changing the attribute: #### Easing \[!toc] [#easing-toc] By default the products are animated with an `ease-in` easing, you can modify it by changing the attribute: Where `easing formula` can be: `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out` #### Hide Empty Filters \[!toc] [#hide-empty-filters-toc] By default the filters will show up even if the filters will show up no results, if you want to hide them, just add the custom attribute: #### Hide if single \[!toc] [#hide-if-single-toc] By default the filters will show up even if the filters have only one possible value, if you want to hide them, just add the custom attribute: #### Sync Query Parameters \[!toc] [#sync-query-parameters-toc] By default the filters will not sync filter configuration with the url of the browser, if you want to instead allow it just add the custom attribute: This option will work only if you didn't removed the active badges from the component ### Style the Filter Search [#style-the-filter-search] Inside the component you will find a Form with a text input and a submit button, style it according to your needs ### Style the Grid Element [#style-the-grid-element] Inside the component you will find a Grid Element that will contain all searched products, style it according to your needs ### Add the Filters [#add-the-filters] For each `Filter` you want to support in your template, you have to add a Component inside the `Search & Discovery`. Our component comes predefined with only Filter Search, Filter Price and Collection filter, you have to add the other filters you created in Shopify in the fashion you do prefer:

Since natively Webflow doesn't support yet inputs of type "Range", this input is made as an embed code, you use the following CSS variables to style it: * `range-slider-size` by default the value is `15px` * `range-slider-color` by default the value is `blue` * `range-slider-radius` by default the value is `50%` Remember that you can add CSS variables directly inside Webflow Variables panel. Do not add them inside any folder! #### Change the Label Custom Attribute [#change-the-label-custom-attribute] For each component you copied you must change the Custom Attribute: In this way you will indicate that the Filter will be connected to the filter you created in the Search & Discovery App with the `Label` indicated in the attribute. Do not change the labels for Filter Price & Filter Search components, they must be the predefined one from our components Even if **Search & Discovery** doesn't support filtering by Collection you can filter by collection by using the label **Collection**. You can't filter by multiple Collections at same time. You cannot use multiple filters connected to the same Filter of the Search & Discovery, there must be one and only one filter section per each filter you created in the Shopify Dashboard! When you are filtering by Collection, the filter search will be hidden, Shopify Storefront API do not support searching by name and filtering by collection at same time #### \[Optional] Preselect Value [#optional-preselect-value] If you want to create pages that do have preselected values, on each Filter Component you used you can add also the attribute: You can naturally even connect the value of the attribute to the CMS in the case you want to use Search & Discovery on template pages like Vendor or Collection By default filter sections that are `Preselected` are immutable, so you cannot allow clients to reset them. If you want to preselect but still allow the filter to be removed add also the attribute #### \[Optional] Change the Active Filter Label [#optional-change-the-active-filter-label] By default the Active Filters elements will show up the with a text that follows this pattern `Label: Value` So if the filter section has the label `Collection`, they will show up as `Collection: Name of the collection` If you want to use a different label, add the custom attribute: ### Style the Sort Element [#style-the-sort-element] By default there is a sort of type **Dropdown** inside our Component. If you don't like the fashion or you accidentally deleted it and want to restore it, you can use the following sorters:

Sort Values are fixed and defined by the Storefront APIs, so you cannot add different sorting methods. More over the sort values depends by if you are filtering by collection or not. Without the collection filter being active you can sort by: * Price * Relevance When you have an active Collection Filter instead you can sort by: * Best Selling * Created * Price * Relevance * Title You can change up the labels of the sort by adding the following script in the head of your webflow page ```html ``` ### Style the Pagination Elements [#style-the-pagination-elements] Inside the component you will find 4 pagination buttons, with respectively the attributes: and You can style them according to your needs, do not keep all 4 buttons at the same time, or you use previous/next or you use one of the load more ### Style the Active Filter Labels [#style-the-active-filter-labels] Inside the component you will find elements that do indicate which filter is active at the moment, style them according to your own style. The option `Sync Query Parameters` will work only if you have this element. So if you want to keep using that option but do not want to use active filters elements, just set them as display none ### \[Optional] Design the Product Template item [#optional-design-the-product-template-item] You will find already a Pre-made example inside the component, if you don't like it you can either start from scratch or use other pre-made examples Copy and paste the Product Custom Element inside the grid element of the Component. Inside the Product Custom Element you can insert any static Webflow element. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) Copy and paste any of our pre-made example inside the grid element of the component.

## How the Search Page Works [#how-the-search-page-works] When a customer enters a keyword into the search bar of your Shopify store and presses "Enter" or clicks the search icon, they are redirected to the search page. This page presents: * **Complete List of Results:** All products that match the search keyword are displayed in a list. * **Pagination:** If the number of results is large, the search page divides them into multiple pages for easier navigation. ## Benefits of the Search Page [#benefits-of-the-search-page] * **Comprehensive Product Discovery:** Allows customers to explore the entire catalog of products relevant to their search. * **Improved User Experience:** Offers a clear and intuitive interface for searching and selecting products. * **Increased Conversions:** Helps customers quickly find what they are looking for, increasing the likelihood of purchase. ## Difference Between Predictive Search and Search Page [#difference-between-predictive-search-and-search-page] * **Predictive Search:** * Shows real-time suggestions as the user types. * Limits results to a maximum of 10. * Helps quickly find the most popular or relevant products. * **Search Page:** * Displays the complete list of results after the user presses "Enter." * Has no limit to the number of results displayed. (Max 250 products per page) ## How to Setup \[Webflow] [#how-to-setup-webflow] ### Copy our Component [#copy-our-component] ### Customize the Attributes [#customize-the-attributes] On the **Custom Element** `search-page` there are different `Custom Attributes` that you can modify: #### Limit [#limit] You can modify the number of search results loaded by modifying the attribute By default it's set as 50. You can set max 250 #### Disable Scroll [#disable-scroll] If you want to disable scroll when products are rendered add the attribute: #### Disable Scroll on Load More [#disable-scroll-on-load-more] If you want to disable scroll when more products are loaded add the attribute: #### Animation Name [#animation-name] The component uses Motion.dev to animate the card loading by default the animation used is `fade`, you can modify it by changing the attribute Where `animation name` can be: `scale`, `fade`, `slide`, `slideBlurred`, `fadeBlurred` #### Animation Duration [#animation-duration] By default the animation is set with a duration of 0.5s, you can modify it by changing the attribute: #### Stagger [#stagger] By default the products are animated with a stagger of 0.1s, you can modify it by changing the attribute: #### Easing [#easing] By default the products are animated with an `ease-in` easing, you can modify it by changing the attribute: Where `easing formula` can be: `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out` ### Style the Search Form [#style-the-search-form] Inside the component you will find a Form with a text input and a submit button, style it according to your needs ### Style the Grid Element [#style-the-grid-element] Inside the component you will find a Grid Element that will contain all searched products, style it according to your needs ### Style the Pagination Elements [#style-the-pagination-elements] Inside the component you will find 4 pagination buttons, with respectively the attributes: and You can style them according to your needs, do not keep all 4 buttons at the same time, or you use previous/next or you use one of the load more #### \[Optional] Design the Product Template item [#optional-design-the-product-template-item] You will find already a Pre-made example inside the component, if you don't like it you can either start from scratch or use other pre-made examples Copy and paste the Product Custom Element inside the grid element of the Component. Inside the Product Custom Element you can insert any static Webflow element. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) Copy and paste any of our pre-made example inside the grid element of the component.

Naturally you can insert any Webflow element you desire inside the pre-made examples. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) #### Set the `data-id` attribute if you started from scratch [#set-the-data-id-attribute-if-you-started-from-scratch] If you started from scratch add the necessary `data-id` attribute. #### Style the Empty State [#style-the-empty-state] Inside the component you will find an element with the attribute This element will show up only and exclusively when there are no search results for that query ### Additional Attributes [#additional-attributes] Inside the `search-page` Custom Element you can use the following Attributes if you wish #### Query [#query] You can mark any text element as the query used for the search by adding the attribute #### Count [#count] You can mark any text element as the search results count by adding the attribute # Skeleton (/docs/custom-code/css) Smootify custom css is pretty small and tries to never interfer with any design you create inside Webflow. The stylesheet has some custom variables that you can override directly in Webflow CSS Variables panel. If you never used Webflow CSS Variables, is adviced to follow up this [guide](https://university.webflow.com/lesson/variables) ## Skeleton [#skeleton] The Skeleton loader is used when products are loaded and cart is updated, to avoid showing up stale invalid data. It uses 2 css variables to create the animation ### Skeleton Loading Start [#skeleton-loading-start] This is the loading background-color of the animation. You can modify it by adding a CSS variable with name `skeleton-loading-start` By default the color used is: hsl(200, 20%, 80%) ### Skeleton Loading End [#skeleton-loading-end] This is the ending background-color of the animation. You can modify it by adding a CSS variable with name `skeleton-loading-end` By default the color used is: hsl(200, 20%, 95%) ### Disable Skeleton [#disable-skeleton] If you want to disable the skeleton loader, add the class `loaded` on the `smootify-product` Custom Element. Is highly discouraged to disable the skeleton loader. ### Skeleton Attributes [#skeleton-attributes] If you want more control on the skeleton elements instead of using the automatic one, you can apply the following skeleton attributes to your elements #### Text [#text] Suitable for all text elements #### Button [#button] Suitable for all button elements #### Blocks [#blocks] Suitable for all divs #### Image [#image] Suitable for all image elements #### Hide [#hide] Will set visibility hidden on the element # Snippets (/docs/custom-code/css/snippets) Below some useful snippets to create features that in Webflow are still not very easy to do and do require pseudo elements or advanced css selectors ## Variant Buttons Tooltips [#variant-buttons-tooltips] When you use Variant Buttons swatches, sometimes is usefull to show up the buttons without any title (only image or color for example). alt text

By adding the snippet below you will get a pseudo element that will appear on hover and dinamically show up the title of the option, feel free to modify the style below according to your own style! ```html ``` ## Disable Cart Item Skeleton [#disable-cart-item-skeleton] If you want to disable the cart item skeleton you can add the following snippet ```html ``` ## Usefull selectors [#usefull-selectors] Below a list of all selectors you might need in Webflow with custom code ### Custom Radio Checked [#custom-radio-checked] Webflow allows you to apply the checked state only to the radio input, with the following selector you do select the Radio Element instead ```css .w-radio:has(.w--redirected-checked) { /** Add your style **/ } ``` ### Custom Checkbox Checked [#custom-checkbox-checked] Webflow allows you to apply the checked state only to the checkbox input, with the following selector you do select the Checkbox Element instead ```css .w-checkbox:has(.w--redirected-checked) { /** Add your style **/ } ``` ### Navbar Open [#navbar-open] Webflow allows you to apply the open state on the menu only, with the following selector you can select the body when a menu is open, further refine the selector if you have multiple menus etc. ```css body:has([data-nav-menu-open]) { /** Add your style **/ } ``` # CMS Structure (/docs/ecommerce/collections/cms) This CMS collection holds all the data of your collections inside Webflow. Smootify Docs

Smootify assumes that your CMS collection that holds the Collections data is set with the slug **"collection"**. But you can use the slug you wish, just be sure to follow up the [JS configuration](/docs/custom-code/js) in order to inform Smootify scripts about your custom slug. ## CMS Fields [#cms-fields] The Collections CMS collection requires the following CMS fields: ### Name [#name] Is preconfigured by Webflow when you create a CMS collection, this field will hold the title of your Shopify Collection ### Slug [#slug] Is preconfigured by Webflow when you create a CMS collection, this field will hold the handle of your Shopify Collection ### Description [#description] This is a custom field of type **Rich text** that needs to be created manually, and will be filled with the Description of the Shopify Collection panel ### Image [#image] This is a custom field of type **Image** that needs to be created manually, and will be filled with the Featured image of your Shopify Collection, is very usefull for SEO purposes if you want to set up an Open Graph image. All the other product images can be fetched using custom attributes directly inside your Webflow project. ### Shopify ID [#shopify-id] This is the most important custom field and is of type **Plain text**, this field holds the ID of the Shopify Collection, is used to fetch all infos related to the product and for the cart functionalities ## Optional CMS Fields [#optional-cms-fields] ### SEO Title [#seo-title] This is the shopify collection SEO Title and is of type **Plain text**. ### SEO Description [#seo-description] This is the shopify collection SEO Description and is of type **Plain text**, create the field with the Multiline checkbox checked. ## CMS Metafields [#cms-metafields] You can sync with Webflow additional CMS fields that are connected to Shopify Metafields, just be sure to name the fields in Webflow with the same exact name of the metafield you created in Shopify. ### Supported metafields [#supported-metafields] Not all shopify metafields can be synced with Webflow CMS, only following types are supported and only if they are connected to the proper Webflow CMS field type All metafields in Shopify must be set within the namespace **custom**, the field label in Shopify must match the field label in Webflow and the field key in Shopify must be in [snake\_case](https://en.wikipedia.org/wiki/Snake_case). Do not use non utf-8 characters and neither special chars otherwise the field will not be correctly synced. # Overview (/docs/ecommerce/collections) Shopify Collections are a powerful feature that allows you to group your products based on specific criteria, making it easier for customers to browse and find what they're looking for. Think of them as virtual shelves in your online store. Smootify Docs

## What are Collections? [#what-are-collections] Collections are essentially lists of products. They can be used to: * **Organize products by category:** For example, "Women's Clothing," "Electronics," or "Home Decor." * **Showcase specific product types:** Like "New Arrivals," "Sale Items," or "Best Sellers." * **Group products by themes or events:** Such as "Summer Collection," "Holiday Gifts," or "Back to School." * **Create curated selections:** Highlighting specific styles, materials, or features. ## Types of Collections [#types-of-collections] Shopify offers two main types of collections: ### 1. **Automated Collections:** [#1-automated-collections] * These collections automatically update based on predefined conditions. * You set rules using product attributes like: * Product title * Product type * Vendor * Price * Tags * Compare at price * Inventory stock * For example, you can create an automated collection that includes all products with the tag "sale." * If a product matches the conditions, it is automatically added, and if the product no longer matches, it is automatically removed. * This is very useful for collections that change frequently, like "New Arrivals" or "Sale Items." ### 2. **Manual Collections:** [#2-manual-collections] * These collections require you to manually select and add products. * You have complete control over which products are included. * This is ideal for curated collections or when you want to handpick specific items. * This is great for creating collections such as "Staff Picks", or collections that need to stay static. ## Creating a Collection [#creating-a-collection] To create a collection in your Shopify admin: 1. Go to **Products > Collections**. 2. Click **Create collection**. 3. Enter a **Title** for your collection. 4. Add a **Description** (optional). 5. Upload a **Collection image** (optional). 6. Choose the **Collection type**: * **Automated:** Set the conditions for automatic product inclusion. * **Manual:** Select products to add manually. 7. If creating an automated collection, set your conditions. You can add multiple conditions and specify whether they should all be met (AND) or if any of them can be met (OR). 8. Click **Save**. ## Benefits of Using Collections [#benefits-of-using-collections] * **Improved navigation:** Helps customers find products quickly and easily. * **Enhanced product discoverability:** Showcases specific product groups. * **Increased sales:** Promotes specific products and collections. * **Better organization:** Makes it easier to manage your product inventory. * **Improved customer experience:** Provides a more user-friendly shopping experience. By effectively utilizing Shopify Collections, you can create a well-organized and engaging online store that drives sales and enhances the customer experience. ## Displaying Collections [#displaying-collections] Collections can be displayed on your Webflow store with just native Webflow tools, there is nothing custom coded or that really requires an heavy documentation to use those. ### Add a Collection List [#add-a-collection-list] Drag and drop a **Collection List** element onto your Webflow page.

### Connect the list to the ***Collections*** Collection [#connect-the-list-to-the-collections-collection] Link the Collection List to the collection that contains your collections

### Design your Collection Item [#design-your-collection-item] Design your collection item according to your needs ### Connect Elements to the CMS [#connect-elements-to-the-cms] Just connect the elements you designed to the Webflow CMS! # Template Page (/docs/ecommerce/collections/template) ## List the products of the current collection \[toc] [#list-the-products-of-the-current-collection-toc] The Dynamic Collection Template page in your Webflow project should be designed to automatically display all products within the currently viewed collection. Naturally, You can further customize this page by adding fields to your Collection CMS, allowing for unique styling and enhanced presentation. ## How to create a Product Listing [#how-to-create-a-product-listing] ### Add a Collection List [#add-a-collection-list] Drag and drop a **Collection List** element onto your Webflow page.

### Connect the list to the Product Collection [#connect-the-list-to-the-product-collection] Link the Collection List to the collection that contains your products

### Design the Product collection item [#design-the-product-collection-item] Copy and paste the Product Custom Element inside the Collection List Item Inside the Product Custom Element you can insert any Webflow element you desire and you connect them to the Webflow CMS. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) Copy and paste any of our pre-made example inside the Collection List Item

### Filter the Collection List [#filter-the-collection-list] Webflow provides powerful tools to filter and sort your Collection Lists, allowing you to display specific subsets of your data in a desired order. **Select the Collection List:** Click on the Collection List element in your Webflow Designer. **Open the Collection List Settings:** In the right sidebar, go to the "Collection List Settings" panel. **Add a Filter:** * Click the "+ Add Filter" button. * Choose the field **Collections**. * Select the filter condition **Contains** * Enter the value **Current Collection**

# APIs (/docs/custom-code/js/api) Smootify is JS dev friendly! It exposes many APIs that you can use to further customize and enrich your Webflow site! ### Wait for Smootify [#wait-for-smootify] The Smootify instance is exposed only after the APIs are loaded, so be sure to wrap all your code inside the API Loaded callback, e.g: ```ts twoslash document.addEventListener("smootify:loaded", () => { console.log("Smootify APIs are available"); }); ``` If you don't want to care about using callbacks and you are hosting your scripts elsewhere and not inline you can add a script with type `smootify-load`, it will be loaded after APIs are available. The type of the module will be set based on the data-type attribute you add to the script or will be set as `application/js` by default. ```html ``` You can also upload js files to Shopify > Content > Files and use that as CDN if you need 😉 ### Query [#query] It allows you to access the whole [storefront graphql api](https://shopify.dev/docs/api/storefront) without thinking about any fetch call, tokens and all the rest #### Syntax \[!toc] [#syntax-toc] ```js title="Syntax" Smootify.query(query); Smootify.query(query, variables); ``` #### Parameters \[!toc] [#parameters-toc] #### Examples \[!toc] [#examples-toc] ```js title="Get Shop ID" const result = await Smootify.query(`{ shop { id } }`); const shopID = result.shop.id; ``` ### Query Customer [#query-customer] It allows you to query customer fields for the current logged in customer, it can automatically fetch either from the old or new customers account APIs based on if you are using passwordless login or not. This is not the full Customer Accounts Api but is limited to only query the Customer object, schemas below: * [Legacy Customer Object](https://shopify.dev/docs/api/storefront/2024-01/queries/customer) * [Customer Object](https://shopify.dev/docs/api/customer/2024-01/queries/customer) If the customer is not logged in it will throw up an error, so handle it in your custom code #### Syntax \[!toc] [#syntax-toc-1] ```js title="Syntax" Smootify.queryCustomer(fields); ``` #### Parameters \[!toc] [#parameters-toc-1] #### Examples \[!toc] [#examples-toc-1] ```js title="Load a metafield after customer status loaded" document.addEventListener('smootify:user_auth_change', (event) => { const shopifyCustomer = event.detail; if (shopifyCustomer) { const {customer} = await Smootify.queryCustomer(` id customField: metafield(namespace:"custom", key:"my_key") { value }`); console.log(customer.id, customer.customField) } else { // If you want to redirect here } }) ``` ```js title="On button click query metafield" document.getElementById('my-button').addEventListener('click', () => { try { const {customer} = await Smootify.queryCustomer(` id customField: metafield(namespace:"custom", key:"my_key") { value }`); console.log(customer.id, customer.customField) } catch(e) { console.log(`Customer not logged in or error with the query`, e); } }) ``` ### Set Customer Metafields [#set-customer-metafields] It allows you to set customer fields for the current logged in customer. Be sure to set the metafields as readable/writable from Customer Accounts API If the customer is not logged in it will throw up an error, so handle it in your custom code This method will not be available if you are using legacy accounts. #### Syntax \[!toc] [#syntax-toc-2] ```js title="Syntax" Smootify.setCustomerMetafields(...metafields); ``` #### Parameters \[!toc] [#parameters-toc-2] #### Examples \[!toc] [#examples-toc-2] ```js title="Save a metafield after customer status loaded" document.addEventListener('smootify:user_auth_change', (event) => { const shopifyCustomer = event.detail; if (shopifyCustomer) { await Smootify.setCustomerMetafields({ key: "popup_seen", value: "true" }, { key: "last_viewed_page", value: window.location.pathname }) } }) ``` ### Apply Coupon Code [#apply-coupon-code] It allows to apply a coupon code to the cart without user interaction, usefull if you want to add a specific coupon code based on your js interactions #### Syntax \[!toc] [#syntax-toc-3] ```js title="Syntax" Smootify.applyCouponCode(code); ``` #### Parameters \[!toc] [#parameters-toc-3] #### Examples \[!toc] [#examples-toc-3] ```js title="Add coupon code on button click" document.getElementById("welcome-button").addEventListener("click", () => { Smootify.applyCouponCode("welcome20"); }); ``` ### Change Market By Country ISO Code [#change-market-by-country-iso-code] It allows to change up the market by an ISO code, usefull if you want to use some ip localization or select the market manually #### Syntax \[!toc] [#syntax-toc-4] ```js title="Syntax" Smootify.changeCountryByIsoCode(isoCode); ``` #### Parameters \[!toc] [#parameters-toc-4] #### Examples \[!toc] [#examples-toc-4] ```js title="Change Market to Italy on button click" document.getElementById("italy-button").addEventListener("click", () => { Smootify.changeCountryByIsoCode("IT"); }); ``` ### Change Market Language [#change-market-language] It allows to change up the market language, usefull if you want to use some ip localization or select the market language manually #### Syntax \[!toc] [#syntax-toc-5] ```js title="Syntax" Smootify.changeMarketLanguage(isoCode); ``` #### Parameters \[!toc] [#parameters-toc-5] #### Examples \[!toc] [#examples-toc-5] ```js title="Change Language to Italian on button click" document.getElementById("italy-button").addEventListener("click", () => { Smootify.changeMarketLanguage("IT"); }); ``` ### Add to Cart [#add-to-cart] It allows to add lines to the cart and refresh the cart render automatically, you can also optionally redirect directly to the Checkout #### Syntax \[!toc] [#syntax-toc-6] ```js title="Syntax" Smootify.addToCart(lines); Smootify.addToCart(lines, true); ``` #### Parameters \[!toc] [#parameters-toc-6] #### Examples \[!toc] [#examples-toc-6] ```js title="On specific button click add an item to the cart" document.getElementById("product-card-button").addEventListener("click", () => { const productsToAdd = [ { attributes: [ { key: "Attribute Key", value: "Attribute value", }, ], quantity: 1, merchandiseId: "gid://shopify/ProductVariant/1", }, ]; Smootify.addToCart(productsToAdd); }); ``` ```js title="If inside cart there is a specific item add another one" document.addEventListener("smootify:cart_updated", (event) => { const cart = event.detail; const userAddedMyProduct = !!cart.nodes.find( (node) => node.merchandise.product.title == "My Product" ); const userAddedMyOtherProduct = !!cart.nodes.find( (node) => node.merchandise.product.title == "My Other Product" ); if (userAddedMyProduct && !userAddedMyOtherProduct) { const productsToAdd = [ { attributes: [ { key: "Attribute Key", value: "Attribute value", }, ], quantity: 1, merchandiseId: "gid://shopify/ProductVariant/1", }, ]; Smootify.addToCart(productsToAdd); } }); ``` ### Get Cart ID [#get-cart-id] It allows to get the current cart ID, usefull if you want to directly mutate the cart state using your own queries #### Syntax \[!toc] [#syntax-toc-7] ```js title="Syntax" Smootify.getCartID(); ``` #### Examples \[!toc] [#examples-toc-7] ```js title="Set a Cart Metafield" const cartId = await Smootify.getCartID(); await Smootify.query( `mutation cartMetafieldsSet($metafields: [CartMetafieldsSetInput!]!) { cartMetafieldsSet(metafields: $metafields) { metafields { id value } userErrors { field message } } }`, { metafields: [ { key: "", ownerId: cartId, type: "", value: "", }, ], } ); ``` ### Reload Cart [#reload-cart] It allows to re-render the cart, usefull if you modified the cart state using your own queries #### Syntax \[!toc] [#syntax-toc-8] ```js title="Syntax" Smootify.reloadCart(); ``` ### Clear Cart [#clear-cart] It allows to remove all items from the cart #### Syntax \[!toc] [#syntax-toc-9] ```js title="Syntax" Smootify.clearCart(); ``` ### Format Money [#format-money] It formats a string (cents) or a number as a money string based on the Shopify format #### Syntax \[!toc] [#syntax-toc-10] ```js title="Syntax" Smootify.formatMoney(cents); ``` #### Parameters \[!toc] [#parameters-toc-7] #### Examples \[!toc] [#examples-toc-8] ```js title="Set a text element as a formatted price" document.querySelector('.my-text').textContent = Smootify.formatMoney('100'); ``` ### Add Box to Cart [#add-box-to-cart] This function allows you to add a group of products as a box. It requires Magic Box Add-on enabled #### Syntax \[!toc] [#syntax-toc-11] ```js title="Syntax" Smootify.addBoxToCart(lines); Smootify.addBoxToCart(lines, boxOptions); Smootify.addBoxToCart(lines, boxOptions, true); ``` #### Parameters \[!toc] [#parameters-toc-8] ```ts // Typescript interface // Smootify.addBoxToCart(lines: CartLineInput[], boxOptions?: {title?: string, image?: string}, goToCheckout?: boolean): Promise // /** The input fields to create a merchandise line on a cart. */ // export type CartLineInput = { // /** An array of key-value pairs that contains additional information about the merchandise line. */ // attributes?: InputMaybe>; // /** The ID of the merchandise that the buyer intends to purchase. */ // merchandiseId: Scalars['ID']; // /** The quantity of the merchandise. */ // quantity?: InputMaybe; // /** The ID of the selling plan that the merchandise is being purchased with. */ // sellingPlanId?: InputMaybe; // }; const productsToAdd = [ { attributes: [ { key: "Attribute Key", value: "Attribute value", }, ], quantity: 1, merchandiseId: "gid://shopify/ProductVariant/123123123", }, { attributes: [ { key: "Attribute Key", value: "Attribute value", }, ], quantity: 1, merchandiseId: "gid://shopify/ProductVariant/12312312312", }, ]; const boxOptions = { title: "My Custom Box", image: "https://cdn.shopify.com/s/files/1/0563/0689/2909/files/image.webp", // The image must be hosted on Shopify CDN! }; Smootify.addBoxToCart(productsToAdd, boxOptions); ``` # JS Events (/docs/custom-code/js/events) ## Global Events [#global-events] Below all usefull events that you can listen up on the document element ### API Loaded [#api-loaded] This event get's dispatched on the `document` after all Smootify modules have been loaded. ```ts document.addEventListener('smootify:loaded', () => { console.log("Smootify APIs are available") }) ``` ### User Auth Change [#user-auth-change] This event get's dispatched on the `document` on login status change and on page load to notify if an user is effectively logged in or not ```ts document.addEventListener('smootify:user_auth_change', (event) => { const customer = event.detail; if (customer) { // Do something with the customer object } else { // If you want to redirect here } }) ``` ### Cart Updated [#cart-updated] This event get's dispatched on the `document` on any cart changes (also on the cart first load) ```ts document.addEventListener('smootify:cart_updated', (event) => { const cart = event.detail; // Send cart analytics or open a popup or modify the free shipping bar... Just ideas :) }) ``` ### Added to Cart [#added-to-cart] This event get's dispatched on the `document` on any add to cart event ```ts document.addEventListener('smootify:added_to_cart', (event) => { const {lines, cart, goToCheckout} = event.detail; // Do something with the payload }) ``` ### Removed from Cart [#removed-from-cart] This event get's dispatched on the `document` on any product removed from the cart ```ts document.addEventListener('smootify:removed_from_cart', (event) => { // lineIds is an array of elements removed from the cart const lineIds = event.detail; }) ``` ### Product Loaded [#product-loaded] This event get's dispatched on the document for each Product Loaded from the API ```ts document.addEventListener('smootify:product_loaded', (event) => { const {id, product} = event.detail // Do something with the product }) ``` ### Images Module Loaded [#images-module-loaded] This event get's dispatched on the document every time after the Images JS module get's loaded. Module loaded doesn't ensure all images have been loaded ```ts document.addEventListener('smootify:productImagesModuleLoaded', () => { }) ``` ### Addon State Changed [#addon-state-changed] This event get's dispatched on the document if you have an add to cart with Magic Addons every time an add-on get's added or removed ```ts document.addEventListener('addon:state_change', (event) => { const {wrapper, product, variant, included} = event.detail // Do something (E.G -> if the addon is included show up a property input) }) ``` ## Product Custom Element Events [#product-custom-element-events] Below you can instead find all the events that are dispatched only on the Smootify Product Custom Element ### Variant Change [#variant-change] This event get's dispatched each time a new Variant has been selected ```ts const productWrapper = document.querySelector('smootify-product'); // First product wrapper element of the document productWrapper.addEventListener('changeVariant', (event) => { const variant = event.detail // Do something with the variant }) ``` ### Plan Change [#plan-change] This event get's dispatched each time the Variant plan changed ```ts const productWrapper = document.querySelector('smootify-product'); // First product wrapper element of the document productWrapper.addEventListener('changePlan', (event) => { const {plan, variant} = event.detail // Do something with the variant and the plan // plan will be null if the subscription option has been deselected }) ``` ## Product Variant Custom Element Events [#product-variant-custom-element-events] Below you can instead find all the events that are dispatched by the Variant Custom Element ### Variants Rendered [#variants-rendered] This event get's dispatched each time the Variants get rendered ```ts document.body.addEventListener('variantsRendered', (event) => { // Do something after variants have been rendered }) ``` # Settings (/docs/custom-code/js) ## Options Customizer [#options-customizer] Don't worry if you don't feel brave enough to write your own JS configuration script! just use the customizer below to generate the proper script! ## How to customize Smootify behaviour [#how-to-customize-smootify-behaviour] Smootify can be customized using a simple configuration script that can be added inside the global head custom code section of your Webflow Project. The script you add to change up options must go before the Smootify main script, otherwise it will not be read on all page loads, since our Cloudflare CDN is too fast 🚀 Below you can find the Typescript schema of all Smootify Options available at the moment. ```ts twoslash type SmootifyOptions = { showOnlyActiveImages: boolean, productsBase: string, collectionsBase: string, vendorsBase: string, accountBase: string, newCustomerAccountsPublicKey: string, invalidProductRedirectUrl: string, newCustomerLoginRedirect?: string, orderPageUrl: string, selectMarketBasedOnBrowserLanguage?: boolean enableAutoTrack?: boolean, useBrowserFormatter?: boolean, avoidWebflowIXRestart?: boolean } ``` You can change all or only some of the options by adding a script on the global head custom code section of your Webflow project settings. For example, the snippet below will force Smootify Product images to show up only images that are connected to the current selected variant. ```html ``` You should not add multiple scripts to customize the options! JS is a top-down language, if you write 2 scripts that do set a variable, only the second script will work, unless you properly *spread* the previous options! For reference below there are the **default options** that Smootify will use in the case the previous script is not added inside the project: ```ts twoslash const defaultOptions = { showOnlyActiveImages: false, productsBase: 'product', collectionsBase: 'collection', vendorsBase: 'vendor', accountBase: 'account', invalidProductRedirectUrl: "/", newCustomerAccountsPublicKey: "", newCustomerLoginRedirect: window.location.origin, orderPageUrl: '/account/order', selectMarketBasedOnBrowserLanguage: false, enableAutoTrack: false, useBrowserFormatter: false, avoidWebflowIXRestart: false } ``` You can naturally change all of the options or only some of them, like in the example below: ```html ``` ## Available Options [#available-options] The complete list of customizable Smootify properties is provided below. # Dynamic Properties (/docs/ecommerce/add-ons/dynamic-properties) This document introduces "Dynamic Properties," a powerful feature that allows you to dynamically show input elements within the Smootify Add-to-Cart component based on Shopify Metaobjects. This basically allows you "designer" to lay out all possible properties and control their visibility from Storefront. This is usefull when Webflow conditional visibility is not enough for your store. This Add-On is included in all plans. This Add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing. ## How to setup \[Shopify] [#how-to-setup-shopify] ### Activate the Add-on [#activate-the-add-on] To turn on the Dynamic Properties feature, go to your project in the Smootify dashboard and activate it within Sites add-ons. ### Set the metafield as readable [#set-the-metafield-as-readable] When you activate the Dynamic Properties add-on, a metafield definition will be automatically added to your Shopify. To ensure proper functionality, go to your Shopify Dashboard > Settings > Custom Data > Products. Find the 'Dynamic Properties' metafield definition and enable Storefronts access. ### Set the metaobject as readable [#set-the-metaobject-as-readable] When you activate the Dynamic Properties add-on, a metaobject definition will be automatically added to your Shopify. To ensure proper functionality, go to your Shopify Dashboard > Settings > Custom Data > Metaobjects. Find the 'Dynamic Property' metaobject definition and enable Storefronts access. ### Create Dynamic Properties [#create-dynamic-properties] From your Shopify Panel > Content > Metaobjects create your Dynamic Properties.

Every `Dynamic Property` has these fields: ### Connect the properties on each product [#connect-the-properties-on-each-product] Fill the `Properties` metafield that you find in each product with the Dynamic properties you created before ## How to setup \[Webflow] [#how-to-setup-webflow] ### Add the Components [#add-the-components] For each `Dynamic Property` you want to support in your template, you have to add a Component inside the `Add to Cart`.

### Change the Label Custom Attribute [#change-the-label-custom-attribute] For each component you copied you must change the Custom Attribute: In this way you will indicate that the Dynamic Property will be connected to the Dynamic property associated to the product and that has that specific `Label` indicated in the attribute. ### \[Optional] Delete Parent [#optional-delete-parent] If for style requirements you do require to remove the element that wraps the dynamic property (the Parent) and not only the dynamic property in the case the Dynamic Property doesn't exists you can add the attribute # Wishlist (/docs/ecommerce/add-ons) A wishlist, also known as a favorites list or saved items, is a digital feature that allows users to curate a collection of products they're interested in purchasing at a later time. Data will be persistent for your Customers only if you are using Customer Accounts. If you are using ***Legacy Accounts*** the data will be saved only locally in the browser This Add-On is included in all plans. This Add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing.

## How to Setup \[Shopify] [#how-to-setup-shopify] ### Activate the Add-on [#activate-the-add-on] To turn on the Wishlist feature, go to your project in the Smootify dashboard and activate it within Sites add-ons.

### Set the metafield as writable [#set-the-metafield-as-writable] When you activate the Wishlist add-on, a 'Wishlist Data' metafield is automatically added to your customers in Shopify. To ensure proper functionality, go to your Shopify Dashboard > Settings > Custom Data > Customers. Find the 'Wishlist Data' metafield definition and set 'Customer accounts access' to 'Read and write'.

## How to Setup \[Webflow] [#how-to-setup-webflow] ### Copy the Wishlist Toggle [#copy-the-wishlist-toggle] A "wishlist toggle" refers to the interactive element that allows users to add or remove items from their online wishlist The toggle can be added in any `Product Custom Element`. The component is a simple Custom Element with tag `wishlist-toggle` and inside just an SVG embed. The custom element will have the combo class `is-in-wishlist` when the product associated has been added to the wishlist. The svg custom embed you find in the component has the fill property set as `currentColor` so be sure to style the combo class in order to enhance your UX! ### Create a Wishlist Listing [#create-a-wishlist-listing] To display a customer's wishlisted items, create a dynamic product listing. #### Add a Flex or Grid element [#add-a-flex-or-grid-element] Design your flex/grid by keeping in mind that the replication of your product items will only occur on the live website, where your placeholder will be transformed into the full product listing. #### Design the Product Template item [#design-the-product-template-item] Copy and paste the Product Custom Element inside the flex/grid element you created. Inside the Product Custom Element you can insert any static Webflow element. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) Copy and paste any of our pre-made example inside the flex/grid element you created.

Naturally you can insert any Webflow element you desire inside the pre-made examples. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) #### Add the `data-id` attribute [#add-the-data-id-attribute] To retrieve the correct data from Shopify, add the necessary `data-id` attribute. #### \[Optional] Limit the number of products [#optional-limit-the-number-of-products] By default the dynamic queries explained before will fetch 3 products. You can override this limit by adding another custom attribute to the **Product Custom Element** E.g to fetch 10 products you can add: ### Use Conditional visibility for the listing [#use-conditional-visibility-for-the-listing] To further enhance your design you can use 2 conditional visibility attributes #### Has Items in Wishlist [#has-items-in-wishlist] Apply the following custom attribute on the element that you want to appear only and exclusively when there is at least 1 product in the wishlist #### No Items in Wishlist [#no-items-in-wishlist] Apply the following custom attribute on the element that you want to appear only and exclusively when there are no products in the wishlist # Last Viewed (/docs/ecommerce/add-ons/last-viewed) "Last viewed products" refers to a feature commonly found on e-commerce websites that displays a list of items a user has recently browsed. This functionality aims to enhance the user experience by allowing users to quickly revisit products they've shown interest in without having to search for them again. Data will be persistent for your Customers only if you are using Customer Accounts. If you are using ***Legacy Accounts*** the data will be saved only locally in the browser This Add-On is included in all plans. This Add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing. A `Product` will be set as viewed, when the Product page will be visited. ## How to Setup \[Shopify] [#how-to-setup-shopify] ### Activate the Add-on [#activate-the-add-on] To turn on the Last Viewed feature, go to your project in the Smootify dashboard and activate it within Sites add-ons. ### Set the metafield as writable [#set-the-metafield-as-writable] When you activate the Last Viewed add-on, a 'Last Viewed' metafield is automatically added to your customers in Shopify. To ensure proper functionality, go to your Shopify Dashboard > Settings > Custom Data > Customers. Find the 'Last Viewed' metafield definition and set 'Customer accounts access' to 'Read and write'.

## How to Setup \[Webflow] [#how-to-setup-webflow] ### Create a Last Viewed Listing [#create-a-last-viewed-listing] To display a customer's last viewed items, create a dynamic product listing. #### Add a Flex or Grid element [#add-a-flex-or-grid-element] Design your flex/grid by keeping in mind that the replication of your product items will only occur on the live website, where your placeholder will be transformed into the full product listing. #### Design the Product Template item [#design-the-product-template-item] Copy and paste the Product Custom Element inside the flex/grid element you created. Inside the Product Custom Element you can insert any static Webflow element. For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the [elements documentation](/docs/ecommerce/products/elements) Copy and paste any of our pre-made example inside the flex/grid element you created.

This functionality uses `Shopify Checkout Extensions` in order to create a real bundle of products even at the checkout!

This Add-On is included in all plans. This Add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing. This Add-On requires `Magic Box` add-on to be activated. ## How to configure \[Shopify] [#how-to-configure-shopify] ### Activate the Magic Box Add-on [#activate-the-magic-box-add-on] To turn on the Magic Add-ons feature, go to your project in the Smootify dashboard and activate first the Magic Box addon it within Sites add-ons.

### Activate the Magic Add-ons Add-on [#activate-the-magic-add-ons-add-on] To turn on the Magic Add-ons feature, go to your project in the Smootify dashboard and activate first it within Sites add-ons.

### Set the metafields as readable [#set-the-metafields-as-readable] When you activate the Magic Add-ons add-on, 2 metafields definition will be automatically added to your Shopify. To ensure proper functionality, go to your Shopify Dashboard > Settings > Custom Data > Products. Find the 'Combinations' and 'Add-ons' metafield definitions and enable Storefronts access. ### Set the metaobject as readable [#set-the-metaobject-as-readable] When you activate the Magic Add-ons add-on, a metaobject definition will be automatically added to your Shopify. To ensure proper functionality, go to your Shopify Dashboard > Settings > Custom Data > Metaobjects. Find the 'Combinations' metaobject definition and enable Storefronts access. ### Create your combinations [#create-your-combinations] Create your combinations inside Shopify > Content > Metaojbects > Combinations. Combinations are basically a way to dynamically change title and image of the box based on the *combinations* added to the cart. Inside each Combination you don't have to add the main product but only the addon variants selected. E.g: you have a main product called Tablet and two add-ons Pen and Keyboard. To cover all the combinations you have to create 3 combinations with respectively: * Pen * Keyboard * Pen and Keyboard ### Select your add-ons [#select-your-add-ons] Within the Shopify product dashboard, utilize the 'Add ons' metafield to associate products that should be offered as part of a bundle with the current product. ## How to configure \[Webflow] [#how-to-configure-webflow] ### Add a Flex or Grid element [#add-a-flex-or-grid-element] Design your flex/grid by keeping in mind that the replication of your product items will only occur on the live website, where your placeholder will be transformed into the full product listing, remember to add this element **inside** the `Add to Cart Element` ### Design the Product Template item [#design-the-product-template-item] Copy and paste the Product Custom Element inside the flex/grid element you created. Inside the Product Custom Element you can insert any static Webflow element. But you must add one of our `Add-on selectors`.

Copy and paste any of our pre-made example inside the flex/grid element you created.

### Add the `data-id` attribute [#add-the-data-id-attribute] To retrieve the correct data from Shopify, add the necessary `data-id` attribute. In this case you to select products from the add-ons metafield, so use: ### Add the `data-parent-id` attribute [#add-the-data-parent-id-attribute] To retrieve the correct data from Shopify, add the mandatory `data-parent-id` attribute. The attribute must be connected to the Shopify ID Webflow CMS field and just indicates that you want to load for example related products from the parent product selected by that ID ## JS Extensibility [#js-extensibility-] If you don't want to use Combinations to modify the Box Title or Box Image you have 2 ways: ### Attributes [#attributes] You can add these 2 attributes on the `Add to Cart` Element. Remember that the Box Image url must be on shopify cdn otherwise it will not be accepted. You can modify those attributes with JS, they will be re-read everytime the add to cart button will be pressed. ### Custom Function [#custom-function] You can create a function attached to the `window` object that can process the items that are being added to the cart and return an object with title and image ```ts window.smootifyAddOnsBox = (cartItems) => { /* cartItems is an array of objects { product: Product, variant: ProductVariant, attributes: Object[], quantity: number } */ // Do your own code here return { title: "My Title", image: "My Image" } } ``` # Magic Box (/docs/ecommerce/add-ons/magic-box) A "mix and match bundle" is a sales strategy that gives customers the freedom to create their own personalized product sets. Unlike traditional bundles with pre-selected items, mix and match bundles allow customers to choose the specific products they want within a designated group. Often, mix and match bundles are offered at a discounted price compared to purchasing each item individually. This incentivizes customers to buy more and increases the average order value for the business.

This functionality uses `Shopify Checkout Extensions` in order to create a real bundle of products even at the checkout!

This Add-On is included in all plans. This Add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing. ## How to configure \[Shopify] [#how-to-configure-shopify] ### Activate the Add-on [#activate-the-add-on] To turn on the Magic Box feature, go to your project in the Smootify dashboard and activate it within Sites add-ons.

### Create the Magic Boxes [#create-the-magic-boxes] If you wish to easily show a different title, image and offer a discount price to your customers create Magic Boxes metaobjects from your Shopify dashboard > Content > Metaobjects > Magic Box

## How to configure \[Webflow] [#how-to-configure-webflow] ### Copy the Component [#copy-the-component] To kickstart your Magic box just copy the component below ### Style it [#style-it] Style it based on your own style! ## Component Structure [#component-structure] The component is made by 2 main Custom Elements: * Magic Box Wrapper * Magic Box Cart ### Magic Box Wrapper [#magic-box-wrapper] The magic box wrapper is a Custom Element with tag `smootify-magic-box`. This element requires to include inside it 2 elements: ### The products that you want to allow to be purchasable in the box \[!toc] [#the-products-that-you-want-to-allow-to-be-purchasable-in-the-box-toc] Inside this element you can create the [listing](/docs/ecommerce/products/listing) of the products in any way you wish either CMS or Attributes to load them directly from Shopify ### Magic box Cart \[!toc] [#magic-box-cart-toc] Is a special `Add to Cart` element that will allow you to effectively add the selected products to the cart as a unique box #### Options [#options] Let's see all customization options you can use on the `Magic Box Wrapper`. First of all you have to associate the wrapper to a Magic box! You have 2 ways: If you created a metaobject magic box and you want to associate the wrapper to it, just use the Custom Attribute: {" "} Where the handle can be found on the Shopify Backend

If you don't want to use a metaobject you can also associate the Magic Box Wrapper with a static Box, to do that you can just use 2 custom attributes: {" "} The image will be accepted at the checkout only and exclusively if the image is uploaded on the Shopify CDN. You can upload files on Shopify directly from the dashboard > Content > Files and copy the url there

Discount Percentage can be set only by connecting the Magic Box Wrapper to a Metaobject #### Min/Max/Step Quantities \[!toc] [#minmaxstep-quantities-toc] You can modify minimuum, maximuum and steps required to enable the add to cart with respectively 3 attributes: E.g: if you set min to 3, max to 12 and step to 3, users can purchase the box if it contains 3,6,9 or 12 products. #### Unique Items \[!toc] [#unique-items-toc] If you want to prevent adding multiple quantities of each product you can add the attribute #### Categories \[!toc] [#categories-toc] For certain situations you might want to divide products in different categories and avoid purchasing multiple items for the same category. To define a category you have to wrap each product group in a different `Custom Element` with tag `smootify-box-category`. On the Category Custom Element you have to add the attribute: Categorization is pretty usefull if you need to create for example a product like a `Desktop Computers` where you can create your own computer by adding a piece of each category (Motherboard, GPU, ram, hdd, etc..) Automatically when you add a product inside a `smootify-box-category` and you've designed the categories to be inside a Slider / Tab, the Slider / Tab will move to the next Slide / Tab. If you want to prevent adding multiple quantities of each category you can add the attribute: If you want to automatically remove products when selecting a new product of the same category add the attribute: If you want to allow purchasing only if there is at least one item per category add the attribute: #### Add to Cart Errors [#add-to-cart-errors] The Magic Box Wrapper can trigger a lot of different errors when you add products to the cart, for example you can limit how many items you can add to the box. So you can customize the different errors that will trigger by adding the following custom attributes on the `Add to Cart` element ##### Box is full \[!toc] [#box-is-full-toc] This error pops up when you try to add more items to the box but it already reached the maximuum ##### Too many items \[!toc] [#too-many-items-toc] This error pops up when you try to add a quantity of items to the box that will overfill it ##### Only one \[!toc] [#only-one-toc] This error pops up when you try to add a product that is already in the box and the option unique items is active ##### Only one per category \[!toc] [#only-one-per-category-toc] This error pops up when you try to add a product of a category that is already in the box and the option unique per category is active ### Magic Box Cart [#magic-box-cart] The `Magic Box Cart`is a Custom Element with tag `smootify-magic-box-cart` and is basically the list of items added to box and a submit button. The submit button is made with the same exact structure of the `Add to Cart Button`. #### Items List [#items-list] The items list is made with a Custom Element placeholder that has the tag `box-item`. This placeholder will be repeated once for each item added to the box. Inside this custom element you can use several attributes to dynamically design the element. ##### Product Title \[!toc] [#product-title-toc] The "product title" is simply the name you give to your product, you can render it on any text element by just adding the attribute ##### URL \[!toc] [#url-toc] Any link element can be replaced with the Product URL by just using the attribute: To prevent 404 errors, particularly when your Product CMS collection slug is not 'product', accurately specify the slug you used in the Webflow CMS collection within the [Smootify script configurations](/docs/custom-code/js#options-customizer). ##### Price \[!toc] [#price-toc] Price that reflects the selected item and the customer's market, beyond the initial variant price synced in the Webflow CMS, this specific Smootify Custom Element is required. ##### Description \[!toc] [#description-toc] The product description allows you to convey essential details about your product, such as its features, materials, dimensions, and usage instructions. You can render it inside any Rich Text Element by just adding the attribute ##### Vendor \[!toc] [#vendor-toc] In Shopify, the "vendor" field designates the manufacturer, supplier, or brand of a product. It's a way to track and display the source of your products. You can render the vendor on any text/link element by using the attribute: ##### Featured Image \[!toc] [#featured-image-toc] This is the specific image associated with the variant added to the box. It's a crucial visual element that helps customers understand the differences between the various options of a product. You can render the featured image on any Image or Div (as a background image) just by using the attribute: ##### Line Item Quantity \[!toc] [#line-item-quantity-toc] This is the quantity of that specific item added to the box. You can mark any text element with the Custom Attribute: ##### Line Item Category \[!toc] [#line-item-category-toc] This is the category associated to the item if you used `Magic Box Wrapper` categories. You can mark any text element with the Custom Attribute: ##### Remove from Box \[!toc] [#remove-from-box-toc] To create a remove from box element, you have to create a Custom Element with tag `button` and add the attribute: #### Box Cart Elements [#box-cart-elements] There are many dynamic elements that you can use in order to enhance the UX of your cart, for example to let your customer know that he needs to add other items to the box in order to purchase it, etc. ##### Current Quantity \[!toc] [#current-quantity-toc] You can mark any text element with the attribute: to show the current quantity of items added to the box. ##### Max Quantity \[!toc] [#max-quantity-toc] You can mark any text element with the attribute: to show the max quantity of items added to the box. ##### Left Quantity \[!toc] [#left-quantity-toc] You can mark any text element with the attribute: to show the left quantity of items. ##### Left Quantity Width \[!toc] [#left-quantity-width-toc] You can mark any div element with the attribute: to set the size of the div as the left quantity of items as a percentage. ##### Discount Percentage \[!toc] [#discount-percentage-toc] You can mark any text element with the attribute: to show the max quantity of items added to the box. ##### Missing Categories \[!toc] [#missing-categories-toc] You can mark any text element with the attribute: to show the categories that are missing in the box to allow the purchase. By default the missing categories are divided by `, `. You can change this behaviour by adding another custom attribute: If you use as value `repeat`, the item itself will be duplicated once for each missing category. #### Box Cart Visibility [#box-cart-visibility] To dynamically show/hide elements based on the box cart state you can use Custom Attributes like: ##### Can purchase \[!toc] [#can-purchase-toc] The element with the following attribute will show up only if the box can be purchased (so for example, min, max, steps and categories are satisfied) ##### Cannot purchase \[!toc] [#cannot-purchase-toc] The element with the following attribute will show up only if the box cannot be purchased (so for example, min, max, steps and categories are not satisfied) #### Box Cart Properties [#box-cart-properties] Just like the `Add to Cart` component, even the `Magic Box Cart` supports custom properties, you have just to add additional inputs in the form provided by the component! ## JS Extensibility [#js-extensibility-] Each time an item is added or removed from the box, an event is triggered on the document body. ```ts document.body.addEventListener('smootify:magic_box_change', e => { /* @Types element: SmootifyMagicBox currentQuantity: Number cartItems: { lineItem: CartLineItem, variant: ProductVariant }[] */ const {element, cartItems, currentQuantity} = e.detail; // Do something here }); ``` Use this event to dynamically update the box's title and image. The SmootifyMagicBox element exposes the following interface: ```ts twoslash type SmootifyMagicBox = { /* Modifies Box title */ modifyBoxTitle: (newTitle: string) => void; /* Modifies Box Image if the image url is valid and served by Shopify CDN */ modifyBoxImage: (newImage: string) => void; } ``` ### Example [#example] For example you can modify the title of the magic box and the image based on the items added or removed ```ts document.body.addEventListener('smootify:magic_box_change', e => { const {element, cartItems, currentQuantity} = e.detail; /* element: SmootifyMagicBox currentQuantity: Number cartItems: { lineItem: CartLineItem, variant: ProductVariant }[] */ // Do something here if (currentQuantity > 3) { element.modifyBoxImage("shopify-cdn-url-of-a-3-items-box"); } else { element.modifyBoxImage("shopify-cdn-url-of-a-2-items-box"); } element.modifyBoxTitle(`${currentQuantity} wine box`); }); ``` # Name your Price (/docs/ecommerce/add-ons/name-your-price) "Name your price" products refer to a pricing model where customers are given the freedom to determine the amount they are willing to pay for a product or service. This approach is often used for digital products, charitable donations, or as a promotional tactic. This Add-On requires the Server Plan. The server is necessary to create a draft order with price override This Add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing. This Add-On requires `Draft Orders` add-on to be activated.

## How to Configure [#how-to-configure] ### Activate the Add-on [#activate-the-add-on] To turn on the `Name your Price` feature, go to your project in the Smootify dashboard and activate it within Sites add-ons. Be sure also to enable the `Draft Orders` add-on. ### Copy the Component [#copy-the-component] Add the following component in the `Add to Cart` element ### Customize the Component [#customize-the-component] The component is just a custom element with tag `name-your-price` and an input of type number in it. You can (and you really should do) set a minimuum and maximuum amount to accept for the input by adding the custom attributes: The Attributes must be added on the `Input` element Unlike typical apps, this feature uses Shopify's draft order price overrides, avoiding the creation of new product variants. It works seamlessly with both 'Add to Cart' and 'Buy Now' options by generating a draft order. # Product Configurator (/docs/ecommerce/add-ons/product-configurator) Introducing the `Product Configurator` add-on, a powerful tool that transforms your product offerings by enabling complex, formula-driven pricing. Say goodbye to static prices and hello to a world of customizable, interactive products. This add-on empowers you to create products where the final price is calculated in real-time, based on a combination of user-selected options, quantities, and custom formulas. From simple checkboxes and dropdowns to intricate measurement inputs and mathematical expressions, you can build truly personalized and flexible pricing structures. Perfect for custom-built products, configurable services, or any scenario where the 3 option sets structure and add-ons simply doesn't cut it. This add-on opens up a new realm of possibilities, allowing you to create engaging and transparent shopping experiences that directly reflect the unique choices of your customers. This Add-On requires the Server Plan. The server is necessary to create a draft order with price override This Add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing. This Add-On requires `Draft Orders` add-on to be activated. ## Configurator Inputs [#configurator-inputs] Let's explore the various inputs you can use to tailor the pricing of your products within the "Add to Cart" element. We'll break down each input, examining how they can affect the final price. ### Text / Textarea Input [#text--textarea-input] This configurator input is the most generic one and can be used with any type of text input (like email, url, phone) and with textarea. This component supports only one input at time, if you require more configurator properties, just use multiple components The element you can copy from this section is a Custom Element with tag `configurator-input`, inside it you will find: 1. A **label** element that you can delete if not needed; 2. An **input** of type text that you can modify according to your needs or replace with a Textarea; 3. A **Custom Element** with tag `error-message`, this element is just a small UX improvement to show up a custom message if your customers are trying to buy the button but the input is not correctly filled, you can delete it if not needed. #### Price Formula [#price-formula] The price formula for this Input must be defined on the Custom Element `configurator-input` by using the attribute Enter your price calculation in the custom attribute value. You can use `[price]` and `[length]` as placeholder tokens in your formula for this input. As an example, if you want to add a 1 (in the base currency so 1€ / 1$ / etc) surcharge when this input field is filled, you would use this formula: `[price] + 1` That as custom attribute will be The `[length]` token can be used if you have a price instead that varies by the length of the input. For example if you have a ring product with an optional engraving and you want to charge 30 cents for each letter you can use the formula: `[price] + 0.3 * [length]` That as custom attribute will be ### Checkbox [#checkbox] This configurator input will modify the price if the checkbox is checked This component supports only one checkbox at time, if you require more configurator properties, just use multiple components The element you can copy from this section is a Custom Element with tag `configurator-checkbox`, inside it you will find: 1. A **label** element that you can delete if not needed; 2. A **checkbox** element; #### Price Formula [#price-formula-1] The price formula for this Input must be defined on the Custom Element `configurator-checkbox` by using the attribute Enter your price calculation in the custom attribute value. You can use `[price]` as placeholder token in your formula for this input. As an example, if you want to add a 1 (in the base currency so 1€ / 1$ / etc) surcharge when the checkbox is checked, you would use this formula: `[price] + 1` That as custom attribute will be ### Dimension [#dimension] Use this configurator input to create dynamic pricing based on user-entered dimensions. In this configurator input you can add all the number inputs you desire. Perfect for products where price varies by area, volume, or similar measurements. This component supports only number inputs. The element you can copy from this section is a Custom Element with tag `configurator-dimension`, inside it you will find: 1. A **Label** element that you can delete if not needed; 2. 2 **Divs** with respectively: * An **input** of type number that you can modify according to your needs (you should change Name, min and max attributes) * A **Custom Element** with tag `error-message`, this element is just a small UX improvement to show up a custom message if your customers are trying to buy the button but the input is not correctly filled, you can delete it if not needed. It will work only if it's set as the next sibling element of the input, if you move the position it will not work anymore #### Price Formula [#price-formula-2] The price formula for this Input must be defined on the Custom Element `configurator-dimension` by using the attribute Enter your price calculation in the custom attribute value. This input allows you to use `[price]` and dynamic placeholders in your price calculation. The placeholders, formatted as `[{InputName}]`, represent the values entered in your number input fields. Simply replace `{InputName}` with the specific name you gave to each input. ### Example \[!toc] [#example-toc] Let's say we're selling a rectangular item. To calculate the price based on its area, we've created two number inputs: `Length` and `Width` that represent the length and width of the rectangle in meters. Our product is priced 10€ per m² So our formula would be `[price] + (10 * [Length] * [Width])` That as custom attribute will be ### Select [#select] This configurator input will modify the price based on the selected value This component supports only one select at time, if you require more configurator properties, just use multiple components The element you can copy from this section is a Custom Element with tag `configurator-select`, inside it you will find: 1. A **label** element that you can delete if not needed; 2. A **select** element; #### Price Formula [#price-formula-3] The price formula for this Input is defined directly on the Select Choices Values. That need to be expressed in the following way: `Value|Formula` The `Value` is the effective value that your customer will see as property on the cart (and the store owner on the shopify dashboard), and `Formula` is the formula that will be applied if that specific **choice** is selected You can use `[price]` as placeholder token in your formula for this input. ### Example \[!toc] [#example-toc-1] We have a property on our product that has 3 different possible choices with respectively 3 different surcharges, in this case we would add the following choices in the webflow select: ### Dropdown [#dropdown] This configurator input will modify the price based on the selected value, the only difference between this input and the previous one, is that this input will use a Dropdown element to control the Select input This component supports only one select at time, if you require more configurator properties, just use multiple components The element you can copy from this section is a Custom Element with tag `configurator-dropdown`, inside it you will find: 1. A **label** element that you can delete if not needed; 2. A **dropdown** element; 3. A **select** element, that will be hidden in the frontend, do not remove it, the dropdown will be dynamic based on this select values; #### Price Formula [#price-formula-4] The price formula for this Input is defined directly on the Select Choices Values. That need to be expressed in the following way: `Value|Formula` The `Value` is the effective value that your customer will see as property on the cart (and the store owner on the shopify dashboard), and `Formula` is the formula that will be applied if that specific **choice** is selected You can use `[price]` as placeholder token in your formula for this input. ### Example \[!toc] [#example-toc-2] We have a property on our product that has 3 different possible choices with respectively 3 different surcharges, in this case we would add the following choices in the webflow select: ### Radio [#radio] This configurator input will modify the price based on the checked radio value The element you can copy from this section is a Custom Element with tag `configurator-radio`, inside it you will find: 1. A **label** element that you can delete if not needed; 2. 3 Radio inputs that you have to customize based on your needs; #### Price Formula [#price-formula-5] The price formula for this Input is defined directly on the Radio Choice Values. That need to be expressed in the following way: `Value|Formula` The `Value` is the effective value that your customer will see as property on the cart (and the store owner on the shopify dashboard), and `Formula` is the formula that will be applied if that specific **choice** is selected You can use `[price]` as placeholder token in your formula for this input. ### Example \[!toc] [#example-toc-3] We have a radio select on our product that has 3 different possible choices with respectively 3 different surcharges, in this case we would add the following choices in the webflow select: ### File Input [#file-input] This configurator input will modify the price based on the uploaded files. #### Price Formula [#price-formula-6] Enter your price calculation in the custom attribute value. You can use `[price]` and `[file]` as placeholder tokens in your formula for this input. As an example, if you want to add a 1 (in the base currency so 1€ / 1$ / etc) surcharge when this input field is filled, you would use this formula: `[price] + 1` That as custom attribute will be The `[file]` token can be used if you have a price instead that varies by how many files have been uploaded. For example if you have a product where you want to charge 30 cents for each file you can use the formula: `[price] + 0.3 * [file]` That as custom attribute will be #### Options [#options] You can configure the element by adding additional attributes explained below #### Property Name \[!toc] [#property-name-toc] By default the Property will be created with name `File`, if you need to customize the name just use the attribute: #### Multiple Files \[!toc] [#multiple-files-toc] If you need to allow multiple files uploading you can use the attribute: #### Min File Size \[!toc] [#min-file-size-toc] If you need to customize the minimuum file size required you can use the attribute: for example Will set the minimuum allowed file size to 2MB Max file size is 20MB and cannot be modified, since that is the limit imposed by Shopify #### Min Resolution \[!toc] [#min-resolution-toc] If you need to customize the minimuum file image resolution required you can use the attribute: Max resolution is 18.490.000 and cannot be modified, since that is the limit imposed by Shopify #### Show Image Preview \[!toc] [#show-image-preview-toc] If you want to see the preview image of the file just uploaded in the file input, you can use the attribute: #### Accept only images \[!toc] [#accept-only-images-toc] By default the file uploader will accept all file types accepted by Shopify, if you want to accept only images you can add the attribute: ### Quantity Breaks [#quantity-breaks] If you want to have a different price based on quantities, you have to create a Component with the following utility: paste the Component inside the `quantity-input`. It's just an hidden embed with a custom script that will inform the Product Configurator about the different Quantity Pricing breaks! (All without being forced to be on Shopify Plus) # Product File Upload (/docs/ecommerce/add-ons/product-file-upload) Our Product file upload add-on allows customers to upload files directly inside your `Add to Cart` element as a custom property. These files are then conveniently accessible within your Shopify admin, simplifying custom orders and file management. Smootify Docs

This Add-On requires the Server Plan. The server is necessary to create an Upload Link and allow the file upload process properly. This add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing. The file will be uploaded directly on Shopify so the limits are imposed by Shopify: * Maximum file size is 20MB; * Maximum resolution is (4300 x 4300); * Allowed formats: png, jpg, web, csv, pdf and json. If you need different limits we suggest you using **UploadCare** or create a solution with **Cloudflare R2** that is the cheapest file hosting on the market. ### Options [#options] The component can be customized with the Custom Attributes explained in the section below: #### Property Name [#property-name] By default the Property will be created with name `File`, if you need to customize the name just use the attribute: #### Multiple Files [#multiple-files] If you need to allow multiple files uploading you can use the attribute: #### Min File Size [#min-file-size] If you need to customize the minimuum file size required you can use the attribute: for example Will set the minimuum allowed file size to 2MB Max file size is 20MB and cannot be modified, since that is the limit imposed by Shopify #### Min Resolution [#min-resolution] If you need to customize the minimuum file image resolution required you can use the attribute: Max resolution is 18.490.000 and cannot be modified, since that is the limit imposed by Shopify #### Show Image Preview [#show-image-preview] If you want to see the preview image of the file just uploaded in the file input, you can use the attribute: #### Accept only images [#accept-only-images] By default the file uploader will accept all file types accepted by Shopify, if you want to accept only images you can add the attribute: # Custom Element (/docs/ecommerce/variants/custom-element) ## What is the Smootify Variant Custom Element? [#what-is-the-smootify-variant-custom-element] The Smootify Variant Custom Element is a specific Custom Element that Smootify requires to properly identify and manage variants cards within your Webflow pages. It acts as a container and a signal to Smootify, indicating where product-related information should be injected and processed. Smootify Docs

### Why is it so important? [#why-is-it-so-important] Think of the Smootify Variant Custom Element as the communication bridge between your Shopify store and your Webflow page. Without it, Smootify has no way of knowing: * **Where** to insert product information. * **Where** to inject dynamic functionalities. * **Which** Shopify product variant is being displayed. Essentially, it's the anchor point that Smootify uses to inject dynamic content. **In simpler terms:** * Without the correct Variant Custom Element, your product pages will likely be broken or display incorrect data and be completely static ### How to use it? [#how-to-use-it] Typically, you'll add the Smootify Variant Custom Element as a **Webflow Custom Element** with the specific tag `smootify-variant` and a specific custom attribute `data-id` that Smootify recognizes in order to properly connect the Webflow Element with the Shopify product. The attribute you will use can vary based on the products you need to show. In general you will use the Variant Custom Element only and exclusively inside **Webflow Collection Lists** by connecting the attribute `data-product-id` to the Webflow CMS field `Shopify ID` In next documents you will find detailed infos on how to create Product Variant listings! # Elements and Attributes (/docs/ecommerce/variants/elements) This document outlines the various custom elements and attributes you can utilize within the Smootify Variant Custom element to display dynamic variant data fetched from the Shopify Storefront API. Smootify Docs

## Title [#title] The Variant Title in Shopify is the combination of all the Options, for example if your Variant has 1. Option 1 - M 2. Option 2 - Red The variant title will be `M / Red`. You can mark any text element to be rendered as the Variant title with the Custom Attribute ## Featured Image [#featured-image] In Shopify, the "variant featured image" is the specific image associated with a particular product variant. It's a crucial visual element that helps customers understand the differences between the various options of a product. You can render the featured image on any Image or Div (as a background image) just by using the attribute: ## Stock Quantity [#stock-quantity] In Shopify, "stock quantity" refers to the number of units you have available for the variant. You can mark any text element to show up the stock quantity by just using the attribute: ## Option Names and Values [#option-names-and-values] In Shopify, "variant options" are the attributes that define the different variations of a product. They're the choices a customer makes to select the specific version of a product they want to purchase. Shopify automatically generates all possible combinations of the option values, creating the individual variants that will have a separate pricing and inventory. Shopify allows up to 3 option sets. If you need to show up selected option names and values, outside of the add to cart variant selectors, you can use on any text element respectively the attributes and that will render the selected option names and values of each option set (if available in the variant). ## Option Swatches [#option-swatches] In Shopify, "variant options" are the attributes that define the different variations of a product. They're the choices a customer makes to select the specific version of a product they want to purchase. Shopify automatically generates all possible combinations of the option values, creating the individual variants that will have a separate pricing and inventory. Shopify allows up to 3 option sets. For each option value Shopify allows you to associate a `Swatch`. To define an element that will show up if the `Swatch` associated to the option do exists you have to use respectively: Inside those elements you can use 4 different attributes: ### Name [#name] On any text element you can use the custom attribute to render the option name ### Image [#image] On any image/div element you can use the custom attribute to render the swatch associated image ### Color [#color] On any element you can use the custom attribute to render the swatch associated color as a background color ## URL [#url] Any link element can be replaced with the Product Variant URL by just using the attribute: To prevent 404 errors, particularly when your Product CMS collection slug is not 'product', accurately specify the slug you used in the Webflow CMS collection within the [Smootify script configurations](/docs/custom-code/js#options-customizer). The link will just be the link to the product page but that will pre-select the selected variant ## Discount Percentage [#discount-percentage] If your variant has a compare-at price you can show up the discount percentage on any text by using the attribute: The discount percentage is not relative to coupons you created in your store! It's only and exclusively relative to the difference between price and compare-at price! ## Discounted Amount [#discounted-amount] If your variant has a compare-at price you can show up the discounted amount on any text by using the attribute: The discounted amount is not relative to coupons you created in your store! It's only and exclusively relative to the difference between price and compare-at price! ## Price [#price] For dynamic pricing that reflects the selected variant and the customer's market, this specific Smootify Custom Element is required. ### Element Structure [#element-structure] The price element is just a custom element with tag `smootify-price` and inside 2 texts with respectively the attributes: If you remove those 2 attributes or change the tag name the price will not be correctly rendered. By default to comply with [European Laws](https://help.shopify.com/en/manual/compliance/legal/pricing-indication-directive) the compare at price is hidden by Shopify settings for all customers that do visit your site from a country within the [European Economic Area (EEA)](https://ec.europa.eu/eurostat/statistics-explained/index.php?title=Glossary:European_Economic_Area_$EEA$). You can change this setting from your Shopify Dashboard, **Settings > Markets > Preferences > Pricing - Compare-at-price hiding**. The pricing format is decided by your [Shopify settings](https://help.shopify.com/en/manual/international/pricing/currency-formatting) in particular by the option called "HTML without currency". The currency format is heavily cached so don't worry if you don't see the changes immediately, try in incognito or wait few minutes. ### Element Options [#element-options] If by any change you need to remove part of the formatted price, you can use the custom attribute: For example If by any change you need to replace part of the formatted price with a different one, you can use the custom attribute: For example ## Product Elements [#product-elements] Below you can find also a list of Product related attributes you can use, they will refer to the product of the variant showed in the card ### Title [#title-1] The "product title" is simply the name you give to your product, you can render it on any text element by just adding the attribute ### Description [#description] The product description allows you to convey essential details about your product, such as its features, materials, dimensions, and usage instructions. You can render it inside any Rich Text Element by just adding the attribute ### Specific Image [#specific-image] Sometimes it's pretty usefull to load a specific selected image of your Product Media field. Think for example if you want to create an interaction that at hover shows the second image instead of the featured one. For this purpose you can use the attribute: on Images or on Div elements (as background) By default the image that will be rendered is the second one. You can modify this behaviour by adding an additional attribute: By default in all programming languages, arrays of elements are **0-indexed**. That means that if you use you will select the 3rd image of the Product Media field ### First Collection [#first-collection] If you want to create a text/link element associated with the First Collection of your product without using Nested Collection Lists or when you are using Product Custom Elements directly rendered with Shopify data, you can use the attribute Since the order of the collections is not modifiable in Shopify, you could have in the first collection something you would want to avoid. You can do that by adding also the attribute: To prevent 404 errors, particularly when your Collection CMS collection slug is not 'collection', accurately specify the slug you used in the Webflow CMS collection within the [Smootify script configurations](/docs/custom-code/js#options-customizer). ### Vendor [#vendor] In Shopify, the "vendor" field designates the manufacturer, supplier, or brand of a product. It's a way to track and display the source of your products. You can render the vendor on any text/link element by using the attribute: To prevent 404 errors, particularly when your Vendor CMS collection slug is not 'vendor', accurately specify the slug you used in the Webflow CMS collection within the [Smootify script configurations](/docs/custom-code/js#options-customizer). ## Dynamic CDN Compression [#dynamic-cdn-compression] For all elements that render images (like Variant Image, Specific Image, Images, etc...) you can leverage the [Shopify CDN](https://cdn.shopify.com/) to dynamically compress and optimize the images. You can control the CDN by using 4 different properties that you can combine in different ways: * Only Width * Only Height * Width & Height + Crop * Width & Height + Padding Color #### Width \[!toc] [#width-toc] The desired width of your image, automatically Shopify will resize down the image to stay at your desired width, values can go from 0 to a max of 5700. You can indicate that by using the attribute: For example to get an image that get's resized down to 640px width you have just to add the following attribute: the name of the attribute is `max-width` because `width` is a reserved name and you can't use it in Webflow. #### Height \[!toc] [#height-toc] The desired height of your image, automatically Shopify will resize down the image to stay at your desired height, values can go from 0 to a max of 5700. You can indicate that by using the attribute: For example to get an image that get's resized down to 640px height you have just to add the following attribute: the name of the attribute is `max-height` because `height` is a reserved name and you can't use it in Webflow. #### Crop \[!toc] [#crop-toc] If you've set both Height and Width values, and your image's original dimensions are larger, you have the option to set a crop preference. This preference dictates the starting point for image cropping within Shopify. #### Padding Color \[!toc] [#padding-color-toc] If you've set both Height and Width values, and your image's original dimensions are smaller, you have the option to set a padding color. This preference dictates the color that Shopify will use to *fill* the image and achieve your desired dimensions. You can only use Hex code colors e.g: if you want to pad the image with our cool color just use the attribute: Note that this feature is exclusive for images loaded directly from Shopify and will not work on elements you connected to Webflow CMS instead. # Overview (/docs/ecommerce/variants) Shopify Product Variants allow you to offer different versions of a single product, such as different sizes, colors, materials, or styles. This enables customers to choose the specific version they want, all from a single product page. Smootify Docs

## What are Product Variants? [#what-are-product-variants] Product variants are different options for a product that share the same core attributes but have variations. For example, a t-shirt could have variants based on: * **Size:** Small, Medium, Large, Extra Large * **Color:** Red, Blue, Green, Black * **Material:** Cotton, Polyester, Blend Variants allow you to: * Consolidate product listings, making it easier for customers to browse. * Manage inventory for each specific variation. * Set different prices for different variants. * Display unique images for each variant. ## How Variants Work in Shopify [#how-variants-work-in-shopify] * When creating a product, you can choose to add variants. * You can define up to three variant options (e.g., Size, Color, Material). * Shopify automatically generates all possible combinations of the variant options. * You can then customize each variant with: * Price * SKU (Stock Keeping Unit) * Barcode * Inventory quantity * Weight * Images * Customers can select their desired variant from dropdown menus or swatches on the product page. ## Creating Product Variants [#creating-product-variants] 1. **Go to Products:** In your Shopify admin, go to "Products." 2. **Create or Edit a Product:** Create a new product or select an existing product. 3. **Add Variants:** In the "Variants" section, click "Add options like size or color." 4. **Define Options:** Enter the names of your variant options (e.g., Size, Color). 5. **Enter Option Values:** Enter the values for each option (e.g., Small, Medium, Large; Red, Blue, Green). 6. **Edit Variants:** Shopify will generate the variants. You can then edit each variant to set its price, inventory, and other details. 7. **Add Images:** Upload images that correspond to each variant. 8. **Save:** Save your product. ## Benefits of Using Variants [#benefits-of-using-variants] * **Improved Customer Experience:** Customers can easily find the specific product they want. * **Simplified Inventory Management:** Track inventory for each variation separately. * **Increased Sales:** Offer a wider range of product options. * **Enhanced Product Pages:** Consolidate multiple similar products into a single listing. * **Accurate Reporting:** Track sales and inventory for each variant. ## How to use Variants in Webflow [#how-to-use-variants-in-webflow] Variants are not imported inside Webflow CMS as we already discussed inside the Product section of this documentation, you can use Variants in 2 ways: 1. Inside the `Add to Cart` element using the variants selectors, and this is the main usage of Variants that you will have in **all** your stores; 2. Some stores, for a tailored browsing experience, can choose to display each product variant as an individual card on certain pages. This allows customers to see specific variations at a glance and directly access the product page with their chosen variant pre-selected. # Listing (/docs/ecommerce/variants/listing) This document outlines the steps and best practices for creating product variants listings in Webflow using Smootify. Smootify Docs

Learn how to fetch product variants data from your Shopify store and display it in visually appealing grids and lists on your Webflow site. You can create product variants listings using only one method: * Webflow Collection Lists ## Webflow Collection Lists [#webflow-collection-lists] Webflow Collection Lists are a core feature within the Webflow Designer that allows you to dynamically display content based on a structured dataset. Think of them as templates for repeating elements. **Key Concepts:** * **Collections:** * A collection is a database-like structure within Webflow that stores structured data. * Each collection contains fields (e.g., "Product Name," "Image," "Price") that define the type of data it holds. * **Collection Lists:** * A Collection List is a Webflow element that displays the items within a collection. * You design a single "template item" within the Collection List, and Webflow automatically replicates that template for each item in the collection. * Dynamic data from the collection's fields is then populated into each template item. * **Dynamic Data Binding:** * Within a Collection List item, you can bind elements (text, images, links) to the fields of your collection. * This means the content of those elements will change dynamically based on the data in each collection item. ## How to create a Product Listing [#how-to-create-a-product-listing] ### Add a Collection List [#add-a-collection-list] Drag and drop a **Collection List** element onto your Webflow page.

### Connect the list to the Product Collection [#connect-the-list-to-the-product-collection] Link the Collection List to the collection that contains your products

### Design the Product Variant collection item [#design-the-product-variant-collection-item] ### Connect the Variant Custom Element to the Shopify ID [#connect-the-variant-custom-element-to-the-shopify-id] Connect the **Variant Custom Element** to the Shopify ID field of the Webflow CMS ### \[Optional] Filter Variants by Unique Option [#optional-filter-variants-by-unique-option] If your product has multiple options sets and you want to filter variants by unique values of only one option set, you can add on the `Variant Custom Element` the attribute Where `option index` can be `0`, `1` or `2`. For example if your product has 2 options sets with respectively the values `X, M` and `Blue,Red,Yellow`. You will have these variants combinations: `X/Blue`, `X/Red`, `X/Yellow`, `M/Blue`, `M/Red`, `M/Yellow`. If you set the attribute The variants that will be showed will be `X/Blue` and `M/Blue` While if you set the attribute In this case the variants that will be showed will be `X/Blue`, `X/Red`, `X/Yellow` ### \[Optional] Filter & Sort the Collection List [#optional-filter--sort-the-collection-list] Webflow provides powerful tools to filter and sort your Collection Lists, allowing you to display specific subsets of your data in a desired order. Filtering allows you to display only products that meet certain criteria. **Select the Collection List:** Click on the Collection List element in your Webflow Designer. **Open the Collection List Settings:** In the right sidebar, go to the "Collection List Settings" panel. **Add a Filter:** * Click the "+ Add Filter" button. * Choose the field you want to filter by (e.g., "Collection," "Product Type"). * Select a filter condition (e.g., "equals," "contains," "greater than"). * Enter the value you want to filter by. **Multiple Filters:** You can add multiple filters to refine your results. Webflow will apply all filters simultaneously. **Filter Logic:** By default, filters are applied with an "AND" logic (all conditions must be met), but you can also select the "OR" logic. **Select the Collection List:** Click on the Collection List element. **Open the Collection List Settings:** Go to the "Collection List Settings" panel. **Add a Sort Order:** * Click the "+ Add Sort Order" button. * Choose the field you want to sort by. * Select the sort direction (ascending or descending). **Multiple Sort Orders:** You can add multiple sort orders to create complex sorting rules. Webflow will apply the sort orders in the order they are listed. # Metafields (/docs/ecommerce/variants/metafields) Shopify metafields are a powerful feature that allows you to store custom data associated with your products, variants, collections, customers, orders, and more. They provide a flexible way to add information beyond the standard fields provided by Shopify. Smootify Docs

## What are Metafields? [#what-are-metafields] Metafields are essentially custom fields that you can create and attach to various Shopify resources. They allow you to store data that's specific to your business and products, enabling you to: * **Add detailed product specifications:** Store information like material, dimensions, or technical details that aren't available in standard product fields. * **Enhance product filtering and search:** Use metafields to create custom filters and improve search functionality. * **Personalize customer experiences:** Store customer preferences or loyalty program information. * **Manage complex product variations:** Store specific data for each variant, such as size charts or care instructions. * **Create dynamic content:** Display metafield data on your storefront using Liquid or the Storefront API. * **Integrate with third-party apps:** Share custom data with other apps and services. ## Key Concepts [#key-concepts] * **Namespace:** A namespace is a container for your metafields. It helps organize your metafields and prevent naming conflicts with other apps or custom code. For example, `custom.product_details`. * **Key:** The key is a unique identifier for your metafield within its namespace. For example, `material` or `size`. * **Value:** The value is the actual data stored in your metafield. It can be text, numbers, dates, booleans, or JSON objects. * **Type:** The type defines the format of the value. Common types include: * `string`: Text data. * `integer`: Whole numbers. * `decimal`: Numbers with decimal places. * `boolean`: True or false values. * `date`: Date values. * `date_time`: Date and time values. * `json`: JSON objects. * `file_reference`: References to files stored in Shopify's Files section. * `product_reference`: References to Shopify products. * `variant_reference`: references to shopify variants. ## How to create Metafields [#how-to-create-metafields] You can create metafields in the Shopify admin panel, from Settings > Custom Data > Metafields When creating a metafield, you'll need to specify the namespace, key, value type, and optionally a description. Be sure to set the metafield as `Visible on storefront`, there is a checkbox that you must select at the end of the metafield creation page. Avoid changing the namespace that Shopify uses by default. Leave it as `custom` unless you really need to do something particular. Avoid changing the casing of the key that Shopify uses by default. Leave it as `snake_case` otherwise it will not be usable in the store. Avoid using special chars and non utf-8 chars inside metafields labels otherwise matching could fail ## How to render variant metafields inside Webflow [#how-to-render-variant-metafields-inside-webflow] You can directly render variant metafields inside Webflow both inside the `Product Custom Element` and inside the `Variant Custom Element`. You just need to add the Custom Attribute: So for example if you created a metafield with `Namespace and Key: custom.my_field` you have to add the attribute You can also render metafields outside of the `custom` namespace, by adding an additional attribute So for example if you created a metafield with `Namespace and Key: global.my_field` you have to add the attributes You do not need to specify the type of the metafield. Smootify scripts are smart enough to understand the context of your element and how to render them. ### Supported Metafields [#supported-metafields]

Only for metafields of type `Single Line Text` you can use an additional attribute: This will ask Smootify to output the value inside the attribute explained in the attribute instead of setting the value as the text of the element. E.g: Will set the value of the metafield in the attribute `data-id` of the element. ### Metafields Visibility [#metafields-visibility] Learn how to show or hide elements based on whether a metafield exists and what its value is. To control visibility of an element you have principally 2 custom attributes to use: This attribute will show the element if the metafield exists with 2 exceptions: 1. In the case you used a metafield of type **True / False** it will be shown if the metafield is set and is set as **True**; 2. In the case of metafields of type **Integer Number**, the element will be shown if the metafield is set and the value is higher than **0**; The second custom attribute is: This attribute will act in the opposite way of the first one, so the element will show only if the metafield doesn't exists. #### Check for Value [#check-for-value] By default metafields visibility attributes will just check for the existence of the metafield. If you wish instead to check for the value that is inside the metafield add also the attribute: For example if you created a metafield of type **Single Line Text** with key `my_option` and you want to show an element only when the metafield value is for example **Option 1**. You have to use the custom attributes: # CMS Structure (/docs/ecommerce/vendors/cms) This CMS collection holds all the data of your vendors inside Webflow. Smootify assumes that your CMS collection that holds the products data is set with the slug **"vendor"**. But you can use the slug you wish, just be sure to follow up the [JS configuration](/docs/custom-code/js) in order to inform Smootify scripts about your custom slug. Smootify Docs

## CMS Fields [#cms-fields] The Product CMS collection requires the following CMS fields: ### Name [#name] Is preconfigured by Webflow when you create a CMS collection, this field will hold the title of your Shopify Vendor ### Slug [#slug] Is preconfigured by Webflow when you create a CMS collection, this field will hold the handle of your Shopify Vendor Vendors in Shopify are created with just a name, so you can't add additional CMS fields that are connected to Shopify. You can however create fields in the Webflow CMS that you can fill directly in Webflow! # Overview (/docs/ecommerce/vendors) Shopify Vendors are a feature that allows you to track and manage the suppliers or manufacturers of your products. This can be particularly useful for businesses that source products from multiple suppliers. Smootify Docs

## What are Shopify Vendors? [#what-are-shopify-vendors] Vendors in Shopify represent the companies or individuals that provide you with the products you sell. They help you: * **Organize your inventory:** Easily filter and sort products by vendor. * **Track supplier information:** Keep a record of your vendors. * **Generate reports:** Analyze sales and inventory by vendor. * **Simplify purchasing:** Quickly identify the source of specific products. ## How Vendors Work in Shopify [#how-vendors-work-in-shopify] * Vendors are assigned to individual products. * You can add or select a vendor when creating or editing a product. * Shopify automatically tracks which products are associated with each vendor. * You can filter and sort products by vendor in the Shopify admin. * Vendors are a property of the product itself, and are not a separate section with dedicated information like collections or metaobjects. ## Adding and Managing Vendors [#adding-and-managing-vendors] 1. **Adding a Vendor to a Product:** * When creating or editing a product, locate the "Vendor" field. * Type in the name of the vendor. * If the vendor already exists, it will appear in a dropdown menu. * If it's a new vendor, simply type the name and save the product. 2. **Managing Vendors:** * Shopify doesn't have a dedicated "Vendors" page, in Shopify Vendors are just a simple Text. ## Benefits of Using Vendors [#benefits-of-using-vendors] * **Improved Inventory Management:** Easily track the origin of your products. * **Streamlined Purchasing:** Quickly identify suppliers for reordering. * **Enhanced Reporting:** Analyze sales and inventory performance by vendor. * **Better Organization:** Keep your product sourcing information organized. # Template Page (/docs/ecommerce/vendors/template) ## List the products of the current vendor \[toc] [#list-the-products-of-the-current-vendor-toc] The Dynamic Vendor Template page in your Webflow project should be designed to automatically display all products created by the currently viewed vendor. ## How to create a Product Listing [#how-to-create-a-product-listing] ### Add a Collection List [#add-a-collection-list] Drag and drop a **Collection List** element onto your Webflow page.

### Connect the list to the Product Collection [#connect-the-list-to-the-product-collection] Link the Collection List to the collection that contains your products

### Filter the Collection List [#filter-the-collection-list] Webflow provides powerful tools to filter and sort your Collection Lists, allowing you to display specific subsets of your data in a desired order. **Select the Collection List:** Click on the Collection List element in your Webflow Designer. **Open the Collection List Settings:** In the right sidebar, go to the "Collection List Settings" panel. **Add a Filter:** * Click the "+ Add Filter" button. * Choose the field **Vendor**. * Select the filter condition **Equals** * Enter the value **Current Vendor**

# Relume Library (/docs/getting-started/libraries/relume) Launch Shopify Stores at Unprecedented Speed with Relume and Smootify Imagine building stunning, fully customized Shopify stores entirely within the intuitive Webflow environment, and doing it in record time. Now, it's possible. **Introducing the Relume & Smootify Starter Template:** This isn't just a template; it's a launchpad. We've combined the powerful capabilities of Relume's component library and organizational structure with Smootify's seamless Shopify integration to create a starter template that dramatically accelerates your workflow. **What this means for you:** * **Rapid Development:** * Leverage pre-built, beautifully designed components from Relume. * Utilize Smootify's streamlined Shopify connection to eliminate complex coding. * **Complete Webflow Customization:** * Design every aspect of your Shopify storefront visually, within Webflow's powerful designer. * No more limitations imposed by standard Shopify themes. * **Efficient Workflow:** * Benefit from Relume's organized component system, ensuring consistency and maintainability. * Smootify’s CMS integration simplifies product management. * **Launch in Almost No Time:** * This starter template provides the foundation, allowing you to focus on design and content. * Go from concept to live store faster than ever before. **This template includes:** * A foundational Webflow project structure optimized for Shopify integration. * Pre-configured components ready for seamless Shopify functionality. * A CMS structure designed to work with Shopify product data. **Combine the power of Relume with Smootify to launch Shopify stores totally designed in Webflow\... in almost no time!** This starter template empowers you to create exceptional e-commerce experiences with unparalleled speed and efficiency. [Learn more](https://www.smootify.io/templates/relume-starter-project) # Checklist (/docs/getting-started/publish/checklist) Congratulations! You've successfully built your e-commerce storefront in Webflow, powered by Shopify and Smootify. This checklist is designed to guide you through the final steps before launching your store to the world, ensuring a smooth and successful transition. By meticulously reviewing each item, you'll minimize potential issues and provide your customers with an optimal shopping experience. Let's get your store live! # Domains configuration (/docs/getting-started/publish/domains) To use the headless channel, you have to setup a different domain on Shopify. If you attach both domains to Shopify and to Webflow, the checkout will not work, since the page would be intercepted by the Webflow hosting, so be sure to attach the main domain only on Webflow, and use a subdomain like store.domain.tld for Shopify. The domain configuration depends exclusively by the domain provider you used but be sure to: ## Attach the main domain to Webflow [#attach-the-main-domain-to-webflow] The main domain like `www.mysite.tld` must be connected only and exclusively to Webflow. Be sure to use www as the default one in Webflow since most common domain registrant do not support CNAME flattening, ALIAS or ANAME records. [Webflow documentation](https://help.webflow.com/hc/en-us/articles/33961266716307-Quick-connect-a-custom-domain#faq-and-troubleshooting-tips) ## Detach the main domain from Shopify [#detach-the-main-domain-from-shopify] If your main domain (e.g: `www.mysite.tld`) was previously attached to Shopify, you must detach it, otherwise your Checkout will not work since the url will be intercepted by Webflow server. [Shopify documentation](https://help.shopify.com/en/manual/domains/add-a-domain) ## Attach a subdomain on Shopify [#attach-a-subdomain-on-shopify] Even if you can actually leave the default `.myshopify.com` url to effectively use correctly the Checkout, is better for customers trust to see the checkout on an url that belongs to your domain. Is adviced to use though a subdomain on your Shopify store like `store.mystore.com` [Shopify documentation](https://help.shopify.com/en/manual/domains/add-a-domain) # Headless App (/docs/getting-started/publish/headless-app) To expedite your initial setup, the Smootify Shopify App automatically generates a development storefront token upon installation. This allows you to quickly preview and begin building your Webflow-powered Shopify store without further configuration. While the automatically generated token facilitates rapid development, it's crucial to understand its limitations. **Before launching your store to the public**, you **MUST** generate a new storefront token using the official Shopify Headless sales channel. **Why is this necessary?** * **Order Confirmation Notifications:** The development token does not support the transmission of order confirmation notifications. Generating a token through the Shopify Headless sales channel is essential for enabling these crucial customer communications. * **Sale channel Attribution:** The devolpment token doesn't allow to create a Sale channel name. In the case you have a multi-channel store (like Facebook, Instagram, Shop, etc) it's fundamental to be able to discern the sales you will receive from the Webflow site, and that can be done only by creating a token with the Headless App. The name you will use to create the Token will be the Sale channel name you will see in the orders dashboard. ## Install the Headless App [#install-the-headless-app] 1. Don't forget to install the [Shopify Headless App](https://apps.shopify.com/headless) on the same store to enable order confirmation email, customer accounts and other functionalities. Smootify Docs

2. Once installed, click the **Create Storefront** button. Smootify Docs

3. Then click on the **Manage Storefront API** button. Smootify Docs

4. Click on edit and enable all the Storefront API permissions. Then click to Save changes. Smootify Docs

5. Copy the public token and jump back to the Smootify dashboard. Smootify Docs

6. Go to **Site settings** into your dashboard and click on **Edit Info** button. Replace this new token with the existing one and click on **Save Info**. Smootify Docs

# Project hand off (/docs/getting-started/publish/project-hand-off) If you've built a Shopify store integrated with Webflow and Smootify for a client, transferring ownership involves a few straightforward steps across each platform. Here's a breakdown of the process: **This guide covers the necessary actions within:** * **Shopify:** For store ownership and billing transfer. * **Webflow:** For website project transfer. * **Smootify:** To ensure a smooth transition of the app's functionalities. Follow the platform-specific instructions below to seamlessly hand over the completed store to your client. ## Shopify [#shopify] Skip these steps below if you didn't create the store with a Shopify partner account ### Access the Partner Dashboard [#access-the-partner-dashboard] Log in to your [Shopify Partner Dashboard](https://shopify.com/partners) Find the development store you want to transfer and click on "Log in" ### Transfer Ownership [#transfer-ownership] * Within the Shopify admin, go to "Settings" then "Users and permissions." * In the "Store owner" section click "Transfer ownership". * Fill in the new store owner's information and select "Transfer store ownership." ### Confirmation [#confirmation] The client will receive an email with instructions to accept the transfer and will be asked to choose a plan for Shopify. The transfer process is **irreversible**. Once the transfer is complete, it cannot be reversed, and if the customer doesn't accept the transfer and buy a plan the store will be definetely **lost**, you will not be able to re-gain access to it. ## Webflow [#webflow] Skip these steps if you created the project on the client Workspace/Account. ### Transfer the site [#transfer-the-site] To [transfer your site](https://help.webflow.com/hc/en-us/articles/33961238786963-Transfer-a-site#what-happens-when-you-transfer-a-site), open your Site settings and click the "transfer" icon, you will need to add your customer Webflow email. You must transfer the original project of Webflow and not a duplicate of it. Smootify is connected to the specific Webflow project you created. If you transfer a duplicate, you will need to re-create the whole integration from scratch, by deleting your Smootify project and re-installing it. ### Add a Site plan [#add-a-site-plan] Kindly ask your customer to [add a Site plan](https://university.webflow.com/lesson/manage-site-plans#upgrade-a-site-plan) to the transferred site ### Add your custom domain [#add-your-custom-domain] Kindly ask your customer to [add the custom domain](https://help.webflow.com/hc/en-us/articles/33961334343827) to the transferred site and publish ## Smootify [#smootify] ### Account Creation [#account-creation] Kindly ask your customer to register an account on the [Smootify Dashboard](https://dashboard.smootify.io) ### Open the dashboard [#open-the-dashboard] Open the Smootify Dashboard, select the site and press on the Share button to share the site with your Customer account. ### Plan [#plan] Kindly ask your customer to get a paid plan from the site dashboard, the subscription will be directly purchased on Shopify ### Site Settings [#site-settings] Double check you added the proper domain on the Smootify dashboard otherwise Smootify scripts will not be allowed to execute on your live site ### Re-connect the Webflow site [#re-connect-the-webflow-site] When you transfer Webflow projects between accounts, Webflow automatically deletes all the API tokens that are necessary to interact with the Webflow CMS. You must [re-connect the site](https://dashboard.smootify.io/new) in order to generate a new proper token. Don't worry you will not lose your plan of Smootify, only the Webflow token will be regenerated. # Shopify Redirect Theme (/docs/getting-started/publish/shopify-theme) If you don't want to use at all the Online Store channel on your Shopify store, you should install our [Redirect theme](https://deliverables.smootify.io/Smootify%20-%20Redirect%20theme-1.0.0.zip). Our redirect theme is basically a mix of the official [Hydrogen Redirect theme](https://github.com/Shopify/hydrogen-redirect-theme) and [Dawn theme](https://github.com/Shopify/dawn). This particular theme will redirect all the pages of the Online Store to the Webflow site, but the Cart page. This is usefull when you must use an app embed that works only on the Online Store on the cart page, like pickup apps! More over, our theme has 2 additional settings that you can customize `products_base` and `collections_base`. This allow you to correctly redirect collection and product pages according to the collection slugs you used in Webflow, without needing additional 301 redirects! When launching an headless storefront, you’ll likely also want to redirect any traffic that happens to hit your Liquid store too. This theme allows you helps you do that while also making sure you retain features like the bot detection checkpoint, and discount links. ## Setup [#setup] ### Download the theme [#download-the-theme] Download our [Redirect theme](https://deliverables.smootify.io/Smootify%20-%20Redirect%20theme-1.0.0.zip) ### Install the theme [#install-the-theme] Navigate to **Online Store -> Themes** in your Shopify admin and upload the file you just downloaded! ### Configure the theme [#configure-the-theme] From **Online Store -> Themes** press on the **Customize** button. Navigate to **Theme settings -> Storefront** and configure the options: 1. `storefront_hostname`, the value should be the domain you attached to your Webflow project (e.g: `www.yourdomain.com`), add the domain properly with www to avoid a double redirect! 2. `products_base`, the value should be the slug of your **Product** CMS collection that you created in Webflow, (e.g: `product`); 3. `collections_base`, the value should be the slug of your **Collection** CMS collection that you created in Webflow, (e.g: `collection`); ### Publish [#publish] Just publish the theme and all the traffic from Online Store will be redirected to headless! # Connect your project (/docs/getting-started/quick-start/connect-webflow-project) ### Starting from Shopify [#starting-from-shopify] The fastest and easiest way to set up Smootify is to start with the Shopify app available on the [Shopify App store](https://apps.shopify.com/smootify). #### Install the Shopify App [#install-the-shopify-app] 1. Click on the Install button and select the Shopify store where you want to install the Smootify App. Smootify Docs

2. Once installed, launch the **Smootify** app from your Shopify admin panel. Smootify Docs

3. You'll be redirect to the Smootify dashboard. Login or create an account if you haven't already. Smootify Docs

#### Connect to Webflow [#connect-to-webflow] 1. Once logged in you need to connect your Shopify store to Webflow. Click the **Connect your Webflow site** button and connect the Webflow project you want to use with Shopify. Smootify Docs

2. If you're starting a new project from scratch, we highly recommend beginning with our new [Starter Project v2](https://www.smootify.io/templates/smootify-starter-project). Smootify Docs

The Smootify Starter Project comes with a comprehensive style guide featuring pre-built classes, plus: 1. **Smootify Scripts Included**: Seamlessly integrated into the global custom code section. 2. **Shopify-Ready CMS**: All the Webflow CMS collections feature pre-configured fields, primed for easy synchronization with your Shopify store. 3. **Ready Pages:** The starter project includes pre-built common pages—such as the cart page, search page, and product page—with their respective components already integrated and configured. 4. **Component Library**: A complete suite of components, logically organized by page function. 5. **CSS Variables**: Handy variables provided for styling key elements like the skeleton loader and the Cookie Consent Bar. Once complete, you will be redirected to the Site Settings panel. Here, you'll find the Shopify Store URL and Public Token already populated. You only need to add your **project domain**. You can use your staging domain (webflow\.io) initially and then replace it with your **custom domain** when ready. Smootify Docs

3. If you haven't used our **Starter Project** or the **Smootify - Relume Starter Project**, which already include the Smootify Script, please follow this additional step: Navigate to the **Smootify Scripts** panel and copy and paste our provided script into the Webflow project settings > Custom Code > Head code section.

### Starting from Webflow [#starting-from-webflow] A viable alternative is to begin with the official Webflow application. #### Install the Webflow App [#install-the-webflow-app] From the [Webflow Marketplace](https://webflow.com/apps/detail/smootify) Smootify Docs

From the Webflow Designer Smootify Docs

Once launched, you'll see a message prompting you to login or signup to Smootify. Click the "Open Dashboard" button to access the Smootify Dashboard. Smootify Docs

If you go to the newly added site settings, you'll see that the Shopify Store URL and Shopify Public Token are empty. To connect Shopify, simply install our Shopify App from the Shopify App Store and follow the instructions below. Smootify Docs

#### Install the Shopify App [#install-the-shopify-app-1] 1. Click on the Install button and select the Shopify store where you want to install the Smootify App. Smootify Docs

2. Once installed, launch the **Smootify** app from your Shopify admin panel. Smootify Docs

#### Connect to Webflow [#connect-to-webflow-1] 1. You'll be redirect to the Smootify dashboard. Click the **Connect your Webflow site** button and connect the Webflow project you want to use with Shopify. Smootify Docs

2. If you're starting a new project from scratch, we highly recommend beginning with our new [Starter Project v2](https://www.smootify.io/templates/smootify-starter-project). Smootify Docs

The Smootify Starter Project comes with a comprehensive style guide featuring pre-built classes, plus: 1. **Smootify Scripts Included**: Seamlessly integrated into the global custom code section. 2. **Shopify-Ready CMS**: All the Webflow CMS collections feature pre-configured fields, primed for easy synchronization with your Shopify store. 3. **Ready Pages:** The starter project includes pre-built common pages—such as the cart page, search page, and product page—with their respective components already integrated and configured. 4. **Component Library**: A complete suite of components, logically organized by page function. 5. **CSS Variables**: Handy variables provided for styling key elements like the skeleton loader and the Cookie Consent Bar. 6. Once complete, you will be redirected to the Site Settings panel. Here, you'll find the Shopify Store URL and Public Token already populated. You only need to add your **project domain**. You can use your staging domain (webflow\.io) initially and then replace it with your **custom domain** when ready. Smootify Docs

4. If you haven't used our **Starter Project** or the **Smootify - Relume Starter Project**, which already include the Smootify Script, please follow this additional step: Navigate to the **Smootify Scripts** panel and copy and paste our provided script into the Webflow project settings > Custom Code > Head code section. Smootify Docs

## Install the Headless App [#install-the-headless-app] Whether you started from the Shopify app or the Webflow app, be sure to install and properly configure the Shopify Headless app to enable order confirmation emails, customer accounts, and other essential features.