Manual theme modifications for Shopify 2.0/Dawn Theme Preserve Layout

Locating the template in Shopify v2.0 / Dawn Theme

The structure of a category page is generally controlled by the Templates > collection.json file, which will define the sections used to render the page.

The product-grid section should be present and contain a type key that relates to a liquid template within the Sections category.

For example, the Dawn theme content is as follows:

{  "sections": {
    "banner": {
      "type": "main-collection-banner",
      "settings": {
      }
    },
    "product-grid": {
      "type": "main-collection-product-grid",
      "settings": {
      }
    }
  },
  "order": [
    "banner",
    "product-grid"
  ]
}

Here we see sections.product-grid.typenbsp;Sections > main-collection-product-grid.liquid

Locating the template in Shopify v2.0 / Dawn Theme

The structure of a category page is generally controlled by the Templates > product.json file, which will define the sections used to render the page.

This layout is more complex than the collection.json, with blocks embedded within the sections, however, we can ignore this additional configuration as all we need is the type used for the main section.

For example, the Dawn theme content is as follows (shortened for illustration purposes)

{
  "sections": {
    "main": {
      "type": "main-product",
      "blocks": {
        // Content shortened
      },
      "block_order": [
        // Content shortened
      ],
      "settings": {
      }
    },
    "product-recommendations": {
      "type": "product-recommendations",
      "settings": {
      }
    }
  },
  "order": [
    "main",
    "product-recommendations"
  ]
}

Here we see sections.main.type is “main-product”, which corresponds with the template Sections > main-product.liquid

Locating the template in Shopify v2.0 / Dawn Theme

Rendering of the product cards is usually done within the collection template, as identified above.

If you are using a highly customized theme where this is not the case, you will need to refer to your developers to identify the template used.

Within the Dawn template Sections > main-collection-product-grid.liquid, we see the following code section.

<div id="CollectionProductGrid">
  {%- paginate collection.products by section.settings.products_per_page -%}
    {%- if collection.products.size == 0 -%}
      <div class="collection collection--empty page-width" id="main-collection-product-grid" data-id="{{ section.id }}">
        <div class="loading-overlay gradient"></div>

        <p class="collection-product-count light" role="status">
          {%- if collection.products_count == collection.all_products_count -%}
            {{ 'sections.collection_template.product_count_simple' | t: count: collection.products_count }}
          {%- else -%}
            {{ 'sections.collection_template.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
          {%- endif -%}
        </p>

        <div class="title-wrapper center">
          <h2 class="title title--primary">
            {{ 'sections.collection_template.empty' | t }}

            {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }}
          </h2>
        </div>
      </div>
    {%- else -%}
      <div class="collection page-width">
        <div class="loading-overlay gradient"></div>

        <ul id="main-collection-product-grid" data-id="{{ section.id }}" class="
          grid grid--2-col negative-margin product-grid
          {% if collection.products_count < 4 %} grid--{{ collection.products_count }}-col-tablet{% else %}
            {% if collection.products_count == 4 %} grid--4-col-desktop{% else %} grid--3-col-tablet grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}
          {% endif %}">
          {%- for product in collection.products -%}
            <li class="grid__item">
              {% render 'product-card',
                product_card_product: product,
                media_size: section.settings.image_ratio,
                show_secondary_image: section.settings.show_secondary_image,
                add_image_padding: section.settings.add_image_padding,
                show_vendor: section.settings.show_vendor,
                show_image_outline: section.settings.show_image_outline,
                show_rating: section.settings.show_rating
              %}
            </li>
          {%- endfor -%}
        </ul>

        {%- if paginate.pages > 1 -%}
          {% render 'pagination', paginate: paginate, anchor: '' %}
        {%- endif -%}
      </div>
    {%- endif -%}
  {%- endpaginate -%}
</div>

We are looking for a template reference within the product loop, which will give us the template file used for each product item.

In the above code, the relevant portion is

{%- for product in collection.products -%}
            <li class="grid__item">
              {% render 'product-card',
                product_card_product: product,
                media_size: section.settings.image_ratio,
                show_secondary_image: section.settings.show_secondary_image,
                add_image_padding: section.settings.add_image_padding,
                show_vendor: section.settings.show_vendor,
                show_image_outline: section.settings.show_image_outline,
                show_rating: section.settings.show_rating
              %}
            </li>
          {%- endfor -%}

which tells Shopify to render the product-card template.

As render instructions refer to items in the Snippets section, this means we should add content to the Snippets > product-card.liquid file