Template

guide

How to edit template

On this page, you’ll find key details to help with updates - not everything, but the most important things like service filters and other essential settings.

Service filters:

The Services Component in HealthJoy is designed to display all medical departments in a clean, filterable format. It is powered by a custom SupaFields component since Framer does not support native filtering.

This section is fully connected to the CMS, making it easy to manage content without editing the design manually.

Service filters:

This section is fully connected to the CMS, making it easy to manage content without editing the design manually.

1. CMS Connection & Structure

All services are stored in a CMS collection called Services. Each entry includes fields like:

Any content change (title, description, pricing, doctor) should be done directly in the CMS. This ensures updates appear consistently across all pages - desktop, tablet, and mobile views.

1. CMS Connection & Structure

All services are stored in a CMS collection called Services. Each entry includes fields like:

Any content change (title, description, pricing, doctor) should be done directly in the CMS. This ensures updates appear consistently across all pages - desktop, tablet, and mobile views.

Editing Service Cards

If you want to adjust styling or layout, you must open the Service Card component directly in the canvas. Each card includes these variants:

If you want to update the overall design, make changes in the Desktop Primary variant. For spacing or small adjustments on mobile or tablet, only edit within that specific breakpoint.

⚠️ Important: Do not rename the variant breakpoints (Desktop, Tablet, Mobile). The filter logic depends on these exact names to load the correct component on each device.

In the mobile breakpoint, I selected “Mobile: Service Component” to display the mobile variant for services. This will only appear on the live site, not inside Framer, so you’ll need to preview it live to see the effect.

Editing Service Cards

⚠️ Important: Do not rename the variant breakpoints (Desktop, Tablet, Mobile). The filter logic depends on these exact names to load the correct component on each device.

Filter Buttons

The filter buttons are powered by SupaFields and linked to the CMS field Service Name. This means:

Adding a new service to the CMS will automatically create a new filter button.
Renaming a service will also rename the button.

Filter Buttons

The filter buttons are powered by SupaFields and linked to the CMS field Service Name. This means:

Adding a new service to the CMS will automatically create a new filter button.
Renaming a service will also rename the button.

Styling the Collection (Service Wrapper)

The Services Wrapper controls how all cards display

Styling the Collection (Service Wrapper)

The Services Wrapper controls how all cards display

CMS Limits on Homepage

On the homepage, the CMS feed is limited to 4 service items (Check Image).

Pagination → Currently set to show 4 items.
Limit To → Restricts services displayed.

You can remove the limit or enable full pagination if you want to display all services. For best homepage balance, we keep it at 4 and show the rest on the dedicated Services page.

CMS Limits on Homepage

On the homepage, the CMS feed is limited to 4 service items (Check Image).

Pagination → Currently set to show 4 items.
Limit To → Restricts services displayed.

You can remove the limit or enable full pagination if you want to display all services. For best homepage balance, we keep it at 4 and show the rest on the dedicated Services page.

Usage Flow

Add or update services in CMS.
Filter buttons auto-refresh from CMS field Service Name.
Edit layout globally in Primary variant, or breakpoint-specific for mobile/tablet.
Style filter buttons from SupaFields settings.
Control homepage service display count with CMS limit/pagination.
On mobile, select Mobile: Service Component → live preview required, not visible in Framer editor.

Usage Flow

Add or update services in CMS.
Filter buttons auto-refresh from CMS field Service Name.
Edit layout globally in Primary variant, or breakpoint-specific for mobile/tablet.
Style filter buttons from SupaFields settings.
Control homepage service display count with CMS limit/pagination.
On mobile, select Mobile: Service Component → live preview required, not visible in Framer editor.

Ticker points

To edit the ticker problems, double-click on each component, then select the side slide. From there, you can update the text, icons, or swap in new ones as needed.

Ticker points

To edit the ticker problems, double-click on each component, then select the side slide. From there, you can update the text, icons, or swap in new ones as needed.

Editing FAQ's

To edit the FAQ, first open the FAQ component. you’ll see all questions listed as layers. Select each question/layer and update the text as needed - changes will automatically apply across all pages.