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 |
---|---|
217 | |
149 | |
60 | |
49 | |
46 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023