Dawn
Make mega menu list scrollable (overflow)
At the header section, add the following css .mega-menu { max-height: 70vh; overflow-y: auto; }
Dynamic SKU on product page
In edit code, add the following liquid in Block. {% doc %} @prompt Create a dynamic SKU display that automatically updates when product variants are changed without requiring a page refresh. The SKU should be visible on the product page and change ...
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 | ...
To display currency notification in cart drawer
In cart-drawer.liquid: <div id="intl-cart-message" style="display: none; background:#730302; font-size: 12px; color: #ffffff; padding: 5px;"> We process all orders in Malaysian Ringgit (MYR) and you will be checkout using the most current exchange ...
Request for Quote button in product page
In customize theme, add custom liquid in default product template. Please the code as below. Note: the rule is when the price is '0'. {% if product.selected_or_first_available_variant.price == 0 %} <a href="https://wa.me/60162261314?text={{ 'I would ...
Display bundle items in product page
Add Metafields to Bundle Product Example metafield: Namespace & key: custom.bundle_items Type: List of Products (this is the ideal type for linking individual Shopify products) Assign Metafields to Bundle Product: Go to the bundle product in your ...
Hide menu link in mega menu when product counts = 0
In header-mega-menu.liquid, search {%- for childlink in link.links -%} Add the following below: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} Then, search {%- for grandchildlink in childlink.links ...
Hide products in all collection
Add this code in main-collection-product-grid.liquid: {% for product in collection.products %} {% unless product.metafields.seo.hidden.value == 1 %} {% render 'product-card', product: product %} {% endunless %} {% endfor %}
Enlarge swatch size in product page
In product page customize, add the following code in custom css: .swatch-input__input + .swatch-input__label { --swatch-input--size: 4rem !important; }
How to change another image for image banner in mobile view
In theme.liquid, add the followings: <style> #shopify-section-ID { @media (max-width: 768px) { .banner__media { content: url("image URL") !important; } } </style>
Full width text for image banner on desktop
In custom css, add the following: @media only screen and (min-width: 750px) { .banner--content-align-left.banner--desktop-transparent .banner__box { max-width: 100% !important; } }
Change displayed size images in Multicolumn section
At the multicolumn section, paste the following: .multicolumn-card__image-wrapper--third-width { width: 20% !important; }
Make copyright in the footer to center
From your Shopify admin dashboard, click on "Online Store" and then "Themes". Find the theme that you want to edit and click on "Actions" and then "Edit code". In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on ...
Display color swatches on collection page filter
Watch this video to see how to.
Make mega menu show only collection that consist of products
In header-mega-menu.liquid and header-drawer.liquid, add the followings: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} and {%- if grandchildlink.object and grandchildlink.object.products_count == ...
Insert product weight into product page
In custom liquid, insert the following: Weight: {% for variant in product.variants %}{{variant.weight | weight_with_unit }}{% endfor %}
Increase Page width
Go to base.css Find "narrow" Replace with "wide" e.g: .page-width--wide { max-width: 72.6rem; padding: 0; }
How to make image-with-text image smaller
In the custom css of the section, add in: .image-with-text .image-with-text__media-item.image-with-text__media-item--small img { height: 70%; width: 70%; margin: 15%; }
Change theme star rating color on product grids
In Edit Code, go to assets/component-rating.css Replace the following code: .rating-star::before { content: '★★★★★'; background: linear-gradient( 90deg, var(--color-rating-star) var(--percent), rgba(var(--color-foreground), 0.15) var(--percent) ); ...
Make a image banner section overlay with another at the top
In the image banner section, paste the following in custom css: @media screen and (min-width: 750px){ .banner { position: relative; z-index: -20; margin-top: -180px; padding-bottom: 50px; }}
Change background color for each column in a multicolumn
In the multicolumn section, add the following custom css: li:nth-child(1) .multicolumn-card__info { background-color: red; color: white; } li:nth-child(2) .multicolumn-card__info { background-color: green; color: white; } li:nth-child(3) ...
Remove the header and footer from a specific landing page
Add this code before </body> tag in your theme.liquid file: {% if page.handle == 'x' %} <style> .header, footer {display: none;} </style> {% endif %}
Different height for mobile and desktop hero image banner
1. In the section, custom CSS 2. Insert the following code: @media screen and (max-width: 749px) { .banner__media { padding-top: 10%; padding-bottom: 10% !important; } }
Removing country/selector from mobile drawer menu
From your Shopify admin dashboard, click on "Online Store" and then "Themes". Find the theme that you want to edit and click on "Actions" and then "Edit code". In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on ...
Add custom text to the cart drawer
1. Open cart-drawer.liquid file 2. Add html at the highlighted area >> <div class="message" style="background:#fff2d7;"> <p style="padding: 5px;">YOU ARE ELIGIBLE FOR THE DISCOUNT OF 50%</p> </div>
How to center multicolumn section header
Add the following code under your Custom CSS section inside your theme customiser: .title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper--no-top-margin { width: 100%; text-align: center; display: block; }
Add additional social media icons in the footer
Step 1 : Go to Online Store->Theme->Edit code->Config->settings_schema.json -> find where social media icons has been placed , as shown in the attached file, then insert the given code there: { "type": "text", "id": "social_linkedin_link", "label": ...
Remove menu arrows in header
From your Shopify admin dashboard, click on "Online Store" and then "Themes". Find the theme that you want to edit and click on "Actions" and then "Edit code". In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on ...
Reduce the text for newsletter signup in the footer
In the footer section, add in the following in custom css: .footer-block__newsletter .footer-block__heading, .newsletter-form__field-wrapper .field__label { font-size: 14px !important; }
Reduce menu link padding in the footer
In the footer section, add the following in the custom css: .list-menu__item--link { padding: 0px; }
Adjust footer layout to center on mobile view
In the footer section, add the following in the custom css: @media only screen and (max-width: 749px) { .list-menu__item { justify-content: center; } .footer-block.grid__item.scroll-trigger.animate--slide-in { text-align: center; } ...
Make multirow section full width
In the multi row section, add the following in the custom css: .multirow .multirow__inner { max-width: 100% !important; padding: 0px !important; }
Make collapsible content full width on desktop
In collapsible content section, add the following in customer css: @media screen and (min-width: 768px) { .collapsible-content { max-width: 120rem; margin: 0 auto; padding: 0px 3rem; } .collapsible-content-wrapper-narrow { margin-left: 0px; } }
Remove Slideshow buttons and border
In the slideshow section, add in the below in the custom css: .slider-button { display: none; } .slider-buttons { border: none; }
Change Sale Badge to % off
In card-product.liquid {% comment %} {{- 'products.product.on_sale' | t -}} {% endcomment %} {%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%} Save {{ ...
Remove the "pickup availability" section of product page
From your Shopify Admin, please go Online Store > Themes > Actions > Edit Code > Sections Search for pick_up_availability.liquid file Add the "comment" tag to the whole liquid file. add {% comment %} to the beginning of the file (first line) and add ...
Make Mega Menu Second Child Horizontal
In the header, add in custom css as below: @media screen and (min-width: 990px) { .header--top-center .mega-menu__list { display: flex; justify-content: left; flex-wrap: wrap; column-gap: 0; } #MegaMenu-Content-1 .mega-menu__list li:nth-child(2) ...
Highlighting one menu link with a distinct color
In the header, add in custom css as followings: a[href^="/pages/contact-us"] {color: #33ff00 !important;}
Make submenu without child horizontal
In the header, add in the following custom css: @media only screen and (min-width: 995px) { .mega-menu__list--condensed { display: flex !important; flex-wrap: wrap; } }
Next page