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
Add legend in the product card
Find <fieldset class="variant-option variant-option--buttons variant-option--swatches"> in variant-swatches.liquid, Add the following before the above: <!-- ADD THIS LEGEND --> <div class="swatch-legend"> <span class="swatch-legend__option-name">{{ ...Enable marquee in the header and footer
In marquee.liquid, change disabled to enabled. {% schema %} { "name": "t:names.marquee", "enabled_on": { "groups": ["header", "footer"] },Make collection list carousel image smaller
In collection-list.liquid, add the followings: { "type": "select", "id": "mobile_columns", "label": "t:settings.mobile_columns", "options": [ { "value": "1", "label": "t:options.one_number" }, { "value": "2", "label": "t:options.two_number" }, { ...Blog post setting - align left, and max width
In blog post customizer, add css: .blog-post-content { max-width: 100%; } h2 { font-size: 28px; } h3 { font-size: 22px; } .blog-post-content img { max-width: 350px; } .blog-post-comments-container { max-width: 100%; padding-top: 30px; } ...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; }
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' | ...