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 %}
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