Video transcription
Once you've finished customizing your new Webflow project, the final step is to go live. To do this, you'll need to associate your custom domain with your Webflow project.
To use Smootify you need a CMS Plan at least for your Webflow project.Once activated, you can associate your custom domain to the new Webflow project.Don't forget to replace your custom domain with the staging domain previously added during the project creation in the Smootify Dashboard, in the project settings section, by clicking the edit info button.Once you've replaced the Webflow domain, you'll need to add the new domain to your Shopify panel as well. Before you can add it, you'll need to associate at least a Basic plan with your store.Once you've activated the Basic plan, you'll need to add the custom domain to Shopify too.
In your Shopify admin, go to Settings > Domains. Then, click "Connect existing domain.
Remember, you cannot add the primary domain to Shopify as well (the same one already added in Webflow), but you'll need to create a subdomain like shop.mywebsite.com or the one you want, to avoid conflicts.Once added, simply follow Shopify's instructions for creating the correct DNS records to add to your new subdomain through your registrar and verify them in Shopify.After configuring the domains correctly, the last step is to set up the checkout redirects for your store.By default, Shopify comes with an included theme. This theme creates a conflict with the connection between our Webflow site and the Shopify checkout because all links within the checkout point to the default Shopify theme and not to our Webflow site.
For this reason, we need to replacethe Shopify default theme with a free Shopify theme called "Hydrogen" designed for headless environments. It redirects users to your Webflow site and allows basic checkout customization.
To download this Free Theme, access the Smootify documentation and navigate to the "Shopify Panel" > "Theme and Domain" section. Download the Hydrogen theme from the provided link.
- Go to your Shopify admin and navigate to "Online Store" > "Themes."
- Click "Add Theme" and upload the downloaded Hydrogen theme file.
- Publish the theme.
This theme focuses on redirection and basic checkout customization. Access the theme settings to:
- Add custom CSS.
- Modify checkout colors and backgrounds.
- Add logos through the "Checkout" section.
Under "Storefront," enter your Webflow domain name without the slash and "https".
To check if everything is working, simply refresh your Webflow site.Initiate checkout again. You should now be redirected to your Webflow site upon checkout completion. Clicking the navigation should also direct you to the correct Webflow page.