Hide Smart Collection Pages from Shopify Collection Pages

Plans: All plans Platforms: Shopify

Overview

AfterShip Personalization in Shopify allows you to create tailored product displays for different customer segments based on predefined criteria by duplicating your original Shopify collections. Each copy of these collections will have "apz" in its collection page handle, which means these personalized collections will appear on the backend collection page, typically not visible to shoppers.

Hide personalized collection pages

If you want to prevent these personalized collections from showing up on the main collection page, you can follow these steps to modify your theme code.

Steps to Hide Personalization Collections:

Locate the theme code: Find the code file responsible for running the list of collection pages. This is usually located in /sections/main-list-collections.liquid.
Edit the code: In the above mentioned file, look for the section of code that displays the collections. You'll need to modify it to exclude any collections that contain "-apz-" in their URL.

Example code:

Before editing

{%- paginate collections by paginate_by -%}
  <ul
    class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
    role="list"
  >
    {%- for collection in collections -%}
      <li
        class="collection-list__item grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        {% if settings.animations_reveal_on_scroll %}
          data-cascade
          style="--animation-order: {{ forloop.index }};"
        {% endif %}
      >
        {% render 'card-collection',
          card_collection: collection,
          media_aspect_ratio: section.settings.image_ratio,
          columns: 3
        %}
      </li>
    {%- endfor -%}
  </ul>
  {% render 'pagination', paginate: paginate %}
{%- endpaginate -%}

After editing

{%- paginate collections by paginate_by -%}
  <ul
    class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
    role="list"
  >
    {%- for collection in collections -%}
      {% unless collection.url contains "-apz-" %}
        <li
          class="collection-list__item grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: {{ forloop.index }};"
          {% endif %}
        >
          {% render 'card-collection',
            card_collection: collection,
            media_aspect_ratio: section.settings.image_ratio,
            columns: 3
          %}
        </li>
      {% endunless %}
    {%- endfor -%}
  </ul>
  {% render 'pagination', paginate: paginate %}
{%- endpaginate -%}

By following these steps, you can successfully hide personalized collection pages from the main collection display, ensuring that only the collections you want customers to see are visible. This allows for a cleaner, more focused shopping experience while still leveraging the benefits of product personalization.

Updated on: 30/10/2024