Content features theme integration

<depict-grid-start-beacon
  {% liquid
    comment
      Set the defaults that apply when a theme loops over collection.products
      without pagination.
    endcomment

    assign depict_page_size = "50"
    if paginate.page_size
      assign depict_page_size = paginate.page_size
    endif

    assign depict_pagination_pages = "1"
    if paginate.pages
      assign depict_pagination_pages = paginate.pages
    endif

    assign depict_current_page = "0"
    if paginate.current_page
      comment
        Make depict_current_page 0-indexed; that is what the script expects.
      endcomment
      assign depict_current_page = paginate.current_page | minus: 1
    endif
  %}
  style="display:none;"
  data-paginate='
    {
      "page_size": {{ depict_page_size }},
      "pages": {{ depict_pagination_pages }},
      "current_page": {{ depict_current_page }}
    }
  '
></depict-grid-start-beacon>

<depict-grid-start-beacon
  style="display:none;"
  data-paginate='
    {
      "page_size": 16,
      "pages": 1,
      "current_page": 0
    }
  '
></depict-grid-start-beacon>

<depict-grid-end-beacon style="display:none;"></depict-grid-end-beacon>

<div
  data-depict-product-id="{{ product.id }}"
  data-depict-default-image="{{ product.featured_media.src }}"
  data-depict-hover-image="{{ card_product.media[1].src }}"
>
  <!-- rest of product card -->
</div>

<div
  data-depict-product-id="15371075486078"
  data-depict-default-image="files/Main_b13ad453-477c-4ed1-9b43-81f3345adfd6.jpg"
  data-depict-hover-image="files/Main_0a40b01b-5021-48c1-80d1-aa8ab4876d3d.jpg"
>
  <!-- rest of product card -->
</div>