BROOKLYN THEME getting 4 products per row in collection pages

Solved
Highlighted
Explorer
49 2 0

hi guys, 

i have 3 products per row , but i would love to get 4 per row Screen Shot 2020-04-10 at 2.27.09 AM.png

 

any help would be appreciated , 

site URL : https://nearxyou.com/

pw : amr

0 Likes
Highlighted
Shopify Partner
380 28 48

This is an accepted solution.

@AMR_MiRO 

It requires coding skills. If you have knowledge about Shopify code then you need to visit below file and replace class with the given new class

File path:
snippets/product-grid-item.liquid

Find the below class name and replace with a new class name.
Class : large--one-third

New Class: large--one-quarter

Still, if you face the issue then please let me know.

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com for any queries
 - Want to modify or custom changes on store hire me .
1 Like
Highlighted
Explorer
49 2 0

thanks for your reply bro 

unfortunately it didnt work :(

0 Likes
Highlighted
Explorer
49 2 0

This is an accepted solution.

i did it !

 

like you said , but in different column 

find  collection-grid-item.liquid

and change as you said 

and also in this  collection-template.liquid

 

0 Likes
Highlighted
Shopify Partner
380 28 48

@AMR_MiRO 

Okay, I have assumed the file name by inspecting the live site, but I am happy that you get your solution. If you love the solution then please put like on my above comment.

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com for any queries
 - Want to modify or custom changes on store hire me .
0 Likes
Highlighted
Explorer
49 2 0

thanks for your help :)

also if i can get a code to put a full width collection image in the top header of each collection ?

0 Likes
Highlighted
Shopify Partner
380 28 48

@AMR_MiRO 

Well, it completely depends on a theme if theme developer has added an option for collection banner image then you can display it. Otherwise, I have developed a code.

As you are on the Brooklyn theme then maybe they have collection template "collection.image". You can use it, it has a collection image option.

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com for any queries
 - Want to modify or custom changes on store hire me .
0 Likes
Highlighted
Explorer
49 2 0

yes but its not wide in the header

0 Likes
Highlighted
Explorer
49 2 0

<!-- /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 50 -%}
<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 = 'small--one-half medium--one-half large--one-quarter' -%}
{%- 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>

0 Likes
Highlighted
Explorer
49 2 0

Screen Shot 2020-04-11 at 3.30.31 AM.png

this is how the collection image appears so really missy 

i want it to be less height and full width 

appreciate your help

0 Likes