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
To align swatches to the left with 0 margin
In variant-picker-styles.liquid, add the followings: .variant-option--swatches overflow-list::part(list) { padding-inline: 0 !important; margin-inline: 0; }To show sku in predictive search
Find this block (around line where resource-card__content is): <p class="resource-card__title{% if style == 'overlay' %} h5{%else %} paragraph{% endif %}"> {{- resource.title -}} </p> {% if resource_type == 'product' %} {% render 'price', ...Sold-out swatch overlay to make them more visible
In variant-picker-styles.liquid, add the following before {% endstylesheet %} /* Dim unavailable non-swatch buttons */ .variant-option__button-label:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) { opacity: 0.4; ...Push the sold out variant to the end in variant picker
Go to variant-main-picker.liquid, search for {%- for product_option_value in product_option.values -%} and replace with: {%- assign available_option_values = product_option.values | where: "available", true -%} {%- assign unavailable_option_values = ...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">{{ ...
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' | ...