javascript - 液体で製品写真を大きくする

Question

現在、Shopify で「Debut」テーマを使用しています。商品画像のサイズを変更して大きくしたいと考えています。現在、写真のサイズは 276x345 で、私は約 367x550 にしようとしています。

現在、このページは、フルサイズのブラウザー (モバイルではない) でページ全体に 3 つの製品が表示されるようにレイアウトされています。

Collection.liquid には現在、次のものがあります。

  {% case section.settings.grid %}
{% when 2 %}
  {%- assign max_height = 530 -%}
  {%- assign grid_item_width = 'large-up--one-half' -%}
{% when 3 %}
  {%- assign max_height = 345 -%}
  {%- assign grid_item_width = 'small--one-half large-up--two-third' -%}
{% when 4 %}
  {%- assign max_height = 250 -%}
  {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
  {%- assign max_height = 195 -%}
  {%- assign grid_item_width = 'small--one-half medium-up--one-fifth'     -%}
{% endcase %}

ブラウザで調べると、これが返される CSS です

  @media screen and (min-width: 750px) { 
    #ProductCardImage-collection-template-1487328739386 {
      max-width: 276.0px;
      max-height: 345px;
    }
    #ProductCardImageWrapper-collection-template-1487328739386 {
      max-width: 276.0px;
      max-height: 345px;
    }
   } 



    @media screen and (max-width: 749px) {
      #ProductCardImage-collection-template-1487328739386 {
        max-width: 600.0px;
        max-height: 750px;
      }
      #ProductCardImageWrapper-collection-template-1487328739386 {
        max-width: 600.0px;
      }
    }

この最大 276px の原因は何ですか?

画像をロードして大きなサイズで表示するようにコードを変更するにはどうすればよいですか?