How to Make a Dedicated Brand Page

Many stores have the requirement of a dedicated page featuring all the products from a specific brand or a specific category without it being on a search results page. This can be useful for SEO and landing page purposes.

StoreConnect supports this out of the box by the use of our Content Page and Liquid system.

To do this, first make or find a Product Category for the brand that contains all the products you wish to show on the dedicated page. This can be an existing Product Category, or can be a new one. It does not matter if this is hidden from navigation or not.

When you select your Product Category, take note of the Path field, as this will be needed to select the correct category on your page.

Then create a page within the CMS to show these products. While you are making it, it is a good idea to uncheck “Publish the page on the site” and check “Hide Page from Navigation and Menus”.

On the Page, fill out the Title and Subtitle as you require as well as the path to be a suitable path for your website.

Then in the Content Body, you will need to write some liquid and HTML in order to show the products correctly. You first need to select the category, then paginate the products and then loop through the products showing the HTML code you want for each product as you go.

For example, if you had a product category called “Nike” with the path of ‘nike’ your Liquid code would look similar to this:

<div class="product-list">
  {% assign selected_category = all_product_categories['shoes'] %}
  {% paginate selected_category.products by 50 %}
    {% for product in selected_category.products %}
      {% if product.available? %}
        <div class="ProductCard">
          <a href="{{ product.path }}">
            {% if product.images.size > 0 %}
              <img src="{{ product.images.first.large_url }}"/>
            {% else %}
              <svg class="Placeholder" viewBox="0 0 400 500">
                <rect width="100%" height="100%"></rect>
                <circle cx="50%" cy="50%" r="20%" fill="rgba(0,0,0,0.05)"/>
              </svg>
            {% endif %}
          </a>
          <a href="{{ product.path }}">
            {{ product.display_name }}
          </a>
        </div>
      {% endif %}
    {% endfor %}
  {% endpaginate %}
</div>

Additionally, the block of HTML needs to start it’s first <div> or block level HTML element (table, p etc) without any spaces in front of it to avoid it being treated as just text.

Note on the above we are selecting the first 50 products in this category. You can set this 50 to however many you want, however you must select some number, not matter how large or small, for the products to show.