To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

How to: Collection Pages Promo Block

Superfein
Shopify Partner
6 0 4

I'm attempting to create a block that can be placed anywhere in the product grid in collection pages. 

 

I can get a block to render inside the grid on collection pages, and I've linked up a range slider to choose the grid position number. That was easy enough.

 

I'm running into a problem with pagination. Say there's 9 products per page (3 products per row, 3 rows total) and 12 products in the store. Without the promo block, 9 products display per page, but turning the promo block on will add a tenth block to the first page.

 

Problem #1: How to update the product grid so that when a promo block is added into the grid, the 9th product flows on to the second page? And so on for each subsequent page in the pagination?

 

The range slider for the promo block has a max of 9, because if it goes above that then the promo block disappears, the reason being, pagination breaks the products into 9 products per page. Page #2 has only 9 products, and so on for each page. 

 

Problem #2: How to get promo blocks to appear on 2nd or 3rd (and so on) pages in the pagination?

 

A simplified version of my collection-template.liquid file:

 

{%- paginate collection.products by paginate_by -%}

  {%- for block in section.blocks -%}
    <div {{ block.shopify_attributes }}>
      {%- case block.type -%}
      {%- when 'product_grid' -%}

        {% assign product_counter = 0 %}

        {%- for product in collection.products -%}

          {%- assign product_counter = product_counter | plus: 1 -%}

          {% if product_counter == grid_placement %}
            {%- render 'product-grid-promo', grid_item_width: grid_item_width, per_row: per_row -%}
           {%- endif -%} 

           {%- render 'product-grid-item', product: product, grid_item_width: grid_item_width, per_row: per_row -%}

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

    {%- endcase -%}
  </div>
{%- endfor -%}

{%- endpaginate -%}

 

Any help or guidance much appreciated. 

 

FYI I saw that the Atlantic theme by Pixel Union has this exact block available, and when I tested the theme out they had the same exact issues with their block. It added a 10th block to the page, and was not available on additional pagination pages.

Replies 0 (0)