Change number of products on collection page for Emerge theme

motherdough
Tourist
4 0 4

Hello, please I need to change the number of products showing on my collection page to like 4 or 5 on a row and make the product display smaller. This is a link to my collections page

https://modosg.myshopify.com/collections/all

Code below(if I am correct)

 

{%- liquid
assign no_products_t = 'collections.no_products_feedback' | t
assign filter_feedback_t = 'collections.filter_feedback' | t
assign no_products_link_t = 'collections.no_products_link' | t
assign skip_link_t = 'collections.skip_link' | t

assign products_per_row_desktop = section.settings.products-per-row--desktop
assign products_per_row_mobile = section.settings.products-per-row--mobile

comment
"only 50 products can be grabbed at a time, so best to not make
(number_of_rows * products_per_row_desktop) > 50"
endcomment
assign number_of_rows = section.settings.number-of-rows

comment
"Count number of promotion blocks so we can paginate accordingly"
endcomment
assign promo_grid_blocks = 0
-%}

{%- for block in section.blocks -%}
{%- liquid
assign only_on_collection = collections[block.settings.only-on-collection]
if only_on_collection != blank and collection.id != only_on_collection.id
continue
endif

assign text_color = block.settings.text-color
assign bg_color = block.settings.background-color
assign column_number = block.settings.column-number
assign darken_image = block.settings.darken-image
assign description = block.settings.description
assign image = block.settings.image
assign image_size = block.settings.image-size
assign link_text = block.settings.link-text
assign link_url = block.settings.link-url
assign overline = block.settings.overline
assign promo_width = block.settings.promo-width
assign promo_grid_blocks = promo_grid_blocks | plus: promo_width
assign row = block.settings.row-number
assign title = block.settings.title

comment
"don't allow overflow outside of main grid"
endcomment

if column_number > products_per_row_desktop
assign column_number = products_per_row_desktop
endif

assign allowed_width = products_per_row_desktop | plus: 1 | minus: column_number
if allowed_width == 0
assign allowed_width = 1
endif
if promo_width > allowed_width
assign promo_width = allowed_width
endif

assign text_exists = false
if overline != blank or title != blank or description != blank or link_text != blank
assign text_exists = true
endif

if promo_width == products_per_row_desktop
assign banner_promo = true
assign text_width = 'large'
else
assign banner_promo = false
assign text_width = 'medium'
endif

assign cover_link = false
if link_text == blank and link_url != blank and description == blank
assign cover_link = true
endif

assign cover_image = false
if image_size == 'aspect-ratio' and image
assign cover_image = false
else
assign cover_image = true
endif

comment
"`unless promo_grid_coords contains coords` checks for multiple
promos trying to be placed in the same place on the grid"
endcomment

capture promo_grid_coords
unless promo_grid_coords == blank
echo promo_grid_coords | append: '|'
endunless
assign coords = row | append: ',' | append: column_number
comment
"check for duplicate coordinates and don't render them"
endcomment
unless promo_grid_coords contains coords
echo coords
else
continue
endunless
endcapture

capture promo_widths
unless promo_widths == blank
echo promo_widths | append: '|'
endunless
echo promo_width
endcapture
-%}

{%- capture promo_html -%}
{%- unless promo_html == blank -%}
{{- promo_html -}}|
{%- endunless -%}

<!-- <div
class="featured-content--root"
style="{% render 'framework--background-colors', bg_color: bg_color %}"
data-text-color="{{ text_color }}"
data-banner-promo="{{ banner_promo }}"
data-box-around-text="false"
data-container-width="6"
data-cover-image="{{ cover_image }}"
data-cover-image-mobile="true"
data-darken-image="{{ darken_image }}"
data-has-image="{% if image %}true{% else %}false{% endif %}"
data-mobile-overlay="true"
data-promo-width="{{ promo_width }}"
data-spacing-above="false"
data-spacing-below="false"
data-text-exists="{{ text_exists }}"
data-text-position="center"
data-text-width="{{ text_width }}"
> -->
{% if cover_link %}
<a href="{{ link_url }}">
{% endif %}

<!-- <div class="featured-content--container">
{% if image %}
<div class="featured-content--image">
{%
render "framework--image",
image: image,
full_width: true,
cover: cover_image,
cover_mobile: true,
darken: darken_image,
darken_mobile: darken_image
%}
</div> -->
{% endif %}

{% if text_exists %}
<!--<div class="featured-content--text">
<div class="featured-content--text-container" data-container="block">
{% if overline != blank %}
<h2 class="featured-content--overline" data-item="overline">
{{ overline | escape }}
</h2>
{% endif %}
{% if title != blank %}
<h3 class="featured-content--title" data-item="section-heading">
{{ title | escape }}
</h3>
{% endif %}

{% if description != blank %}
<div class="featured-content--description" data-item="rte-content">
{{ description }}
</div>
{% endif %}

{% if link_text != blank %}
<div class="featured-content--link" data-item="block-link">
<a href="{{ link_url }}">
{{ link_text }}
</a>
</div>
{% endif %}
</div>
</div>
{% endif %}

</div>

{% if cover_link %}
</a>
{% endif %}

</div>-->

{%- endcapture -%}
{%- endfor -%}

{%- liquid
assign blocks_per_page = products_per_row_desktop | times: number_of_rows
assign products_per_page = blocks_per_page | minus: promo_grid_blocks

assign promo_grid_coords_arr = promo_grid_coords | split: '|'
assign promo_widths_arr = promo_widths | split: '|'
assign promo_html_arr = promo_html | split: '|'
-%}

<div
class="collection--body--root"
id="collection-root"
data-section-id="{{ section.id }}"
data-section-type="collection"
data-container="section"
data-max-columns="{{ products_per_row_desktop }}"
data-url="{{ collection.url }}"
>
<div class="collection--body--spinner" style="display:none;" data-container="block">
{% render 'framework--loading-spinner' %}
</div>

{% paginate collection.products by products_per_page %}

{% if paginate.pages > 1 %}
<a data-item="a11y-button" href='#collection-pagination'>
{{ skip_link_t }}
</a>
{% endif %}

<div
class="collection--body--grid"
data-container="panel"
data-columns="{{ products_per_row_desktop }}"
data-mobile-columns="{{ products_per_row_mobile }}"
>
{% if collection.products_count > 0 %}
{%- liquid
assign current_block_num = 1

for product in collection.products
assign current_row = current_block_num | divided_by: products_per_row_desktop
assign current_column = current_block_num | modulo: products_per_row_desktop

comment
"last column condition"
endcomment

if current_column == 0
assign current_column = products_per_row_desktop
else
assign current_row = current_row | plus: 1
endif

assign current_coords = current_row | append: ',' | append: current_column

if promo_grid_coords_arr contains current_coords
for promo_grid_coords in promo_grid_coords_arr
if promo_grid_coords == current_coords
assign promo_arr_index = forloop.index0
break
endif
endfor

echo promo_html_arr[promo_arr_index]

comment
"track what we've rendered for end of the grid condition"
endcomment

capture indexes_accessed
unless indexes_accessed == blank
echo indexes_accessed | append: ','
endunless
echo promo_arr_index
endcapture

comment
"need to keep track of promos width, and how that will change where we are on the grid"
endcomment

assign current_promo_width = promo_widths_arr[promo_arr_index] | plus: 0
assign current_block_num = current_block_num | plus: current_promo_width

comment
"check if next block is a promo"
endcomment

assign next_row = current_block_num | divided_by: products_per_row_desktop
assign next_column = current_block_num | modulo: products_per_row_desktop
if next_column == 0
assign next_column = products_per_row_desktop
else
assign next_row = next_row | plus: 1
endif

assign next_coords = next_row | append: ',' | append: next_column

comment
"if we need to render the product html later, due to consecutive promos"
endcomment

if promo_grid_coords_arr contains next_coords
capture pending_products_to_render
unless pending_products_to_render == blank
echo pending_products_to_render | append: '|'
endunless

render 'framework--product--item', product: product, unique_handle: 'collection', section_id: section.id
endcapture

continue
endif

endif

comment
"render stored products if they've been previously skipped"
endcomment

unless pending_products_to_render == blank
assign pending_products_to_render_arr = pending_products_to_render | split: '|'
for pending_product in pending_products_to_render_arr
echo pending_product
assign current_block_num = current_block_num | plus: 1
endfor
assign pending_products_to_render = blank
endunless

render 'framework--product--item', product: product, unique_handle: 'collection', section_id: section.id

assign current_block_num = current_block_num | plus: 1
assign indexes_accessed_arr = indexes_accessed | split: ","

comment
"condition where promo is placed at the end of the grid"
endcomment

if products_per_page == forloop.index and promo_html_arr.size > indexes_accessed_arr.size
assign indexes = promo_html_arr.size | minus: 1
for i in (0..indexes)
if indexes_accessed_arr contains i
continue
elsif promo_grid_coords_arr[i] contains number_of_rows
echo promo_html_arr[i]
endif
endfor
endif

endfor
-%}

{% elsif current_tags == blank %}
<div class="collection--body--empty" data-container="block">
<p data-item="paragraph">
{{ no_products_t }}
</p>
<a target="_blank" href="/admin/products" data-item="block-link">
<div>{{ no_products_link_t }}</div>
</a>
</div>

{% else %}
<div class="collection--body--filter-feedback" data-container="block">
<p data-item="paragraph">
{{ filter_feedback_t }}
</p>
</div>

{% endif %}
</div>

<div
class="collection--body--pagination"
id="collection-pagination"
data-container="block"
>
{%- if paginate.pages > 1 -%}
{%-
render 'framework--pagination',
paginate: paginate,
view: 'collection'
-%}
{%- endif -%}
</div>

{% endpaginate %}

</div>

{% schema %}
{
"name": "Collection grid",
"settings": [
{
"label": "Products per row (desktop)",
"id": "products-per-row--desktop",
"type": "range",
"min": 2,
"max": 8,
"step": 1,
"default": 4
},
{
"label": "Product per row (mobile)",
"id": "products-per-row--mobile",
"type": "radio",
"options": [
{ "value": "1", "label": "1" },
{ "value": "2", "label": "2" }
]
},
{
"label": "Amount of rows per page",
"id": "number-of-rows",
"type": "range",
"min": 2,
"max": 12,
"step": 1,
"default": 2
}
],
"blocks": [
{
"type": "promotion",
"name": "Promotion",
"settings": [
{
"id": "only-on-collection",
"label": "Only display for",
"type": "collection"
},
{
"type": "header",
"content": "Layout and Color"
},
{
"label": "Row",
"id": "row-number",
"type": "range",
"min": 1,
"max": 12,
"step": 1,
"default": 2
},
{
"label": "Column",
"id": "column-number",
"type": "range",
"min": 1,
"max": 4,
"step": 1,
"default": 1
},
{
"label": "Width",
"id": "promo-width",
"type": "range",
"min": 1,
"max": 4,
"step": 1,
"default": 2
},
{
"id": "background-color",
"label": "Background color",
"type": "select",
"options": [
{ "label": "None", "value": "none" },
{ "label": "Light grey", "value": "light" },
{ "label": "Dark", "value": "dark" },
{ "label": "Accent", "value": "accent" }
],
"default": "light"
},
{
"id": "text-color",
"label": "Text color",
"type": "select",
"options": [
{ "label": "Dark", "value": "dark" },
{ "label": "Light", "value": "light" }
],
"default": "dark"
},
{
"id": "darken-image",
"label": "Darken image",
"type": "checkbox",
"default": true,
"info": "Can enhance text visibility"
},
{
"type": "header",
"content": "Content"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"id": "image-size",
"label": "Image size",
"type": "select",
"options": [
{ "label": "Fit to container", "value": "fit-to-container"},
{ "label": "Preserve aspect ratio", "value": "aspect-ratio" }
],
"default": "fit-to-container"
},
{
"id": "overline",
"label": "Overline",
"type": "text",
"default": "Overline text"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Grid promotion"
},
{
"type": "richtext",
"id": "description",
"label": "Text",
"default": "<p>Create eye-catching promos within collection grids to increase discoverability and accelerate conversions.</p>"
},
{
"type": "url",
"id": "link-url",
"label": "Link"
},
{
"type": "text",
"id": "link-text",
"label": "Link text",
"default": "Optional link"
}
]
}
]
}
{% endschema %}

Reply 1 (1)

motherdough
Tourist
4 0 4

Please can anyone help me here. This is urgent. Thanks