more organizational edits, snippets

Author: devalog

fern/products/docs/pages/navigation/products.mdx

@@ -1,5 +1,5 @@
 ---
-title: Product Switching
+title: Product switching
 subtitle: Allow users to seamlessly navigate between different products you offer. 
 ---
 
@@ -24,7 +24,7 @@ subtitle: Allow users to seamlessly navigate between different products you offe
 
 Each product can contain its own distinct versions, tabs, sections, pages, and API references. Products can share content as well. 
 
-## Add Products to Your Docs
+## Add products to your docs
 
 <Steps toc={true}>
 <Step title="Define your products">
@@ -104,7 +104,7 @@ products:
     subtitle: Product A subtitle # optional
 
   - display-name: Product B
-    path: ./products/product-b/latest.yml # <-- default showing latest
+    path: ./products/product-b/versions/latest/latest.yml # <-- default showing latest
     image: ./images/product-b.png # optional
     slug: product-b # optional
     subtitle: Product B subtitle # optional
@@ -119,7 +119,9 @@ If your `docs.yml` file includes a `navigation` field or a `tabs` field, be sure
 
 ### Add versioning to your products (optional)
 
-Once you've defined your products, you can optionally add versions. Versioned and unversioned products can live next to each other in your site. 
+You can optionally add versions to your products. Versioned and unversioned products can live next to each other in your site. 
+
+<Note>For standalone versioning without products, see our [Versioning guide](/docs/configuration/versions).</Note>
 
 In the below example, Product A is **unversioned** and Product B is **versioned**:
 
@@ -148,6 +150,8 @@ In the below example, Product A is **unversioned** and Product B is **versioned*
 
 <Steps>
 <Step title="Define your versions">
+Create a `versions` folder inside of folder of the product you want to version. 
+
 Each version of a single product has its own `yml` file. To specify the contents of each version, add a `.yml` file to the `versions` folder to define the navigational structure of that version. Make sure to include the `navigation` and `tabs` properties, if applicable.
 
 Version-specific `yml` files:
@@ -170,15 +174,15 @@ products:
     slug: product-a # optional
     subtitle: Product A subtitle # optional
   - display-name: Product B # versioned
-    path: ./products/product-b/latest.yml # <-- default showing latest
+    path: ./products/product-b/versions/latest/latest.yml # <-- default showing latest
     image: ./images/product-b.png # optional
     slug: product-b # optional
     subtitle: Product B subtitle # optional
     versions: 
       - display-name: Latest
-        path: ./products/product-b/latest.yml # relative path to the version file
+        path: ./products/product-b/versions/latest/latest.yml # relative path to the version file
       - display-name: V2
-        path: ./products/product-b/v2.yml # relative path to the version file
+        path: ./products/product-b/versions/v2/v2.yml # relative path to the version file
 ```
 </CodeBlock>
 
@@ -191,21 +195,22 @@ products:
 ```yaml {4}
 versions: 
   - display-name: Latest          
-    path: ./products/product-b/latest.yml  
+    path: ./products/product-b/versions/latest/latest.yml 
     availability: beta
   - display-name: V2
-    path: ./products/product-b/v2.yml
+    path: ./products/product-b/versions/v2/v2.yml
     availability: stable
 ```
 </CodeBlock>
 </Step>
-<Step title="Remove extra navigation from docs.yml">
-If your `docs.yml` file includes a `navigation` field or a `tabs` field, be sure to remove. Those fields should now belong in the version-specific `.yml` files. 
+<Step title="Remove extra navigation">
+
+If your product-specific `.yml` files for **versioned products** includes a `navigation` field or a `tabs` field, be sure to remove. Those fields should now belong in the version-specific `.yml` files. 
 </Step>
 </Steps>
 
 
-## Customizing Selector Styling
+## Customize selector styling
 
 You can directly customize the appearance of the product and version selectors by targeting their CSS classes:
 
@@ -216,13 +221,9 @@ You can directly customize the appearance of the product and version selectors b
   <img src="webflow-dropdown-selector.avif" alt="Example of a styled product selector" />
 </Frame>
 
-### Common Styling Adjustments
-
-**Adjusting positioning:**
-Use `transform: translateY(Npx)` to adjust the vertical positioning of the selectors. This ensures that the product and version selectors match the line height of your logo for better visual alignment.
+### Common styling adjustments
 
-**Enhancing visual prominence:**
-You can modify the border radius and add borders to make the selectors more prominent and better integrated with your site's design aesthetic.
+<Markdown src="/snippets/common-selector-styling.mdx" />
 
 ```css
 .fern-product-selector {
@@ -238,7 +239,7 @@ You can modify the border radius and add borders to make the selectors more prom
 }
 ```
 
-## Customizing Dropdown Styling
+### Customize dropdown styling
 
 The dropdown menus for product and version selectors can be customized using these specific CSS classes:
 

fern/products/docs/pages/navigation/versions.mdx

@@ -9,7 +9,7 @@ subtitle: Allow users to navigate between different versions of your docs.
 
 Each version of your docs can contain its own distinct tabs, sections, pages, and API references. Versions can share content, as well. 
 
-**To add versions to your docs:**
+## Add versions to your docs
 
 <Steps toc={true}>
 <Step title="Define your versions">
@@ -73,4 +73,28 @@ versions:
 
 If your `docs.yml` file includes a `navigation` field or a `tabs` field, be sure to remove. Those fields should now belong in the version-specific `.yml` files. 
 </Step>
-</Steps>
+</Steps>
+
+## Customize version selector styling
+
+You can directly customize the appearance of the version selector by targeting the `fern-version-selector` CSS class.
+
+### Common styling adjustments
+
+<Markdown src="/snippets/common-selector-styling.mdx" />
+
+```css
+.fern-version-selector {
+  transform: translateY(1px);
+  border-radius: 1000px;
+  border: 1px solid var(--border);
+}
+```
+
+### Customize the dropdown
+
+The dropdown menu for the version selector can be customized using the `fern-version-selector-radio-group` CSS class.
+
+  <Frame>
+    <img src="webflow-version-selector.avif" alt="Example of a styled version selector" />
+  </Frame>

fern/snippets/common-selector-styling.mdx

@@ -0,0 +1,5 @@
+**Adjusting positioning:**
+Use `transform: translateY(Npx)` to adjust the vertical positioning of the selectors. This ensures that the selectors match the line height of your logo for better visual alignment.
+
+**Enhancing visual prominence:**
+You can modify the border radius and add borders to make the selectors more prominent and better integrated with your site's design aesthetic.

fern/snippets/version-specific-yml-files.mdx

@@ -1,5 +1,5 @@
 <CodeBlocks>
-<CodeBlock title="versions/latest.yml">
+<CodeBlock title="latest.yml">
 ```yaml
 navigation: 
   - section: Introduction
@@ -11,7 +11,7 @@ navigation:
   - api: API Reference
 ```
 </CodeBlock>
-<CodeBlock title="versions/v2.yml">
+<CodeBlock title="v2.yml">
 ```yaml
 tabs: 
   api: