Knowledge Base
General
Quick answers about our company, services, policies, and essential information you need.Shopify
Explore our Shopify Knowledgebase for helpful guides, tips, and best practices on creating and customizing your Shopify store.
Recent Articles
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; }
Popular Articles
Make all filter expand by default
Go to Online Store >Theme >Edit code. Search file theme.liquid Paste the below code before </body> of the file -> Save <script> window.addEventListener('DOMContentLoaded',(event)=>{ document.querySelectorAll('facet-filters-form ...Adding Custom Fonts to Shopify
Download font file and convert it to woff2 format Upload the font to asset file 3. add it to base.css 4. We can use for any element now.Increase width of policy pages
Go to Online Store > Theme > Edit code of your current theme Open your base.css theme file Paste the below code at the end of the css .shopify-policy__container { max-width: 95% !important; } .shopify-policy__container h1 { text-align: left; ...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 %} > {{- ...Create a Video Background section
Create the section snippet, create a new snippet named: video-background.liquid and copy the following liquid into it. {%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%} {%- assign img_url = block.settings.image | img_url: '1x1' | ...