Skip to main content

Manual theme modifications for Shopify 2.0/Dawn Theme Preserve Layout

Updated

Important: The below guide is retained for reference, though should no longer be considered definitive.

 

Since January 9th, 2024, Shopify Preserve Layout is no longer supported natively by the Klevu App.

This means that there is no way of automatically enabling either theme modifications or automated updates of your collections' product orders through the app interface. 

If you wish to enable Preserve Layout for your Collection pages, please raise a support ticket and we will enable the feature on your behalf and assist you with the manual changes required to integrate into your theme.

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.

If you are using a custom theme that does not use the product-grid section, you should select the most appropriate template for your theme.

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.

If you are using a custom theme that does not use the main section, you should select the most appropriate template for your theme.

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.


  {%- paginate collection.products by section.settings.products_per_page -%}
    {%- if collection.products.size == 0 -%}
      

        


        

          {%- 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 -%}
        


        

          

            {{ 'sections.collection_template.empty' | t }}

            {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }}
          

        

      

    {%- else -%}
      

        


        
    <4 4="4" else="else" if="if" grid--3-col-tablet="grid--3-col-tablet" grid--one-third-max="grid--one-third-max" grid--4-col-desktop="grid--4-col-desktop" endif="endif">
          {%- for product in collection.products -%}
            
  • 
              {% 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
              %}
            
    • 
          {%- endfor -%}
        


        {%- if paginate.pages  1 -%}
          {% render 'pagination', paginate: paginate, anchor: '' %}
        {%- endif -%}
      

    {%- endif -%}
  {%- endpaginate -%}

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 -%}
            
              {% 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
              %}
            
          {%- 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

 

Related articles

Powered by Zendesk