Guide: Fixing Theme Issues on Ella Shopify Theme Version 6.5.3
In the past few days, we released Ella Version 6.5.3, primarily focused on enhancing animations for the Ella theme. While this update brings significant improvements, it has also resulted in unintended issues due to changes in the theme section structure. As a result, several distinct issues have arisen.
We have promptly updated our Ella theme source on Themeforest. However, if you prefer not to update the entire theme, you have the option to follow the instructions provided below to resolve the issues independently. Should you encounter any challenges during this process, our support team is readily available to assist you. Please feel free to reach out if you require further guidance.
| Note: Before you make the changes, please backup your theme source |
1. When using the Header Nav - Hamburger Slide-In, the language and currency options below the mobile view do not work:
Add the provided code below to the 'header-navigation-hamburger.liquid' file at the same position as our sample image:
| <script> var appendPrependMenuMobile = function () { var headerLanguageCurrencyPC = $(".wrapper-language-currency"), headerLanguageCurrencyMB = $(".nav-currency-language"), headerSidebarLanguageCurrency = $(".halo-language-currency-sidebar .halo-sidebar-wrapper"); if (window.innerWidth < 1025) { headerLanguageCurrencyPC.appendTo(headerLanguageCurrencyMB); } else { headerLanguageCurrencyPC.appendTo(headerSidebarLanguageCurrency); } }; $(document).ready(function () { appendPrependMenuMobile(); }); $(window).on("resize", function () { appendPrependMenuMobile(); }); </script> |
- Before:
- After:
2. When using a long text logo, it overlaps on the Mobile Header:
Add the provided code below to the 'base.css' file at the same position as our sample image:
| word-wrap: break-word; |
- Before
- After
3. The Calculator Free Shipping Message error cannot calculate decimal numbers
Replace the provided code below to the 'free-shipping-message.js' file at the same position as our sample image:
| calculateProgress(cart) { const cartTotalPrice = parseInt(cart.total_price) / 100; const cartTotalPriceFormatted = cartTotalPrice.toFixed(2); const cartTotalPriceRounded = parseFloat(cartTotalPriceFormatted); let freeShipBar = Math.round((cartTotalPriceRounded * 100) / FreeShippingMeter.freeshipPrice); if (freeShipBar >= 100) { freeShipBar = 100; } const text = this.getText(cartTotalPriceFormatted, freeShipBar); const classLabel = this.getClassLabel(freeShipBar); this.setProgressWidthAndText(freeShipBar, text, classLabel); } |
- Before
- After
4. Cannot add Gift Wrap on Sidebar Cart + Page Cart:
4.1. Replace the provided code below to the 'theme.js' file at the same position as our sample image:
| updateGiftWrapper: function() { let debounce $('#gift-wrapping').off('click').on('click', (event) => { event.stopPropagation() event.preventDefault() const $target = $(event.currentTarget); clearTimeout(debounce) debounce = setTimeout(() => { const variantId = event.target.dataset.giftId; Shopify.addItem(variantId, 1, $target, () => { Shopify.getCart((cart) => { halo.updateSidebarCart(cart); }); }); }, 250) }); $('#cart-gift-wrapping').off('click').on('click', (event) => { event.stopPropagation() event.preventDefault() var $target = $(event.currentTarget), text = $target.attr('data-adding-text'); $target.text(text); clearTimeout(debounce) debounce = setTimeout(() => { const variantId = event.target.dataset.giftId; Shopify.addItem(variantId, 1, $target, () => { Shopify.getCart((cart) => { halo.updateCart(cart) }); }); }, 250) }); }, |
- Before
- After
4.2. Replace the provided code below to the 'global.js' file at the same position as our sample image:
| Shopify.addItem = function(variant_id, quantity, $target, callback, input = null) { var quantity = quantity || 1; const $thisForm = $target.closest('form'); const $properties = $thisForm.find('[name^="properties"]'); let dataForm = 'quantity=' + quantity + '&id=' + variant_id; if ($properties.length) $properties.each((index, element) => {dataForm = `${dataForm}&${$(element).attr('name')}=${$(element).val()}`}) var params = { type: 'POST', url: '/cart/add.js', data: dataForm, dataType: 'json', success: function(line_item) { if ((typeof callback) === 'function') { callback(line_item); } else { Shopify.onItemAdded(line_item); } }, error: function(XMLHttpRequest, textStatus) { var message = window.cartStrings.addProductOutQuantity2; if (input.length > 0) { var maxValue = parseInt(input.attr('data-inventory-quantity')); message = getInputMessage(maxValue) input.val(maxValue) } Shopify.onError(XMLHttpRequest, textStatus, message); target?.classList.remove('is-loading'); } }; $.ajax(params); } |
- Before
- After
5. When the Filter Title is not "More Filters", the [Sidebar] Filter block will not work:
5.1. Add the provided code below to the 'en.default.schema.json' file at the same position as our sample image:
| "label__8": "Filter Label All Tags", "info__5": "(When you use a name other than the label 'More filters,' please enter the label name according to the name you've set in this setting.)" |
- Before:
- After:
5.2. Add the provided code below to the 'main-collection-product-grid.liquid' file at the same position as our sample image:
| { "type": "text", "id": "filter_label_all", "label": "t:sections.main-collection-product-grid.settings.filter.label__8", "info": "t:sections.main-collection-product-grid.settings.filter.info__5" }, |
- Before:
- After:
5.3. Replace the provided code below to the 'collection-sidebar.liquid' file at the same position as our sample image:
| {%- liquid assign filterLabel = filter.label | escape assign filterLabelAll = section.settings.filter_label_all | default: 'More filters' if filterLabel == filterLabelAll assign filter_hidden_tag_list = section.settings.filter_hidden_tag_list | split: ',' endif -%} {%- if filterLabel == filterLabelAll and filter_by_tags.size > 0 -%} |
- Before:
- After:
6. When quickly clicking the quantity button in Sidebar Cart and Cart Page, there is a delay, leading to a situation where the update cannot be made in time, causing the error:
6.1. Replace the provided code below to the 'global.js' file at the same position as our sample image:
| if (typeof this.changeCart == 'number') {clearTimeout(this.changeCart)}; this.changeCart = setTimeout(() => {if ($target.matches('.btn-quantity')) this.input.dispatchEvent(this.changeEvent)}, 350); |
- Before:
- After:
7. On the collection page, sorting dropdown overlayed by product image:
7.1. Add the provided code below to the 'global.js' file at the same position as our sample image:
| .toolbar { z-index: 6; } |
- Before:
- After:
8. Fixing the issue with Sticky Header on Mobile doesn't show up when the setting in the theme editor has been enabled:
8.1. Add the provided code below to the 'base.css' file at the same position as our sample image:
| position: sticky !important; |
- Result:
8.2. Then, replace the provided code below to the 'toolbar.js' file at the same position as our sample image:
| if (windowWidth < 1025) { if (scrollTop > offsetScroll) { requestAnimationFrame(this.showSticky.bind(this)); if(document.querySelector('.section-header-navigation').classList.contains('shopify-section-header-show')){ var height = document.querySelector('.header-mobile').offsetHeight; this.style.top = `${height}px`; } else if(document.querySelector('.section-header-mobile').classList.contains('shopify-section-header-hidden')) { this.style.top = 0; } } else{ requestAnimationFrame(this.hideSticky.bind(this)); } } |
- Before
- After
All done. Please contact us at https://halosoft.ticksy.com/ if you cannot follow our instruction.
Thank you so much!
HaloThemes Team