0 like 0 dislike
12 views
asked in Sections Anywhere by (121 points)
I'd like to throw an image, video, or collection list after a row of products or in place of two products.

1 Answer

0 like 0 dislike
answered by (121 points)

To accomplish this, you'll need to know how to edit template files within your theme.

https://help.shopify.com/en/manual/using-themes/change-the-layout/theme-code

1.  Edit your collection template.  It should be named templates/collection.liquid.  It should look something like this:

{% include 'atb' zone:"Top"%}

{% section 'collection-template' %}

{% section 'recently-viewed-products' %}

{% section 'collection-footer' %}

{% include 'atb' zone:"Bottom"%}

2. The code above uses section 'collection-template'.  If your collection includes a section for the bulk of its code, you will want to add commented out zones.  

{% comment %}

{% include 'atb' zone:"inline"%}

{% endcomment %}

{% include 'atb' zone:"Top"%}

{% section 'collection-template' %}

{% section 'recently-viewed-products' %}

{% section 'collection-footer' %}

{% include 'atb' zone:"Bottom"%}

3. In the collection-template section, find the code that loops through products.  You can usually find this by searching for collection.products

  {%- if collection.products_count > 0 -%}

    {%- paginate collection.products by section.settings.grid_items_per_page -%}

      <div class="ProductListWrapper">

        <div class="ProductList ProductList--grid {% if paginate.pages > 1 %}ProductList--removeMargin{% endif %} Grid" data-mobile-count="{{ mobile_items_per_row }}" data-desktop-count="{{ desktop_items_per_row }}">

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

          <div class="Grid__Cell 1/{{ mobile_items_per_row }}--phone 1/{{ tablet_items_per_row }}--tablet-and-up 1/{{ desktop_items_per_row }}--{% if section.settings.filter_position == 'drawer' %}lap-and-up{% else %}desk{% endif %}">

              {%- include 'product-item', show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}

            </div>

          {%- endfor -%}

        </div>

      </div>

      {%- include 'pagination' -%}

    {%- endpaginate -%}

  {%- else -%}

4.  Modify the code to add the following bold lines:

  {%- if collection.products_count > 0 -%}

    {%- paginate collection.products by section.settings.grid_items_per_page -%}

      <div class="ProductListWrapper">

        <div class="ProductList ProductList--grid {% if paginate.pages > 1 %}ProductList--removeMargin{% endif %} Grid" data-mobile-count="{{ mobile_items_per_row }}" data-desktop-count="{{ desktop_items_per_row }}">

          {%- assign ci = paginate.current_offset -%}

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

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

          {%- include 'atb' zone: 'inline' -%}

          <div class="Grid__Cell 1/{{ mobile_items_per_row }}--phone 1/{{ tablet_items_per_row }}--tablet-and-up 1/{{ desktop_items_per_row }}--{% if section.settings.filter_position == 'drawer' %}lap-and-up{% else %}desk{% endif %}">

              {%- include 'product-item', show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}

            </div>

          {%- endfor -%}

        </div>

      </div>

      {%- include 'pagination' -%}

    {%- endpaginate -%}

  {%- else -%}

5.  Make a note of the grid item div that wraps each product item.   You will copy and paste it later.

<div class="Grid__Cell 1/{{ mobile_items_per_row }}--phone 1/{{ tablet_items_per_row }}--tablet-and-up 1/{{ desktop_items_per_row }}--{% if section.settings.filter_position == 'drawer' %}lap-and-up{% else %}desk{% endif %}"> 

6.  Choose a sections anywhere section to convert into an inline.   The begin with snippets/atb.  Duplicate the section and change the name by adding inline- after atb.

atb.featured-image.liquid ->  atb.inline-featured-image.liquid

7.  Make the following changes to your new snippet file:

a) change the id to add inline-

b)  beneath description add the following node to our schema object

  "zones": ["inline"],

c) add the following nodes to settings

    {

      "type": "range",

      "id": "atb_position",

      "label": "Position",

      "default": "4",

  "min": "1",

  "max": "100",

      "info": ""

    },

    {

      "type": "range",

      "id": "atb_span",

      "label": "Span",

      "default": "2",

  "min": "1",

  "max": "4",

      "info": ""

    },

d) immediately following the schema, add the following variable assignments and conditional

{% include 'atb-render' field:'atb_position' %}

{% assign atb_position = val | plus: 0 %}

{%- if atb_position == ci -%}

{% include 'atb-render' field:'atb_span' %}

{% assign atb_span = val %}

e) add our grid item wrapper from step 5 beneath the variable assignments and before the start of html code.  In this case it is:

<div class="Grid__Cell 1/{{ mobile_items_per_row }}--phone 1/{{ tablet_items_per_row }}--tablet-and-up 1/{{ desktop_items_per_row }}--{% if section.settings.filter_position == 'drawer' %}lap-and-up{% else %}desk{% endif %}"> 

f) at the end of the file add a closing div and closing if

</div>

{%- endif -%}

THAT'S IT!

Ask questions and receive answers from our expert developers and other members of the community.
...