Shopify themes, liquid, logos, and UX
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 %}
Please can anyone help me here. This is urgent. Thanks
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024