📝 Complete Content Panel Guide (Strapi CMS)
This guide teaches you (content managers and editors) how to dynamically build site pages and control the store's visual settings.
1. Understanding Strapi Content Structure
In the left menu under Content Manager, you will see two types of data structures:
Single Types
These are pages that have only one instance across the entire site.
- Homepage: The content of the main site page.
- Storefront Setting: Global settings (colors, header, footer).
Collection Types
These are like database tables that can have infinite items.
- Blog Post: Your magazine articles.
- Section (...): Ready-made content blocks (Legos) to use in pages.
2. Website Settings
To change the overall look of the site, go to Storefront Setting under Single Types.
- Convert to Toman (convertToToman): By turning this on, all prices received from Medusa (which are in Rials) will be displayed in Tomans by dropping one zero.
- RTL (isRtl): Controls the site direction for right-to-left languages like Persian.
- Modular Settings (Dynamic Zones): In the
modulessection, click the+ Add a component to modulesbutton to add and change settings for different sections likeHeader Settings,Footer Settings, orTheme Settings.
3. Translating Product Variants (Dictionary Entries)
When you define product variants (like Color or Size) in the Medusa panel, you must use the Strapi Dictionary section to display these words in Persian or other languages in the store.
🌐 How to define a new translation
- From the left menu under Collection Types, click on Dictionary Entries.
- Click the Create new entry button.
- In the Key field, write the exact word coming from Medusa (e.g.
ColororRed). Note that this is case-sensitive. - In the Translations section, click the add button.
- Select the language (e.g.
defaultorfa-IR) and write its translation in the Value field (e.g.رنگorقرمز). - Finally, Save and Publish the changes. After this, the frontend system will automatically translate the word
Colortoرنگwherever it receives it from Medusa products.
4. Building and Editing Homepage with Dynamic Zones
The homepage is not hard-coded; instead, you can stack different blocks like puzzle pieces. To add a new block, follow these steps in order:
1First, create the block content in Collection Types
Before adding a block to the homepage, you must first create its content in the Collection Types section. Each block is related to a Section from which data is read:
- To display products: Create an Hp Section Showcase.
- For a hero section: Create an Hp Section Hero.
- For features or testimonials: Create an Hp Section Feature.
- For articles: Create an Hp Section Blog.
- For categories: Create an Hp Section Category Collection.
Specify the desired settings, then hit Save and Publish.
2Add the block to the Homepage Dynamic Zone
- From the left menu, open Single Types and click on Homepage.
- Scroll down to the blocks (Dynamic Zone) field.
- Click the "+ Add a component" button and select the desired block type.
- In the Relation field inside the block, search and select the Section you created in step 1.
- You can change the block display order using Drag & Drop.
3Save and Preview
- Click the Save button to save changes as Draft.
- Use the Open Live Preview button to see the final look before publishing.
- If the result is approved, proceed to the next step, otherwise modify the settings.
4Publish
- Click the Publish button at the top of the page.
- Strapi automatically sends a Webhook to the frontend and clears the homepage cache.
- Within a few seconds, the new block is displayed on the live site.
Pro Tip
5. Block Organization (adminDisplayTitle)
Better item management in Strapi (adminDisplayTitle field)
For easier management of blocks in crowded Dynamic Zone or Relation lists, a dedicated field named adminDisplayTitle has been added to all Strapi forms. You can set the Entry title to adminDisplayTitle through the settings gear (Configure the view). Now, if you write a custom name (e.g. "Autumn Banner") in any item, that name will be displayed in the dropdown list and cards to make them easier to find. This field is completely Private and is not sent to the user.
6. Live Preview & Instant Publishing
Click the Preview button in Strapi to view draft content directly on the Next.js storefront without publishing publicly.
Clicking Publish triggers secure webhooks to the frontend, updating page cache in a fraction of a second.
7. Specialized Style & Block Guides
To explore visual previews, choose styles, and configure themes, check the following sections:
Modular Blocks System
Explore the catalog and styles for the 6 homepage blocks along with the CI/CD deployment guide.
View Blocks CatalogGlobal Settings & Themes
Theme color palettes, header & footer styles, cart, checkout, and account pages.
View Global Settings