PrestaShop

PrestaShop 1.7 Category Description Duplication: Fix for Enhanced SEO & UX

As e-commerce migration experts at Migrate My Shop, we frequently encounter a myriad of challenges that PrestaShop store owners face. From performance bottlenecks to complex integration issues, our mission is to provide clarity and actionable solutions. Today, we're diving into a common, yet often perplexing, bug in PrestaShop 1.7: the dreaded category description duplication.

This issue, which can negatively impact both your store's search engine optimization (SEO) and user experience (UX), often stems from theme-related logic. Let's explore how a community-driven effort uncovered and resolved this problem, providing a robust solution for your PrestaShop store.

Close-up of a developer coding, showing Smarty template and CSS files being edited for a PrestaShop theme fix.
Close-up of a developer coding, showing Smarty template and CSS files being edited for a PrestaShop theme fix.

The Problem: Duplicated Category Descriptions in PrestaShop 1.7

Imagine a customer landing on one of your product categories, only to find the category description appearing twice – once as a short snippet and again as a full block of text. This was precisely the issue reported by a PrestaShop user, enmoderugby, on their PrestaShop 1.7 installation. The bug manifested when the category description exceeded a certain character length, leading to an unsightly and confusing display.

The core of the problem lies in how PrestaShop themes, particularly the Classic theme or themes derived from it, handle long category descriptions. Many themes are designed to display a truncated version of the description with a 'Read More' button for brevity, and then reveal the full text upon user interaction. However, a common misconfiguration or bug can lead to both the short and long versions being rendered simultaneously, causing the duplication.

Initial Diagnosis: A Theme-Specific Challenge

The first step in troubleshooting any visual bug in PrestaShop often points towards the theme. As Eolia, a helpful forum member, quickly identified, the issue was likely rooted in the theme's category.tpl file. This Smarty template file is responsible for rendering the category page layout. Eolia's insight suggested that the theme's logic for displaying descriptions based on length was flawed, causing both display blocks to appear instead of just one.

PrestaShop's templating system, powered by Smarty, uses a hierarchical structure. The category.tpl file often extends or includes other partials. In this case, the crucial file to investigate was catalog/_partials/category-header.tpl, which is where the category name, image, and critically, the description, are typically rendered.

Unpacking the Solution: A Community & AI Collaboration

Through collaborative investigation, including examining the code within category-header.tpl, it became clear that the theme was indeed attempting to manage two versions of the description (short and long) but failing to hide one when the other was active. The solution, refined with insights from the community and even assistance from AI tools like ChatGPT, focused on a common development pattern: using CSS to initially hide elements and JavaScript to toggle their visibility.

Before you begin, always remember best practices:

  • Backup Your Files: Always create a full backup of your PrestaShop installation before making any code changes.
  • Use a Child Theme: If possible, implement these changes in a child theme to ensure your modifications are not overwritten during theme updates. If you're using the Classic theme directly, note that updates might revert your changes.
  • Clear Cache: After making changes, clear your PrestaShop cache (Performance > Clear cache) to see the effects.

Step-by-Step Fix: Modifying Your Theme Files

Step 1: Modify catalog/_partials/category-header.tpl

Navigate to your theme directory (e.g., themes/classic/templates/catalog/_partials/) and open the category-header.tpl file. You'll need to add placeholder elements for the 'Read More' and 'Read Less' texts. These elements will be hidden by default but are essential for the JavaScript to interact with.

Locate the existing

block and insert the following lines, typically just before the
:


  {if $listing.pagination.items_shown_from == 1}
    

      
{$category.name}

      {* Textes utilisés par le JS "Voir plus / Voir moins" (doivent exister dans le DOM) *}
      
      
      

        {if $category.description}
          

            {$category.description nofilter}
          

        {/if}
        {if !empty($category.image.large.url)}
          

            {if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}
          

        {/if}
      

    

  {/if}

Explanation: These tags are initially hidden using display:none;. Their purpose is to provide the text content for the 'Read More' and 'Read Less' buttons that will be dynamically created and managed by JavaScript.

Step 2: Add Custom CSS to Hide the Long Description Initially

Next, you need to add CSS rules to your theme's custom CSS file (e.g., themes/classic/assets/css/custom.css or via your theme's custom CSS option in the back office). This CSS will ensure that the full description and the 'Read Less' button are hidden by default, preventing the initial duplication.

/* Cache la version longue de la description par défaut */
.text-muted .more_text {
  display: none;
}

/* Cache le bouton "Voir moins" par défaut */
.text-muted .read_less {
  display: none;
}

Explanation: These rules target specific classes (.more_text and .read_less) that your JavaScript will later add to the description container and the 'Read Less' button, respectively. By setting display: none;, we ensure they are not visible until JavaScript explicitly makes them so.

Step 3: Implement the JavaScript Logic (Crucial Next Step)

The forum thread provides the HTML and CSS to *prepare* your theme for the 'Read More/Less' functionality, but it doesn't include the JavaScript that makes it interactive. This is a critical component for a complete solution. You'll need to add custom JavaScript to your theme (e.g., in themes/classic/assets/js/custom.js or a dedicated module's JS file) that:

  1. Checks the length of the #category-description content.
  2. If it exceeds a certain threshold, it truncates the text and appends a 'Read More' button (using the text from the hidden #readmore span).
  3. When 'Read More' is clicked, it reveals the full text and changes the button to 'Read Less' (using the text from #readless).
  4. When 'Read Less' is clicked, it truncates the text again and changes the button back to 'Read More'.

This JavaScript logic is essential to bring the 'Read More/Less' functionality to life and prevent the duplication by dynamically showing/hiding content. Without it, the HTML and CSS changes alone will not provide the desired interactive effect.

Why This Fix Matters: SEO and User Experience

Addressing this category description duplication bug is more than just a cosmetic fix:

  • Improved SEO: Duplicate content, even within the same page, can confuse search engines and dilute your page's authority. A clean, singular description helps search engines understand your content better, potentially improving rankings.
  • Enhanced User Experience: A cluttered page with repeated information is frustrating for users. A concise initial description with an optional 'Read More' button provides a cleaner, more professional look and allows users to control how much information they consume.
  • Professional Appearance: A well-structured category page reflects positively on your brand, conveying attention to detail and a commitment to quality.

Beyond the Fix: Proactive E-commerce Development

While this community-driven fix is effective, it highlights the importance of robust theme development and ongoing maintenance. For complex PrestaShop stores or those planning significant upgrades, relying on professional e-commerce migration and development services can save time and prevent future headaches.

At Migrate My Shop, we specialize in ensuring your PrestaShop store performs optimally, from seamless migrations to custom development and bug fixes. Whether you're upgrading to PrestaShop 8, optimizing your theme, or need bespoke module development, our experts are here to help you navigate the intricacies of e-commerce.

Don't let minor bugs detract from your store's potential. By understanding and implementing solutions like this, you ensure a smoother, more effective online presence for your customers.

Share:

Start with the tools

Explore migration tools

See options, compare methods, and pick the path that fits your store.

Explore migration tools