Design & Customization
Make SALE menu item red
In header, add customer css as below .header-menu a[href="/collections/sale"] { color: #ff0000 !important; font-weight: 700; } .header-menu a[href="/collections/sale"]:hover { color: black !important; font-weight: 700; }
Hide collection card with 0 product in collection list
In collectionlist.liquid, add {% capture list_items %} {% for collection in section_collections limit: max_items %} {% if collection.products_count > 0 %} <div class="resource-list__item"> {% content_for 'block', type: '_collection-card', id: ...
Hide collection with 0 products in mega menu list
In mega-menu-list.liquid, add the followings: {% for childLink in link.links %} {% if childLink.object.products_count > 0 %} {% assign break_after_modulo = forloop.index | modulo: links_before_wrap %} <li {% if break_after_modulo == 0 and ...
Add padding and button style to popup link
Add CSS: .popup-link__button { background-color: #013a34; color: white; border-radius: 15px; } .popup-link__button:hover { background: black; color: white; } .popup-link__content--drawer { background-color: #e5e5e5; }
Make popup link form fillable on hero banner
In theme css, add the followings: .popup-link__content--drawer { background-color: #e5e5e5; z-index: 9999 !important; pointer-events: auto; }
Poplink Link form issue on hero section
In css, add the followings: .popup-link__content--drawer { z-index: 9999 !important; pointer-events: auto; }
Hide price when price is zero
In price.liquid, replace: {% render 'price', show_unit_price: true, product_resource: product_resource, show_sale_price_first: block_settings.show_sale_price_first %} with {% if product_resource != blank and product_resource.price > 0 %} {% render ...
Hide placeholder when image is N/A storewide
Add the following in base.css /* Hide all placeholder images storewide */ img[src*="placeholder"] { display: none !important; } /* For background placeholders */ [class*="placeholder"], .placeholder { display: none !important; background: none ...
Open external link in new tab
In theme.liquid, insert the following before </body> <script> document.addEventListener('DOMContentLoaded', function() { var links = document.links; for (let i = 0, linksLength = links.length; i < linksLength; i++) { if (links[i].hostname !== ...
Change swatch size on product card
In base.css, find @media screen and (min-width: 750px) { /* desktop values */ --max-swatch-size: 32px; --max-pill-size: 16px; --max-filter-size: 28px; --scaling-factor: 0.65; } } Change --max-swatch-size: 32px; to --max-swatch-size: 50px;
To make the mobile menu parent links bigger
In header-drawer.liquid, replace the followings: .menu-drawer__menu-item--parent { font-family: var(--menu-parent-font-family); font-style: var(--menu-parent-font-style); font-weight: var(--menu-parent-font-weight); font-size: ...
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 /* 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 ...
Enable SKU in predictive search
In predictive-search.js, add the following: const url = new URL(Theme.routes.predictive_search_url, location.origin); url.searchParams.set('q', searchTerm); url.searchParams.set('resources[limit_scope]', 'each'); ...