Design & Customization
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'); ...