Shopify themes, liquid, logos, and UX
Store URL: https://bringmenz.myshopify.com/
Pass: geeray
Theme: Curswine
It may call "collection callout" (i am not sure sorry)
I have tried a lot from the theme setting. But failed to solve.When entering any collection page by default its showing 3 column view. I want the view in 4 columns as per the indication mark of below image. Thank you
yes, please share collection page code so i will check and update
<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
{% render 'facets', results: collection, enable_sorting: section.settings.enable_sorting %}
<div id="ProductGridContainer">
{%- if collection.products.size == 0 -%}
<div class="collection collection--empty" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div class="title-wrapper center">
<div class="title alert-danger alert">
{{ 'sections.facets.empty' | t }}
</div>
<a class="btn" href="{{ collection.url }}">{{ 'sections.facets.clear_all' | t }}</a>
</div>
</div>
{%- else -%}
<div class="collection">
<div class="loading-overlay">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<p class="collection-product-count light" role="status" style="display: none;">
{{ 'sections.facets.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
</p>
<ul id="product-grid" data-id="{{ section.id }}" class="row">
{% assign i = 1 %}
{%- for product in collection.products -%}
<li>
{% render 'product-card-grid', product_card_product: product, media_size: settings.image_ratio, product_count: {{i}}, show_secondary_image: settings.show_secondary_image, show_vendor: settings.show_vendor%}
{% assign i = i | plus: 1 %}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
</div>
{% schema %}
{
"name": "t:sections.main-collection-product-grid.name",
"class": "collection-grid-section",
"settings": [
{
"type": "range",
"id": "products_per_page",
"min": 8,
"max": 24,
"step": 4,
"default": 16,
"label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
},
{
"type": "header",
"content": "Sorting"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
}
]
}
{% endschema %}
User | RANK |
---|---|
137 | |
97 | |
79 | |
62 | |
61 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023