In website content operation, the product detail page is the key link between users and products. The richness of its content, the clarity of its structure, and the flexibility of its presentation directly affect users' purchase decisions and the conversion rate of the website.AnQiCMS (AnQiCMS) provides an ideal solution with its powerful flexible content model functionality, freeing us from the constraints of traditional CMS fixed fields, allowing us to build highly customized, attractive product detail pages based on product characteristics and business needs.

1. Flexible Content Model: Customize the basic product details

In the Anqi CMS backend, you can easily manage and create custom models through the 'Content Management' under the 'Content Model' feature.The system is built-in with "Product Model", we can directly modify and extend it, or create a completely new product model as needed.When defining a model, the most critical aspect is the setting of "custom fields for content model" in addition to the basic model name and URL alias.Here we can add any number and type of fields to accurately match all the attributes of the product.

  • Product image groupCan be set to 'Multi-line text' or 'Attachment upload' type, used for uploading and storing multiple product images.
  • Price/Discount PriceSet to 'Numeric' type.
  • Color/Size/ModelCan be set to 'Single Selection', 'Multiple Selection', or 'Dropdown Selection', and preset option values.
  • Product selling points/characteristics：Set to 'Multiline Text', supports rich text editor, used to highlight product advantages.
  • List of contents/After-sales service：Set to 'Multiline Text'.
  • Custom Parameters：such as 'weight', 'material', 'brand', 'suitable population', etc., flexibly defined according to the specific product type, the type can be 'single-line text', 'number' etc.

Through this method, we can ensure that each product detail page can carry all its unique information, and these information are also organized clearly when managed in the background, and more accurate when displayed on the front end.

二、Build product classification and publish product content

After having a customized product model, the next step is to set up a reasonable product classification system and enter detailed product content.

  1. Create Product Category： In the "Content Management" section, under "Document Classification", select the product models we have defined, create categories such as "Electronics", "Clothing, Shoes and Bags", "Home Life", and establish more detailed subcategories under them.Each category can be independently set with SEO title, keywords, and description, as well as custom category templates, so that different styles are presented when displayed on the list page.

  2. Publish Product ContentEnter the "Content Management" page of "Publish Documents" (for product models, this is equivalent to publishing products), and select the corresponding product category.At this time, the core area of the interface will dynamically display all the custom fields we previously defined, based on the product model of the selected category.

    • Enter Product Name (as article title).
    • Write product introduction and detailed description, use rich text editor to insert images, videos, tables, and other rich content.
    • Upload multiple product images to the "Product Image Group" custom field.
    • Enter specific values or select preset options for custom fields such as 'Price', 'Color', 'Size', etc.
    • Set the recommended attributes of the product (such as "Hot
    • Add multiple Tag labels to the product, enhance content relevance, and increase the likelihood of users discovering the product.
    • 特别注意SEO设置：为每个产品详情页设置独立的SEO标题、关键词和描述，优化搜索引擎可见度。If necessary, you can also customize the URL alias to make the URL more friendly and descriptive.
    • Using the scheduled release feature, achieve precise online publishing of product content to meet the needs of marketing activities.

This WYSIWYG publishing experience greatly simplifies the content entry process, ensuring the accuracy and completeness of the content.

3. Front-end display and flexible template calling

The back-end content model is well constructed, but in the end, it still needs to be displayed to the user through the front-end template.The AnQi CMS provides a powerful and flexible template tag system, allowing us to easily present custom content on the website.

  1. Product Details Page Template ({模型table}/detail.html): We can use the template files of the product details page toarchiveDetailtags to obtain detailed information of the current product.

    • Basic Information: Directly through{{archive.Title}}Obtain product name,{{archive.Description}}Obtain product introduction.
    • Custom image groupIf a field namedproductImagesis customized to store multiple product images, it can be accessed through{% archiveDetail productImages with name="productImages" %}retrieving, and then using{% for img in productImages %}Loop display.
    • Custom Parameters: Can be used{% archiveParams params %}Loop through all custom fields and display their names and values, such as: 
      
{% archiveParams params %}
{% for item in params %}
<div>
    <span>{{item.Name}}：</span>
    <span>{{item.Value}}</span>
</div>
{% endfor %}
{% endarchiveParams %}
      If you only want to display a specific field, such as "price", you can use it directly{% archiveDetail with name="price" %}.
    • Rich text contentFor fields containing HTML content or Markdown format such as product detailed descriptions, it should be used{{archiveContent|safe}}or{{archiveContent|render|safe}}Ensure that the content is correctly parsed and displayed, to avoid being escaped.

  2. Product list page template ({模型table}/list.html)： In the product list page, we usearchiveListtags to get the product list.

    • According to the product category ID (categoryId), recommended attributes (flag) or sorting method (order）Parameters, flexibly call product data.
    • List can display product thumbnails ({{item.Thumb}}), and name ({{item.Title}}), and the introduction ({{item.Description}}).
    • If you want to display custom fields (such as price) on the list page, you can also{% archiveParams params with id=item.Id %}retrieve and display.
    • CombinearchiveFiltersTags, which can be implemented on the list page to achieve multi-dimensional and dynamic product filtering functions, such as filtering by color, size, price range, etc., greatly enhancing the user experience.

  3. SEO and User Experience Optimization:

    • Dynamic TDK: UtilizingtdkTags on each product detail page