Center logo in Brooklyn theme

Tourist
8 0 0

Hi @Vikas_Chovatiya here it is


<!-- /templates/collection.liquid --> {%- if section.settings.show_collection_image and collection.image -%} <div class="collection-hero"> <noscript> <div class="collection-hero__image-no-js" style="background-image:url({{ collection.image | img_url: '2048x2048' }});"></div> </noscript> {%- assign img_url = collection.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {%- comment -%} If the collection.image height is < 70% of its width on mobile or < 45% on desktop, we crop the container to make sure it's the same height as the image. {%- endcomment -%} {%- assign height_width_ratio = 100 | divided_by: collection.image.aspect_ratio | floor -%} {%- if height_width_ratio < 70 -%} <style> {%- if height_width_ratio < 45 -%} .collection-hero__image-wrapper::after { padding-bottom: {{ height_width_ratio }}%; } {%- else -%} @media screen and (max-width: 768px) { .collection-hero__image-wrapper::after { padding-bottom: {{ height_width_ratio }}%; } } {%- endif -%} </style> {%- endif -%} <div class="collection-hero__image-wrapper"> <img class="collection-hero__image lazyload" src="{{ collection.image | img_url: '300x' }}" data-src="{{ img_url }}" data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]" data-aspectratio="{{ collection.image.aspect_ratio }}" data-sizes="auto" data-parent-fit="cover" alt="{{ collection.image.alt | escape }}"> </div> </div> {%- endif -%} <div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template" data-grid-type="{{ section.settings.collection_products_grid }}"> {%- paginate collection.products by 12 -%} <header class="section-header text-center"> <h1>{{ collection.title }}</h1> <hr class="hr--small"> {%- if collection.description != blank -%} <div class="grid"> <div class="grid__item"> <div class="rte"> {{ collection.description }} </div> </div> </div> {%- endif -%} <div class="grid--full collection-sorting{% if section.settings.collection_sort_enable %} collection-sorting--enabled{% endif %}"> {%- if section.settings.collection_sort_enable -%} {%- include 'collection-sorting' -%} {%- endif -%} </div> {%- if section.settings.collection_tags_enable -%} {%- if collection.all_tags.size > 0 -%} {%- if section.settings.collection_sort_enable -%} <hr class="hr--small hr--clear"> {%- endif -%} <ul class="tags tags--collection inline-list"> {% comment %} Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle}) {% endcomment %} <li{% unless current_tags %} class="tag--active"{% endunless %}> <a href="{% if collection.url == blank %}{{ routes.all_products_collection_url }}{% else %}{{ collection.url }}{% endif %}"> {{ 'collections.general.all_of_collection' | t }} </a> </li> {%- for tag in collection.all_tags -%} {%- if current_tags contains tag -%} <li class="tag--active"> {{ tag | link_to_remove_tag: tag }} </li> {%- else -%} <li> {% comment %} Use link_to_add_tag if you want to allow filtering by multiple tags {% endcomment %} {{ tag | link_to_tag: tag }} </li> {%- endif -%} {%- endfor -%} </ul> {%- endif -%} {%- endif -%} {%- if section.settings.collection_tags_enable -%} <hr class="hr--small hr--clear"> {%- endif -%} </header> {%- if section.settings.collection_products_grid == 'collage' -%} <div class="grid grid-collage"> {% comment %} Loop through our products in the current collection. See the snippet 'snippets/product-grid-collage.liquid'. `is_reverse_row__product`, `three_row_index__product`, `collection_product_count`, and `divisible_by_three__product` are all used by 'snippets/product-grid-collage.liquid' {% endcomment %} {%- assign is_reverse_row__product = false -%} {%- assign three_row_index__product = 0 -%} {%- assign collection_product_count__product = collection.products.size -%} {%- assign divisible_by_three__product = collection_product_count__product | modulo:3 -%} {%- for product in collection.products -%} {%- include 'product-grid-collage' -%} {%- else -%} {%- if shop.products_count == 0 -%} {% comment %} Add default products to help with onboarding for collections/all only {% endcomment %} {% include 'onboarding-featured-products' -%} {%- else -%} {% comment %} If collection exists but is empty, display message {% endcomment %} <div class="grid__item text-center"> <p>{{ 'collections.general.no_matches' | t }}</p> </div> {%- endif -%} {%- endfor -%} </div> {%- elsif section.settings.collection_products_grid == 'grid' -%} <div class="grid-uniform"> {%- assign grid_item_width = 'medium--one-half large--one-third' -%} {%- for product in collection.products -%} {%- include 'product-grid-item' -%} {%- else -%} {%- if collection.handle == 'all' -%} {% comment %} Add default products to help with onboarding for collections/all only {% endcomment %} {%- include 'onboarding-featured-products' -%} {%- else -%} {% comment %} If collection exists but is empty, display message {% endcomment %} <div class="grid__item text-center"> <p>{{ 'collections.general.no_matches' | t }}</p> </div> {%- endif -%} {%- endfor -%} </div> {%- endif -%} {%- if paginate.pages > 1 -%} {%- include 'pagination' -%} {%- endif -%} {%- endpaginate -%} </div> {% schema %} { "name": { "da": "Kollektionssider", "de": "Kategorieseiten", "en": "Collection pages", "es": "Páginas de colección", "fi": "Kokoelman sivut", "fr": "Pages de collection", "hi": "कलेक्शन पेज", "it": "Pagine di collezioni", "ja": "コレクションページ", "ko": "컬렉션 페이지", "nb": "Samlingssider", "nl": "Collectiepagina's", "pt-BR": "Páginas de coleções", "pt-PT": "Páginas de coleções", "sv": "Produktseriesidor", "th": "หน้าคอลเลกชัน", "zh-CN": "产品系列页面", "zh-TW": "商品系列頁面" }, "settings": [ { "type": "checkbox", "id": "show_collection_image", "label": { "da": "Vis kollektionsbillede", "de": "Kategorie-Foto anzeigen", "en": "Show collection image", "es": "Mostrar imagen de la colección", "fi": "Näytä kokoelman kuva", "fr": "Afficher l'image de la collection", "hi": "कलेक्शन इमेज दिखाएं", "it": "Mostra immagine collezione", "ja": "コレクションの画像を表示する", "ko": "컬렉션 이미지 표시", "nb": "Vis samlingsbilde", "nl": "Collectieafbeelding weergeven", "pt-BR": "Exibir imagem da coleção", "pt-PT": "Mostrar imagem da coleção", "sv": "Visa produktseriebilder", "th": "แสดงรูปภาพคอลเลกชัน", "zh-CN": "显示产品系列图片", "zh-TW": "顯示商品系列圖片" }, "default": false }, { "type": "checkbox", "id": "collection_sort_enable", "label": { "da": "Aktivér sortering af kollektioner", "de": "Kategoriesortierung aktivieren", "en": "Enable collection sorting", "es": "Habilitar la la función ordenar colecciones", "fi": "Ota kokoelman lajittelu käyttöön", "fr": "Activer le tri de la collection", "hi": "कलेक्शन क्रमबद्ध करना सक्षम करें", "it": "Abilita ordinamento collezione", "ja": "コレクションの並べ替えを有効にする", "ko": "컬렉션 정렬 사용", "nb": "Aktiver sortering av samlinger", "nl": "Sorteren op collectie inschakelen", "pt-BR": "Habilitar a organização de coleções", "pt-PT": "Ativar ordenação de coleção", "sv": "Aktivera produktseriesortering", "th": "เปิดใช้การเรียงลำดับคอลเลกชัน", "zh-CN": "启用产品系列排序", "zh-TW": "啟用商品系列排序功能" } }, { "type": "checkbox", "id": "collection_tags_enable", "label": { "da": "Aktivér tagfiltrering", "de": "Tag-Filtern erlauben", "en": "Enable tag filtering", "es": "Habilitar filtro de etiquetas", "fi": "Ota tunnisteiden suodatus käyttöön", "fr": "Activer le filtrage par balises", "hi": "टैग फ़िल्टर करना सक्षम करें", "it": "Attiva filtro tag", "ja": "タグでの絞り込みを有効にする", "ko": "태그 필터링 사용", "nb": "Aktiver taggfiltrering", "nl": "Filteren op tags inschakelen", "pt-BR": "Habilitar filtragem de tag", "pt-PT": "Ativar filtragem por etiqueta", "sv": "Aktivera taggfiltrering", "th": "เปิดใช้การกรองแท็ก", "zh-CN": "启用标签筛选", "zh-TW": "啟用標籤篩選功能" } }, { "type": "header", "content": { "da": "Produkter", "de": "Produkte", "en": "Products", "es": "Productos", "fi": "Tuotteet", "fr": "Produits", "hi": "उत्पाद", "it": "Prodotti", "ja": "商品管理", "ko": "제품", "nb": "Produkter", "nl": "Producten", "pt-BR": "Produtos", "pt-PT": "Produtos", "sv": "Produkter", "th": "สินค้า", "zh-CN": "产品", "zh-TW": "產品" } }, { "type": "select", "id": "collection_products_grid", "label": { "da": "Gittertypografi", "de": "Rasterstil", "en": "Grid style", "es": "Estilo de cuadrícula", "fi": "Ruudukon tyyli", "fr": "Style de grille", "hi": "ग्रिड स्टाइल", "it": "Stile griglia", "ja": "グリッドスタイル", "ko": "그리드 스타일", "nb": "Rutenettstil", "nl": "Rasterstijl", "pt-BR": "Estilo da grade", "pt-PT": "Estilo da grelha", "sv": "Rutnätsstil", "th": "สไตล์กริด", "zh-CN": "网格样式", "zh-TW": "網格樣式" }, "options": [ { "value": "collage", "label": { "da": "Collage", "de": "Collage", "en": "Collage", "es": "Collage", "fi": "Kollaasi", "fr": "Collage", "hi": "कोलाज", "it": "Collage", "ja": "コラージュ", "ko": "콜라주", "nb": "Fotomontasje", "nl": "Collage", "pt-BR": "Colagem", "pt-PT": "Colagem", "sv": "Kollage", "th": "ภาพตัดแปะ", "zh-CN": "拼贴画", "zh-TW": "拼貼" } }, { "value": "grid", "label": { "da": "Gitter", "de": "Raster", "en": "Grid", "es": "Cuadrícula", "fi": "Ruudukko", "fr": "Grille", "hi": "ग्रिड", "it": "Griglia", "ja": "グリッド", "ko": "그리드", "nb": "Rutenett", "nl": "Raster", "pt-BR": "Grade", "pt-PT": "Grelha", "sv": "Rutnät", "th": "กริด", "zh-CN": "网格", "zh-TW": "網格" } } ] }, { "type": "checkbox", "id": "product_vendor_enable", "label": { "da": "Vis produktleverandør", "de": "Produktverkäufer anzeigen", "en": "Show product vendor", "es": "Mostrar proveedor del producto", "fi": "Näytä tuotteen myyjä", "fr": "Afficher le distributeur du produit", "hi": "उत्पाद विक्रेता दिखाएं", "it": "Indica fornitore prodotto", "ja": "商品の販売元を表示する", "ko": "제품 공급 업체 표시", "nb": "Vis produktleverandør", "nl": "Productleverancier weergeven", "pt-BR": "Exiba o fornecedor do produto", "pt-PT": "Mostrar o fornecedor do produto", "sv": "Visa produktsäljare", "th": "แสดงผู้ขายสินค้า", "zh-CN": "显示产品厂商", "zh-TW": "顯示產品廠商" } } ] } {% endschema %}

 

0 Likes
Highlighted
Trailblazer
265 68 75

Hi @I_like_tea 

Please share this file code product-grid-item.liquid

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Tourist
8 0 0

Hi @Vikas_Chovatiya here are the 

product-grid-item.liquid

followed by

product-grid-collage.liquid in case you need it.

<!-- /snippets/product-grid-item.liquid -->
{% comment %}

  This snippet is used to showcase each product during the loop,
  'for product in collection.products' in collection.liquid.

  A liquid variable (grid_item_width) is set just before the this
  snippet is included to change the size of the container.
  Once the variable is set on a page, all future instances of this
  snippet will use that width. Overwrite the variable to adjust this.

  Example
    - assign grid_item_width = 'large--one-quarter medium--one-half'

{% endcomment %}

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% unless width %}
  {%- assign width = 310 -%}
{% endunless %}
{% unless height %}
  {%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}

{%- assign variant = product.selected_or_first_available_variant -%}

{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
  <div class="grid-product__wrapper">
    <div class="grid-product__image-wrapper">
      <a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
        {% if featured_image.src== blank %}
          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
        {% else %}
          {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
          <div id="{{ img_wrapper_id }}" class="product--wrapper">
            <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
              <img class="product--image lazyload {{ img_id_class }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ featured_image.alt | escape }}"
                   data-image>
            </div>
          </div>
          <noscript>
            <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
          </noscript>
        {% endif %}
      </a>
      {% if sold_out %}
        <div class="grid-product__sold-out">
          <p>{{ 'products.product.sold_out_html' | t }}</p>
        </div>
      {% elsif on_sale %}
        <div class="grid-product__on-sale">
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
        </div>
      {% endif %}
    </div>

    <a href="{{ product.url | within: collection }}" class="grid-product__meta">
      <span class="grid-product__title">{{ product.title }}</span>
      <span class="grid-product__price-wrap">
        <span class="long-dash">—</span>
        <span class="grid-product__price">
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {% else %}
             <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          {% endif %}
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>

        {%- if product.price_varies == false and variant.unit_price_measurement -%}
          {%- capture unit_price_separator -%}
            <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
          {%- endcapture -%}

          {%- capture unit_price_base_unit -%}
            <span>
              {%- if variant.unit_price_measurement.reference_value != 1 -%}
                {{- variant.unit_price_measurement.reference_value -}}
              {%- endif -%}
              {{ variant.unit_price_measurement.reference_unit }}
            </span>
          {%- endcapture -%}
          <span class="product-unit-price">
            <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
            <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
          </span>
        {%- endif -%}
      </span>
      {% if section.settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}
    </a>
  </div>
</div>

 

product-grid-collage.liquid:

{% comment %}
  This snippet controls the collage product grid.  Depending on the number of products in
  a collection we want to display them in rows of 1, 2, 3, or a reversed row of 3.

  A '3 row' has the large product left align with two smaller product on the right.

  The 'reversed 3 row' has the large product right aligned with two smaller products on
  the left.

  If we're near the end of the loop and there are not enough products to make
  complete rows of 3, we switch to a 2 item row.

  Depending on where we are in the group of three products and if it's reversed,
  we want to set the grid_item_width for each item in the collection.

  The collage grid is only used for the desktop breakpoint.

  For example:
  1  = 1
  2  = 2
  3  = 3
  4  = 2 + 2
  5  = 3 + 2
  6  = 3 + reverse 3
  7  = 3 + 2 + 2
  8  = 3 + reverse 3 + 2
  9  = 3 + reverse 3 + 3
  10 = 3 + reverse 3 + 2 + 2
  11 = 3 + reverse 3 + 3 + 2
  etc.

  Change the grid item width by using classes from the grid in
  the grid_item_width variable.

  Example:
    - {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endcomment %}

{% assign collection_index__product = forloop.index %}
{% assign remaining_length__product = collection_product_count__product | minus: collection_index__product %}

{% comment %}
  If there are more than three items left we want to put them in a 3
  or reverse 3 row

  3 row = 1 large product on the left, 2 small on the right
  reverse 3 row = 2 small products on the left, 1 large on the right
{% endcomment %}
{% if remaining_length__product > 3 %}
  {% assign is_three_row__product = true %}
{% endif %}

{% comment %}
  Put remaining items in a 2 row if necessary.
{% endcomment %}
{% if remaining_length__product < 4 and three_row_index__product > 2 %}
  {% assign is_three_row__product = false %}
{% endif %}

{% comment %}
  If the total number of products is divisible by 3, we will just use
  3 and reversed 3 item rows
{% endcomment %}
{% if divisible_by_three__product == 0 %}
  {% assign is_three_row__product = true %}
{% endif %}

{% comment %}
  If we set is_three_row__product to true based on the conditionals above.
{% endcomment %}
{% if is_three_row__product == true %}

  {% if three_row_index__product > 2 %}
    {% if is_reverse_row__product %}
      {% assign is_reverse_row__product = false %}
    {% else %}
      {% assign is_reverse_row__product = true %}
    {% endif %}
    {% assign three_row_index__product = 0 %}
  {% endif %}

  {% comment %}
    Assign grid classes for 3 rows and reverse 3 rows
  {% endcomment %}
  {% case three_row_index__product %}
    {% when 0 %}
      {% if is_reverse_row__product %}
        {%- assign width = 270 -%}
        {%- assign height = 190 -%}
        {% assign grid_item_width = 'grid__item--small one-whole reverse' %}
      {% else %}
        {%- assign width = 650 -%}
        {%- assign height = 480 -%}
        {% assign grid_item_width = 'grid__item--large one-whole medium--two-thirds large--two-thirds' %}
      {% endif %}
    {% when 1 %}
      {% if is_reverse_row__product %}
        {%- assign width = 270 -%}
        {%- assign height = 190 -%}
        {% assign grid_item_width = 'grid__item--small one-whole reverse' %}
      {% else %}
        {%- assign width = 270 -%}
        {%- assign height = 190 -%}
        {% assign grid_item_width = 'grid__item--small one-whole medium--one-third large--one-third' %}
      {% endif %}
    {% when 2 %}
      {% if is_reverse_row__product %}
        {%- assign width = 650 -%}
        {%- assign height = 480 -%}
        {% assign grid_item_width = 'grid__item--large one-whole medium--two-thirds large--two-thirds reverse clearfix' %}
      {% else %}
        {%- assign width = 270 -%}
        {%- assign height = 190 -%}
        {% assign grid_item_width = 'grid__item--small one-whole medium--one-third large--one-third clearfix' %}
      {% endif %}
  {% endcase %}

  {% if three_row_index__product == 0 %}
    <div class="grid__item collage-grid__row">
      <div class="grid">
  {% endif %}

  {% comment %}
    Wrap one-third items in reversed groups, so they can be floated properly without changing the order of products in the grid.
  {% endcomment %}
  {% if is_reverse_row__product and three_row_index__product == 0 %}
    <div class="grid__item collage-grid__reverse--wrapper one-whole medium--one-third large--one-third">
      <div class="grid">
  {% endif %}

  {% comment %}Product Grid Item{% endcomment %}
  {% include 'product-grid-item' %}

  {% comment %}
    Close out wrapper div for one-third reverse items
  {% endcomment %}
  {% if is_reverse_row__product and three_row_index__product == 1 %}
      </div>
    </div>
  {% endif %}

  {% if three_row_index__product == 2 %}
        </div>
      </div>
    <div class="grid__row-separator"></div>
  {% endif %}

  {% comment %}
    Increment the group of three counter
  {% endcomment %}
  {% if three_row_index__product <= 2 %}
    {% assign three_row_index__product = three_row_index__product | plus: 1 %}
  {% endif %}

  {% continue %}
{% endif %}

{% if collection_product_count__product == 1 %}
  {% comment %} Set full width when there is 1 product in a collection by making
  `grid_item_width` an empty string {% endcomment %}
  {% assign grid_item_width = '' %}
  {%- assign image_size = '990x' -%}
  {%- assign width = 990 -%}
  {%- assign height = 630 -%}
  {% include 'product-grid-item' %}
  {% break %}
{% else %}
  {% comment %} Set item with to half if it isn't in a 3 row. {% endcomment %}
  {% assign grid_item_width = 'one-whole medium--one-half large--one-half' %}
  {%- assign image_size = '480x' -%}
  {%- assign width = 360 -%}
  {%- assign height = 270 -%}
  {% include 'product-grid-item' %}

  {% comment %}add grid row separator between the last two rows{% endcomment %}
  {% if remaining_length__product == 2 %}
    <div class="grid__row-separator"></div>
  {% endif %}

  {% comment %} We still need to increment the three_row_index_product {% endcomment %}
  {% if three_row_index__product <= 2 %}
    {% assign three_row_index__product = three_row_index__product | plus: 1 %}
  {% endif %}
{% endif %}

 

0 Likes
Highlighted
Trailblazer
265 68 75

Hi @I_like_tea 

Thanks for the share code.
Please paste below code in product-grid-collage.liquid file.

<!-- /snippets/product-grid-item.liquid -->
{% comment %}

  This snippet is used to showcase each product during the loop,
  'for product in collection.products' in collection.liquid.

  A liquid variable (grid_item_width) is set just before the this
  snippet is included to change the size of the container.
  Once the variable is set on a page, all future instances of this
  snippet will use that width. Overwrite the variable to adjust this.

  Example
    - assign grid_item_width = 'large--one-quarter medium--one-half'

{% endcomment %}

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% unless width %}
  {%- assign width = 310 -%}
{% endunless %}
{% unless height %}
  {%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}

{%- assign variant = product.selected_or_first_available_variant -%}

{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
  <div class="grid-product__wrapper">
    <div class="grid-product__image-wrapper">
      <a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
        {% if featured_image.src== blank %}
          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
        {% else %}
          {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
          <div id="{{ img_wrapper_id }}" class="product--wrapper">
            <div style="padding-top:100%;">
              <img class="product--image lazyload"
                   data-src="{{ img_url }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ featured_image.alt | escape }}"
                   data-image>
            </div>
          </div>
          <noscript>
            <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
          </noscript>
        {% endif %}
      </a>
      {% if sold_out %}
        <div class="grid-product__sold-out">
          <p>{{ 'products.product.sold_out_html' | t }}</p>
        </div>
      {% elsif on_sale %}
        <div class="grid-product__on-sale">
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
        </div>
      {% endif %}
    </div>

    <a href="{{ product.url | within: collection }}" class="grid-product__meta">
      <span class="grid-product__title">{{ product.title }}</span>
      <span class="grid-product__price-wrap">
        <span class="long-dash">—</span>
        <span class="grid-product__price">
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {% else %}
             <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          {% endif %}
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>

        {%- if product.price_varies == false and variant.unit_price_measurement -%}
          {%- capture unit_price_separator -%}
            <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
          {%- endcapture -%}

          {%- capture unit_price_base_unit -%}
            <span>
              {%- if variant.unit_price_measurement.reference_value != 1 -%}
                {{- variant.unit_price_measurement.reference_value -}}
              {%- endif -%}
              {{ variant.unit_price_measurement.reference_unit }}
            </span>
          {%- endcapture -%}
          <span class="product-unit-price">
            <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
            <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
          </span>
        {%- endif -%}
      </span>
      {% if section.settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}
    </a>
  </div>
</div>
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Trailblazer
265 68 75

Hi @I_like_tea 

also this code add-in theme.css file
1. Go to Online Store->Theme->Edit code
2. Assets->/theme.scss.liquid->paste below code at the bottom of the file.

.grid-collage .grid-product__image-link {
    padding: 0;
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Tourist
8 0 0

Hi @Vikas_Chovatiya,

Unfortunately the solution doesn't work, as you can see on the website it only duplicated some products and the padding code did not remove the pink background.

0 Likes
Highlighted
Trailblazer
265 68 75

HI @I_like_tea 

Sorry for the late replay 
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product--wrapper {
    max-width: 100% !important;
}
.product--image {
    max-width: 100% !important;
    max-height: inherit !important;
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Highlighted
Tourist
8 0 0

Thank you very much for your help @Vikas_Chovatiya !

0 Likes