Make collection list carousel/grid not show when there isn't any collection is chosen

Make collection list carousel/grid not show when there isn't any collection is chosen

In base.css, add the following in the end of the file
Quote
/* These are sections with placeholders that we don't want to have appear on the storefront when empty */
.shopify-section:has(.in-onboarding-state) {
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
}


In product.list.liquid, add the followings

<div
class="
section
section--{{ section.settings.section_width }}
color-{{ section.settings.color_scheme }}
section-resource-list
spacing-style
gap-style
Quote
{% if request.design_mode == false and section.settings.collection == blank %}
in-onboarding-state
{% endif %}
"
style="
{% render 'spacing-style', settings: section.settings %}
{% render 'gap-style', value: section.settings.gap %}
"


In featured-product.liquid, add the followings:

<div
class="
featured-product-section
section
section--full-width
color-{{ section.settings.color_scheme }}
Quote
{% if request.design_mode == false and section.settings.product == blank %}
in-onboarding-state

{% endif %}
"
>
<div
class="section-content-wrapper spacing-style size-style border-style"
style="

{% render 'spacing-style', settings: section.settings %}
--media-height: 100%;

{% if request.visual_preview_mode %}
--visual-preview--height: 100%;

{% endif %}
"

In collection-list.liquid, add the followings:

<div
class="
section
section--{{ section.settings.section_width }}
color-{{ section.settings.color_scheme }}
section-resource-list
spacing-style
gap-style

Quote
{% if section.settings.collection_list == blank and request.design_mode == false %}
in-onboarding-state

{% endif %}
"
style="

{% render 'spacing-style', settings: section.settings %}

{% render 'gap-style', value: section.settings.gap %}
"


In collection-links.liquid, add the followings:

<div class="section-background color-{{ section.settings.color_scheme }}"></div>
<div
class="section section--{{ section.settings.section_width }} color-{{ section.settings.color_scheme }} spacing-style
Quote
{% if section.settings.collection_list == blank and request.design_mode == false %}
in-onboarding-state
{% endif %}​
"
style="{% render 'spacing-style', settings: section.settings %}"
>

    • Related Articles

    • Make mega menu show only collection that consist of products

      In header-mega-menu.liquid and header-drawer.liquid, add the followings: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} and {%- if grandchildlink.object and grandchildlink.object.products_count == ...

    • Hide products in all collection

      Add this code in main-collection-product-grid.liquid: {% for product in collection.products %} {% unless product.metafields.seo.hidden.value == 1 %} {% render 'product-card', product: product %} {% endunless %} {% endfor %}

    • Make mega menu list scrollable (overflow)

      At the header section, add the following css .mega-menu { max-height: 70vh; overflow-y: auto; }

    • Make parent link clickable

      Snippets > header-mega-menu.liquid (l.19-25) Parentlink {%- assign parentlink = link.links[0] -%} <a href="{{ parentlink.url }}" title="{{ parentlink.title }}"> <span {%- if link.child_active %} class="header__active-menu-item" {% endif %} > {{- ...

    • Make Mega Menu Second Child Horizontal

      In the header, add in custom css as below: @media screen and (min-width: 990px) { .header--top-center .mega-menu__list { display: flex; justify-content: left; flex-wrap: wrap; column-gap: 0; } #MegaMenu-Content-1 .mega-menu__list li:nth-child(2) ...