Hamburger and search not opening up on any page

[DOUGLDN]

Hi there,

I have an issue with www.giftedfromireland.com where the hamburger and search is not working - it looks like a JS issue - can anyone point out how to fix the error.

Thanks in advance!

[Tira]

Hi, @DOUGLDN.

Tira here to help.

Thanks for your store URL. I can replicate the issue that you’re seeing here. It looks like the theme you're using is one of our free Shopify themes. Have you or someone made any customizations to your theme? 

If you have, then I recommend rolling back your theme to an older version. Rolling back your theme allows you to roll-back the code of your theme to a previous date and time and revert any changes you’ve made on your theme’s code. You can check out how to roll-back your theme to an older version in our help docs here: Roll back to an older version of your theme.  

If you haven’t yet already, I recommend switching to a different theme, and then switching back to your original theme to see if you can replicate the issue. 

To switch to a different theme, you can follow these steps:

1. Login to your Shopify Admin
2. Click on Online Store > Themes
3. Click on Actions > Publish to publish a different theme 
4. Once you’ve published your theme, click on Actions > View next to the theme name to view your published theme on your store
5. When you want to switch back to your old theme, repeat step 3 with your original theme. Your old changes will still remain.

Check out our help doc with the steps to publish your theme here: Publishing your theme.

When did you notice this happening? What's the JS error that you're seeing? 

[DOUGLDN]

Hi there,

I reverted back to all the original pieces on my code and the JS error still causing a conflict on the header.

Starting again with the theme is not an option.

Ant other ideas which is causing the conflict on the JS code header?

Thanks,
Sean

[tim]

Check your theme.liquid layout file.

Yours outputs the following code:

    var theme = {
      strings: {
        addToCart: "Add to basket",
        soldOut: "Sold out",
        unavailable: "Unavailable",
        regularPrice: "Regular price",
        sale: "Sale",
        showMore: "Show More",
        showLess: "Show Less",
        addressError: "Error looking up that address",
        addressNoResults: "No results for that address",
        addressQueryLimit: "You have exceeded the Google API usage limit. Consider upgrading to a \u003ca href=\"https:\/\/developers.google.com\/maps\/premium\/usage-limits\"\u003ePremium Plan\u003c\/a\u003e.",
        authError: "There was a problem authenticating your Google Maps account.",
        newWindow: "Opens in a new window.",
        external: "Opens external website.",
        newWindowExternal: "Opens external website in a new window.",
        quantityMinimumMessage: "Quantity must be 1 or more"
      },
      moneyFormat: "\u003cspan class='money'\u003e€{{ amount }}"
    }

Mine looks like:

    var theme = {
      breakpoints: {
        medium: 750,
        large: 990,
        widescreen: 1400
      },
      strings: {
        addToCart: "Add to cart",
        soldOut: "Sold out",
        unavailable: "Unavailable",
        regularPrice: "Regular price",
        salePrice: "Sale price",
        sale: "Sale",
        fromLowestPrice: "from [price]",
        vendor: "Vendor",
        showMore: "Show More",
        showLess: "Show Less",
        searchFor: "Search for",
        addressError: "Error looking up that address",
        addressNoResults: "No results for that address",
        addressQueryLimit: "You have exceeded the Google API usage limit. Consider upgrading to a \u003ca href=\"https:\/\/developers.google.com\/maps\/premium\/usage-limits\"\u003ePremium Plan\u003c\/a\u003e.",
        authError: "There was a problem authenticating your Google Maps account.",
        newWindow: "Opens in a new window.",
        external: "Opens external website.",
        newWindowExternal: "Opens external website in a new window.",
        removeLabel: "Remove [product]",
        update: "Update",
        quantity: "Quantity",
        discountedTotal: "Discounted total",
        regularTotal: "Regular total",
        priceColumn: "See Price column for discount details.",
        quantityMinimumMessage: "Quantity must be 1 or more",
        cartError: "There was an error while updating your cart. Please try again.",
        removedItemMessage: "Removed \u003cspan class=\"cart__removed-product-details\"\u003e([quantity]) [link]\u003c\/span\u003e from your cart.",
        unitPrice: "Unit price",
        unitPriceSeparator: "per",
        oneCartCount: "1 item",
        otherCartCount: "[count] items",
        quantityLabel: "Quantity: [count]",
        products: "Products",
        loading: "Loading",
        number_of_results: "[result_number] of [results_count]",
        number_of_results_found: "[results_count] results found",
        one_result_found: "1 result found"
      },
      moneyFormat: "${{amount}} ",
      moneyFormatWithCurrency: "\u003cspan class=money \u003e${{amount}} AUD\u003c\/span\u003e",
      settings: {
        predictiveSearchEnabled: true,
        predictiveSearchShowPrice: false,
        predictiveSearchShowVendor: false
      },
      stylesheet: "//cdn.shopify.com/s/files/1/1105/5070/t/81/assets/theme.css?v=13661997104517498723"
    }

So at least your code misses breakpoints 

Do not forget that you can roll back changes to each theme file separately.