Liquid Code Customization
To make price dynamically change when variants are switched
In assets/product-card.js, Find updatePrice(html) { const priceContainer = this.querySelectorAll(`product-price [ref='priceContainer']`)[1]; const newPriceElement = html.querySelector(`product-price [ref='priceContainer']`); if (newPriceElement && ...
Change the blog to 3 - 4 grid column
In main-blog.liquid, change the entire code to the followings: <script src="{{ 'blog-posts-list.js' | asset_url }}" type="module" fetchpriority="low" ></script> {% liquid if section.settings.background_color != blank render 'contrast-override', ...
Fix header menu flash before clicking menu items
Add the following in header-menu.js to: deactivate(event) { if (!(event.target instanceof Element)) return; // Guard against spurious pointerleave caused by DOM node replacement // (e.g. mega-menu content hydrating in via Section Rendering API ...
Make blog post full width
In blog post css, add the followings: .blog-post-content { max-width: 100%; }
Align the blog post comment container to left
In the blog post css, add the following: .blog-post-comments-container { margin-left: 0px; }
Change inventory status for "continue to sell when out of stock" product to "pre-order"
In the {% product-inventory.liquid %} block, replace this section: else if inventory_policy == 'continue' assign status = 'in_stock' assign translation_key = 'content.inventory_in_stock' else With: else if inventory_policy == 'continue' assign status ...
I want to show mobile image or video in slideshow for mobile screen
In _slide.liquid, replace the liquid to below: {% assign block_settings = block.settings %} {%- assign block_index = section.blocks | find_index: 'id', block.id -%} {%- assign section_index = section.index -%} {% liquid assign has_mobile_image = ...
Add vendor info in predictive search
In resource-card.liquid, find <div class="resource-card__content"> add the followings: <span style="font-size: 9px; text-transform: uppercase;">{{- resource.vendor -}}</span> <p class="resource-card__title{% if style == 'overlay' %} h5{%else %} ...
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 = ...
Change all product card title to one font
in base.css, insert the following at the end of the css. .resource-card__title { font-family: 'Instrument Serif', serif !important; font-size: 18px !important; }
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">{{ ...
Show more payment icons in the footer
In payment-icons.liquid, replace {%- for type in shop.enabled_payment_types -%} to {% assign enabled_payment_types = 'fpx,visa,master,grabpay,touchngo,boost,shopeepay,maybank' | remove: ' ' | split: ',' %} {% for type in enabled_payment_types %} See ...
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; }
Variant image looks blur. How to increase variant image resolution?
Edit theme code, Snippets > swatch.liquid, adjust the width as below assign swatch_image_url = swatch.image | image_url: width: 200
Hide card in carousel for those placeholder
In base.css, paste this at the very end of css. .section-carousel .card:has([class*="placeholder"]) { display: none !important; }
Hide certain section when metafield is empty
In theme.liquid, copy the following styling, replacing neccessary: {% comment %} Hide carousel.liquid when no value {% endcomment %} {% if collection.metafields.product.inspiration_1 == blank %} <style> ...
Hide parent link that consist of 0 products
In mega-menu.liquid, add the followings: {% for link in parent_link.links %} {% liquid # Check if this child link has any visible grandchildren with products assign has_visible_items = false if link.links.size > 0 for childLink in link.links if ...
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 ...
To achieve non-stackable policy list
In ~/blocks/footer-policy-list.liquid, replace with this. <ul class=" policy_list list-unstyled custom-typography {% if block.settings.font_size != "" %}custom-font-size{% endif %} " style="{% render 'typography-style', preset: 'custom', settings: ...
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 swatch-styles.liquid, 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 ...
Making policy pages full width
In base.css, add the following at the end of the file. .shopify-policy__container { max-width: 95% !important; } .shopify-policy__container h1 { text-align: left; padding-top: 30px; padding-bottom: 30px; }
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'); ...
Hide variants that is out of stock
Add the following in variant-main-picker.liquid {%- for product_option_value in product_option.values -%} {% # hide variants = 0 # %} {% if product_option_value.available == false %} {% continue %} {% endif %} {% # End hide variants = 0 # %} {% if ...
Change predictive search image to square
In predictive-search-products-list.liquid, search for "image_aspect_ratio:" and change all to 1 / 1 ratio.
Hide mega menu links that contain 0 product
Add the following in the mega-menu-list.liquid {% for childLink in link.links %} {% if link.type == 'collection_link' %} {% assign collection = link.object %} {% if collection.products_count > 0 %} {% assign break_after_modulo = forloop.index | ...
Next page