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

1. Flexible Content Model: Customizing the basis of product details

One of the core strengths of AnQi CMS is its flexible content model.This means we no longer need to accommodate the system predefined fields, but we can freely define the required fields according to the specific product type and information structure.For an electronic product, we may need fields such as "CPU model", "memory size", "screen size", and so on;And for a piece of clothing, it may require materials, color, size, washing instructions, and so on.This high degree of flexibility is the foundation for creating unique product detail pages.

On the Anqi CMS backend, you can easily manage and create custom models under the 'Content Management' tab.The system is built-in with "Product Model", we can directly modify and expand on this, or create a completely new product model as needed.When defining a model, the most critical setting is the "custom fields" of the "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 properties of the product. For example:

  • Product Image Group: Can be set to "Multi-line Text" or "Attachment Upload" type, used for uploading and storing multiple product images.
  • Price/Discount Price: Set to "Number" type.
  • Color/Size/ModelCan be set to 'Single selection', 'Multiple selection' or 'Drop-down selection', and preset option values.
  • Product selling points/characteristicsSet to 'Multi-line text', supports rich text editor, used to highlight product advantages.
  • Packaging List/After-sales ServiceSet to 'Multi-line text'.
  • Custom parameterAs for "weight", "material", "brand", "applicable population", etc., flexible definition according to the specific product type, the type can be "single-line text", "number", etc.

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

Second, build product categories and publish product content

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

  1. Create product categoryIn the "Content Management" section, select the product models we have defined, create categories such as "Digital Products", "Clothing and Bags", "Home Life", and set up more detailed subcategories under them.Each category can be independently set to SEO title, keywords, and description, as well as a custom category template, so that different styles are presented when displayed on the list page.

  2. Publish product contentEnter the "Content Management" "Publish Document" page (for product models, this is equivalent to publishing a product), select the corresponding product category.At this time, the core area of the interface will dynamically display all the fields we previously customized, based on the product model of the selected category.Here, we can:

    • Fill in product name (as article title).
    • Write a product introduction and detailed description, using a 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 product attributes (such as "Hot", "New"), convenient for calling on the homepage or other areas.
    • Add multiple Tag tags to the product, increase content relevance, and enhance the chances of users discovering the product.
    • Pay special attention to SEO settings: Set independent SEO titles, keywords, and descriptions for each product detail page to optimize search engine visibility.If needed, you can also customize the URL alias to make the URL more friendly and descriptive.
    • Using the scheduled release function, achieve accurate product content launch, meet the needs of marketing activities.

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

Section 3: Front-end display and flexible template calling

The backend content model is built to be more perfect, and in the end, it still needs to be displayed to users through the front-end template.The AnQi CMS provides a powerful and flexible template tag system, allowing us to easily display custom content on the website.

  1. Product detail page template ({模型table}/detail.html): In the product detail page template file, we can usearchiveDetailtags to obtain detailed information about the current product.

    • Basic information: Directly through{{archive.Title}}Get product name,{{archive.Description}}Get product description.
    • Custom image group: If you have customized a field namedproductImagesto store multiple product images, you can access them via{% archiveDetail productImages with name="productImages" %}obtained, and then used{% for img in productImages %}display in a loop.
    • Custom parameter: Can pass through{% archiveParams params %}Label loops through all custom fields and displays 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 content: For product detailed descriptions and fields that contain HTML content or Markdown format, should use{{archiveContent|safe}}or{{archiveContent|render|safe}}Ensure that the content is parsed and displayed correctly, and avoid being escaped.

  2. Product List Page Template ({模型table}/list.html): On the product list page, we usearchiveListtags to retrieve the product list.

    • According to the product category ID(categoryId), recommended attributes(flag）or sorting method（order）with various parameters, flexibly call product data。“
    • List can show product thumbnails（{{item.Thumb}}）、name（{{item.Title}}) and summary ({{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 %}fetch and display.
    • CombinearchiveFiltersThe tag can realize multi-dimensional and dynamic product filtering functions on the list page, such as filtering by color, size, price range, etc., which greatly improves the user experience.

  3. SEO and user experience optimization:

    • Dynamic TDKUtilizetdkThe label is on each product detail page