Dynamic pages in Wix are a powerful way to create a flexible, scalable website that automatically pulls information from a database and displays it on your site. This is perfect for businesses like skin clinics, where you may have multiple treatments to showcase, but want to avoid creating individual static pages for each one.
By using Wix’s dynamic pages and databases, you can create a single template that automatically fills in the details of each treatment. Let’s go through how you can do this for your template, using our skin clinic as an example, step by step.
Content:
Using a Template With Dynamic Pages
This guide will walk you through managing and updating your dynamic pages using the Wix Content Manager (CMS). With the dynamic pages already designed, all you need to do is add and update content through the Wix CMS, making it easy to manage multiple treatments, services, or products efficiently.
In this example, we’ll use a skin clinic as the case study, where treatments are displayed on dynamic pages, but the same principles apply to any other type of business.
What Are Dynamic Pages and How Do They Work in Your Template?
Dynamic pages in Wix allow you to create a single design template that pulls content from a data collection (or database) in the Wix CMS. Instead of manually editing each page, dynamic pages display information (like treatment names, descriptions, and images) based on the content entered into the CMS.
For example, a skin clinic may offer treatments like facials, laser therapy, and Botox. Instead of creating a separate static page for each treatment, you can create a single dynamic page template that populates the content based on your data collection.
The beauty of a dynamic page template is that you cannot directly edit the content on the page in the Wix Editor. Instead, all the content (such as treatment names, prices, descriptions, and images) is controlled through the Wix CMS.
Step 1: Access the Wix CMS (Content Manager)
After purchasing and installing the template, your next step is to access the Wix CMS, where you'll manage the content for your dynamic pages.
CMS > Treatments > List
Go to the Wix Editor and click on “Content Manager” (located in the left toolbar).
In the Content Manager, you will see the collections already set up for your template. If this is a skin clinic template, you’ll see a collection named something like “Treatments” or “Services”.
Click on the “Treatments” collection to open it. Here is where you’ll add, edit, and manage the data that populates your dynamic pages.
Step 2: Understanding the Fields in Your Data Collection
The data collection (database) in the Wix CMS stores all the information that will be displayed on your dynamic pages. Let’s break down some of the common fields you’ll see in the
Treatments collection:
Treatment Name: This field is the name of the treatment and also the URL Slug (e.g., “Botox” or “Hydrafacial”).
Description: A longer description explaining the treatment and its benefits.
Price: The cost of the treatment.
Duration: How long the treatment takes (e.g., “45 minutes”).
Image: An image representing the treatment (you’ll upload the images here).
Alt Text: This helps blind people understand your content and it's important to include a brief description of your photo for screen readers.
Category (optional): Allows you to categorize treatments (e.g., “Facials,” “Laser Treatments”).
Slug/URL: Automatically generated based on the treatment name. This forms the dynamic URL (e.g., yourwebsite.com/treatments/botox).
These fields are already set up and connected to your dynamic page template, so all you need to do is fill in the data. Any changes or additions you make here will automatically reflect on the live website.
Step 3: Adding New Treatments or Services
Let’s go over how to add a new treatment to your dynamic page:
Open the “Treatments” Collection in the Content Manager.
Click “+ New” at the top right of the collection to add a new entry.
Fill in the Fields:
Treatment Name: Enter the name of the treatment.
Description: Provide a detailed description of the treatment.
Price: Enter the price of the treatment.
Duration: Add the time the treatment will take.
Image: Upload an image that represents the treatment.
Category: Choose the treatment category (if applicable).
Slug/URL: Wix will automatically generate this based on the treatment name, but you can customize it if necessary.
Save the Entry. Once saved, this new treatment will automatically populate the dynamic treatment page on your website, without you needing to edit the design.
Step 4: Editing Existing Treatments or Services
If you need to update any information for treatment (like changing the price or description), you’ll do this directly in the CMS, not on the dynamic page itself.
Go to the Content Manager and open the “Treatments” collection.
Find the treatment you want to edit. You can use the search bar or scroll through the list to find it.
Click on the entry to open it, make your changes, and then click “Save”.
All changes will be automatically updated on the dynamic treatment page connected to this entry. There's no need to manually edit the dynamic page itself, which makes the process much more efficient.
Step 5: How Dynamic Pages Work with URLs
Each dynamic page is assigned a unique URL based on the content you entered in the Slug/URL field in your CMS collection. This means that every treatment or service has its own unique page without you having to create multiple pages manually.
For example:
Botox Treatment Page: yourwebsite.com/treatments/botox
Hydrafacial Treatment Page: yourwebsite.com/treatments/hydrafacial
These URLs are automatically generated from the treatment names in your data collection, and they update dynamically if you change the slug field. This means you can make as many treatments as you like and manage all from the content page.
Step 6: Managing the Dynamic List Page
The dynamic list page (for example, a “Treatments” or “Services” page) displays all your treatments in a repeater layout on the live site. This page automatically pulls in content from your CMS and lists each treatment dynamically.
To manage how treatments appear on the list page:
Ensure the Collection is Updated: The list page will automatically update based on the entries in the “Treatments” collection.
Filter or Sort Treatments: You can sort treatments by category (e.g., facials, laser treatments) by adding categories to the collection. You can also change the order they are displayed in the list by adjusting sorting or filtering options in the Collection Settings.
Step 9: Testing Your Dynamic Pages
Once you’ve added or edited content in the CMS, it’s a good idea to preview and test how the dynamic pages are working.
Preview Your Site: Click “Preview” in the Wix Editor to see the dynamic list page and individual treatment pages in action.
Check the Dynamic URLs: Ensure that each treatment has its own unique URL and that the content (treatment name, description, price, etc.) displays correctly on the dynamic page.
Test Search and Filters: If your template includes search or filtering options, test them to make sure they are working properly with the content in your collection.
Final Notes: Things You Can't Edit on Dynamic Pages
Keep in mind that you cannot directly edit the content (text, images, etc.) on dynamic pages through the Wix Editor. Dynamic pages pull all their content from the CMS (Content Manager). Any edits to content must be made through the CMS by updating the fields in your data collection. If you want to change the design (layout, fonts, colours) of the dynamic page template itself, you can do that in the Wix Editor, but the content comes strictly from the CMS.
Conclusion: Easy Management with Wix CMS
Dynamic pages make it incredibly easy to manage and scale your skin clinic’s website, especially when you have a large number of treatments or services. By using the Wix CMS, you can quickly add, edit, or remove treatments without needing to touch the design or manually edit each page. Everything updates automatically on your live site, saving you time and keeping your content consistent.
Creating Your Own Dynamic Pages (Advanced)
Step 1: Create Your Data Collection (Database)
Before creating dynamic pages, you need to create a data collection to store your content.
Go to the Wix Editor.
Click on “Content Manager” (formerly known as “Database”).
Click “+ New Collection” to create a new collection for your skin treatments. Name it something like “Treatments”.
Set the collection permissions based on who can view or modify the content. Usually, you'll want to set it to “Anyone” can view, but only “Admin” can modify it.
Click “Create” to set up the collection.
Setting Up Fields
Once your collection is created, it’s time to add fields for the different pieces of content that will populate your dynamic pages. Here are some example fields for a skin clinic’s treatments:
Treatment Name (Text)
Description (Rich Text or Long Text)
Price (Number)
Treatment Duration (Text or Number)
Image (Image)
Category (Optional for filtering, like “Facial,” “Laser Treatment,” etc.)
Slug/URL (Text) – This will be the unique URL for each dynamic page.
Once you add these fields, you can start adding entries for each treatment directly in the collection.
Step 2: Design the Dynamic Page Template
Now that your data collection is set up, it’s time to design the dynamic page template that will automatically pull in the data for each treatment.
Go to the Pages menu in the Wix Editor and click on the “+ Add Page” button.
From the options, select “Dynamic Pages” and choose to create a new dynamic page.
You'll see an option to connect the page to a collection. Choose the “Treatments” collection that you created earlier.
Designing the Page Layout
Now you can design the layout of your dynamic treatment page.
Add a Text Box for the treatment title. Click on it and then connect it to the Treatment Name field in your database. The text box will now automatically pull the treatment name from the collection.
Add a Rich Text Box for the description and connect it to the Description field from the collection.
Add a Text Box for the price and link it to the Price field. You can customize how this displays, like adding “$” or “USD” before the price.
Add an Image element and connect it to the Image field in the collection.
You can also add other elements like a button to book the treatment or additional text to display details like duration or category.
Step 3: Create a Dynamic List Page
In addition to individual treatment pages, you’ll likely want a list page where visitors can browse all available treatments.
Go to the Pages menu and add a new dynamic page. This time, select “Dynamic List Page”.
Connect this new list page to your Treatments collection.
The list page will automatically generate a repeating layout that pulls in treatment data from your collection.
Customizing the List Page:
Add a Repeater: A repeater is a group of items that repeats the same design with different content. For each treatment, you can display a card with the treatment name, a short description, an image, and a button or link to the individual treatment page.
Link to Dynamic Pages: You can make the treatment names or buttons clickable, so they direct users to the full treatment page. Connect these buttons to the dynamic page URLs from the collection.
Now, when someone clicks on a treatment in the list, they’ll be taken to the corresponding dynamic page with full treatment details.
Step 4: Add Filters and Search to Improve User Experience
Dynamic list pages can include filters and search options to make it easier for visitors to find specific treatments.
Add a Search Bar: Drag a search bar onto your dynamic list page and connect it to the Treatment Name or Category field. This allows users to search for specific treatments (e.g., “Botox” or “Laser”).
Add Filter Buttons: You can add buttons for specific categories, such as “Facials”, “Laser Treatments”, etc., to allow visitors to filter treatments by category. Connect these buttons to the Category field in your database and apply filtering logic.
Step 5: Set Up Dynamic URLs
Dynamic pages are automatically assigned URLs based on the slug field you defined in the database (such as the Treatment Name). You can customize these URLs to make them more user-friendly.
In the dynamic page settings, click “Manage Dynamic Page URLs”.
Adjust the slug to something relevant, such as yourwebsite.com/treatment/{treatment-name}.
Wix will automatically replace {treatment-name} with the data from your Treatment Name field or another custom slug field, making each page URL specific to the treatment.
Step 6: Testing and Previewing Your Dynamic Pages
Once you’ve designed your dynamic pages and set up the content, it’s crucial to preview and test everything to make sure it’s working as expected.
Click on “Preview” in the Wix Editor to see your dynamic list page and dynamic treatment pages in action.
Click through the list of treatments to ensure that each one correctly displays the information from your database (treatment name, description, price, image, etc.).
Test the search and filter features if you’ve added them to ensure they work properly.
Step 7: Finishing Touches and Going Live
Before publishing, here are some finishing touches to ensure your dynamic site is fully polished:
SEO Settings: Customize SEO settings for each dynamic page. You can do this in your data collection by adding SEO title and description fields. Use dynamic keywords like treatment names to optimize each page.
Alt Text for Images: Be sure to add alt text for all treatment images in your data collection, improving both accessibility and SEO.
Mobile Optimization: Preview the dynamic pages on mobile devices to ensure everything looks great and functions properly on smaller screens.
Testing the Contact or Booking Forms: If your dynamic pages include booking or inquiry forms, make sure they are functioning correctly and sending information to the right destination.
Finally, hit “Publish” to make your dynamic pages live!
_edited.jpg)
Kommentare