Can I automatically change the color of a Webflow template to match the colors of my app without manually updating each element? Also, how can I remove "www" from my website's URL? Lastly, is it possible to change the color of the small circles on the home page of my Webflow website?

You're looking to automatically update your template colors, force non-www URLs, and change specific UI elements (small circles). Here’s how to effectively achieve each:

​

---

​

1. Automatically Change Template Colors in Webflow

​

• Webflow does not currently support automatic global color updates via user input or external app data.
• However, you can streamline updates by using Global Color Swatches:
• Go to the Style panel, select an element with the current color.
• When picking the color, click Create Swatch.
• Once a color becomes a swatch, updating that swatch will automatically update all elements using it.
• To quickly remap template-wide colors:
• Find the primary style guide page (if included), which contains all styled components.
• Update swatches assigned there to reflect your app’s color palette.

​

Note: There's no dynamic sync with your app unless you use APIs and custom code.

​

---

​

2. Remove "www" from Your Website URL

​

To force redirection from www.yoursite.com to yoursite.com, follow these steps:

​

• Go to Project Settings > Hosting in Webflow.
• Under Custom Domains, identify both your domain versions:
• Example: www.example.com and example.com.
• Click the "Make Default" button next to example.com (non-www version).
• Webflow will automatically set up redirects so all traffic to www moves to the non-www version.

​

Important: Ensure your DNS settings include the following:

• A Records pointing to Webflow's IPs: (a) 75.2.70.75, (b) 99.83.190.102
• CNAME for www pointing to proxy-ssl.webflow.com, even if non-www is default.

​

---

​

3. Change the Color of Small Circles on Your Homepage

​

Assuming the "small circles" are styled div elements, icons, or pseudo-elements (like dots in a slider or background), follow these steps:

​

• Identify the class of the small circles by selecting one in Webflow Designer.
• In the Style panel, scroll to the Background Color, Border, or Fill section depending on the element type.
• Update the color manually or assign a global swatch if you want future changes to be easier.
• If these elements are part of a component or symbol, updating the style will reflect across all instances.

​

If they're created via custom code or plugin (e.g., Swiper or Slick), you may need to:

• Access the Embed code, locate the circle element via class or ID.
• Use custom CSS via Page Settings > Custom Code or Site Settings > Custom Code to override their color.

​

---

​

Summary

​

To align a Webflow template with your app colors, use Global Swatches for efficient updates, though there's no automated sync. To use your domain without "www", set the non-www version as default in Hosting settings. Finally, to change colors of home page circles, identify their class and update color in the Style panel or override with CSS if needed.