Siren Retail - Starbucks Reserve

Website Owner's Manual

Welcome to the Owner's Manual page of your new Webflow site. This guide is designed to empower you with the knowledge and skills to take full control of your website. Whether you're a seasoned pro or just getting started with website management, you'll find valuable information here on how to use Webflow, how to edit your content, and how to keep your site running smoothly.

Last Updated: 02/20/2024

General Webflow Training

Webflow has an extremely robust training system built into their platform called Webflow University. We encourage you to explore any videos and documentation here that may be useful to you as you continue to manage your site. We'll include any relevant videos and links on this page to help guide you as well.

Managing Site Access

In Webflow, there is Workspace level access and site specific content editor access. If someone is added as a member of your workspace they will be able to design, edit, and publish any website in your workspace. If someone is added to a specific site as a Content Editor, they will only be able to manage content on the site through the Editor and publish those changes (if they have been given permission). Watch the video below to understand workspaces, roles, and permissions in Webflow.

For further written documentation on workspaces:

Designer vs. Editor

The Webflow Designer is a powerful tool for building websites, whereas the Webflow Editor is a simplified interface that’s focused on editing website content. The Editor is what will allow your team to easily make changes to your websites content, including text, images, collection data, and some SEO settings.

The Designer is generally only used by site owners/admins and any developers building the site. Once the site is built, any content editors will just use the Editor to make updates.

Introduction to the Designer

Although use of the Designer should be fairly restricted once your site is launched, as a site owner it may still be useful to have a working knowledge of the interface and where everything lives. Below is a video that should help you get the basics down in the case that you need to use it for anything.

Important! Please don't make changes in the designer unless you feel confident using the software. Updating styling can have unintended affects and we want to avoid a broken website!

Note: This video features an old User Interface. Some things may look different in the Designer than in this video. Webflow is working on a new video and will hopefully have an updated version soon!

For further written documentation on the Designer:

Introduction to the Editor

The Editor will be your main tool while maintaining your sites content. Below is a video that gives a great introduction to the Editor interface.

Note: This video features an old User Interface. Some things may look different in the Editor than in this video. Webflow is working on a new video and will hopefully have an updated version soon!

For further written documentation on the Editor:

Additional Information

Publishing

By default, your website will have a staging domain (yourwebsite.webflow.io) and a production domain (yourwebsite.com). Generally, all changes made to the site should be published to staging first so that content/design can be reviewed prior to publishing to the production (live) domain. When publishing, some caution must be taken as all changes in the editor and designer will be pushed to the selected domains. For example, if someone in the editor makes a content change and hits publish, any potentially unfinished/untested changes made in the designer would be published as well. This is especially important in larger teams who may have multiple people editing the site at a time. Be sure that you are communicating when changes are being published to the live/production domain in order to avoid accidentally publishing unfinished/untested changes.

Important! Any publishing that is done from the Editor will be published to the live site! To publish to staging only, you must do so from the Designer or Site Settings.

Compressing Images

While image uploads have a max file size of 4MB and documents (PDF, etc) have a max file size of 10MB, these are very high limits and all files/images should be reduced when possible before being uploaded to your site. This will help your site load faster, especially on poor internet connections and mobile devices. Webflow does compress images you add to the site, but adding already compressed images helps achieve even smaller file sizes to be served up to your viewers. There are a variety of different web-based image and file compression applications available such as Optimizilla and TinyPNG for images or PDF Compressor for PDFs.

Tip: Webflow supports the WEBP filetype. This is generally going to be the best filetype to reduce file size and load times. However PNG, JPG, and GIF are also supported and may be required in some cases.

Editing Rich Text Fields

If you are using a rich text field to add content to your site, it is important to know how Webflow's rich text editor functions. This is most commonly used for long form content like blog posts or case studies, but can sporadically be used outside of that use case as well. Learn more about how to use the editor at Webflow University:

SEO

Image alt tags

Alt text for images is a crucial step in the design and development process of a website. Not only can you ensure your website is made more accessible to people who are blind or have a visual impairment, good alt text also helps improve your site’s search optimization.

Meta titles and descriptions

Meta titles and descriptions are HTML elements that provide information about a webpage to search engines and users. The meta title is a concise and accurate description of the webpage's content and appears at the top of the browser's window or in search engine results as the clickable headline. The meta description, on the other hand, is a brief summary of the webpage's content and appears below the meta title in search engine results. Meta titles and descriptions are important for SEO because they help search engines understand the page's content and context, and they influence user behavior by providing a preview of what the page offers. Writing compelling and relevant meta titles and descriptions can improve click-through rates and drive more organic traffic to a website.

The best way to change a page's meta data is through the Editor. You can refer to the Intro to the Editor video towards the beginning of this manual for visual instructions. Or, you can follow these steps:

  1. Select the page you want to edit from the Pages panel on the left side of the Editor.
  2. Click on the Page Settings icon (gear icon) in the top bar.
  3. In the Page Settings panel that appears, scroll down to the SEO settings section.
  4. Here, you can edit the meta title and description by typing in the text fields provided.
  5. To ensure your meta title and description are optimized, make sure they are concise, accurate, and contain relevant keywords that accurately reflect the content of your page.
  6. Once you've made your changes, click the "Save" button to apply the changes to your page.
  7. Don't forget to republish your site to ensure the changes are live and visible to search engines and users.

301 Redirects

301 redirects are useful if you need to permanently route traffic from an old path to a new URL.

Project Specific Information

CMS & Collections

Collections power all of the dynamic content on your site. We've built out a custom Content Management System (CMS) for you to easily manage and update all of the content on your site. To give you a better understanding of what data these collections hold, where that data is displayed on the website, and how to manage them moving forward, please refer to the recording of our CMS training and any additional information below.

Categories and Subcategories

To order subcategories within a parent category, you will just need to add subcategories to the "Related Subcategories" field in the Categories collection in the order that you wish for them to appear on the page.

In this example, the subcategories would appear as Coffees > Brewed & Espresso > Coffee Flights > Cold Brew

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.