Storefront Development

Storefront Development
Dynamic Content
Dynamic Content is a FastStore feature that allows you to customize your store home and landing pages using server-side data fetching. This feature improves performance and SEO by dynamically displaying fetched data in store sections on these pages.
In the following example, a page slug, /my-landing-page, is configured in the store code and included in the Headless CMS. The landing page features two Hero sections: a native one displaying an image added from the Headless CMS, and a custom one with a fixed image sourced directly from an API defined in the store code.
{"base64":"  ","img":{"width":1892,"height":962,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":4552456,"url":""}}
For other types of pages, such as collections (PLPs) and product pages (PDPs), server-side data fetching is already available via API Extensions. Refer to the API Extension documentation for more details on fetching data for these pages.

Before you begin

Update the @faststore/core package

Ensure your store uses @faststore/core v3.0.55 or greater. Follow the steps below to update the package:
  1. Update your store’s @faststore/core package to the latest version by running the following command:

yarn add @faststore/core@latest

  1. Run yarn dev to sync the changes to your project.

Understand Section Override

To work with dynamic content, you need knowledge of Section Override.

Implementing Dynamic Content

To use the Dynamic Content feature in your home and landing pages, follow these steps:
Photo of the contributor
+ 1 contributors
Was this helpful?
Suggest edits (Github)
Photo of the contributor
+ 1 contributors
On this page