Shopify themes, liquid, logos, and UX
Hi all,
Somehow I'm having trouble with this this line of code:
<html class="js svg flexbox csstransforms" lang="nl" style="padding-bottom: 60px;"><head><script type="text/javascript"
Solved! Go to the solution
This is an accepted solution.
added this code in theme.js at the bottom of the file
$(window).load(function() { $('html').removeAttr('style'); });
Thanks,
Jasoliya_Brij for the solution! now I can continue my work!
Hi,
You can find this <html> tag in following file
1. Go to Online Store->Theme->Edit code
2. Layout->theme.liqud file
Check <html> tag and remove padding style.
Let me know if you can't
Thank you for the response, but somehow I can't find it in the code; or am I simply overlooking it? I've added the code from that page:
<!doctype html> <html class="no-js" lang="{{ shop.locale }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="theme-color" content="{{ settings.color_button }}"> <link rel="canonical" href="{{ canonical_url }}"> <script> // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script> {%- if settings.favicon != blank -%} <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png"> {%- endif -%} {%- capture seo_title -%} {%- if template == 'search' and search.performed == true -%} {{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }} {%- else -%} {{ page_title }} {%- endif -%} {%- if current_tags -%} {%- assign meta_tags = current_tags | join: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}} {%- endif -%} {%- if current_page != 1 -%} – {{ 'general.meta.page' | t: page: current_page }} {%- endif -%} {%- assign escaped_page_title = page_title | escape -%} {%- unless escaped_page_title contains shop.name -%} – {{ shop.name }} {%- endunless -%} {%- endcapture -%} <title>{{ seo_title | strip }}</title> {%- if page_description -%} <meta name="description" content="{{ page_description | escape }}"> {%- endif -%} {% include 'social-meta-tags' %} {{ 'theme.scss.css' | asset_url | stylesheet_tag }} <script> var theme = { strings: { addToCart: {{ 'products.product.add_to_cart' | t | json }}, soldOut: {{ 'products.product.sold_out' | t | json }}, unavailable: {{ 'products.product.unavailable' | t | json }}, regularPrice: {{ 'products.product.regular_price' | t | json }}, sale: {{ 'products.product.on_sale' | t | json }}, showMore: {{ 'general.filters.show_more' | t | json }}, showLess: {{ 'general.filters.show_less' | t | json }}, addressError: {{ 'sections.map.address_error' | t | json }}, addressNoResults: {{ 'sections.map.address_no_results' | t | json }}, addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }}, authError: {{ 'sections.map.auth_error_html' | t | json }}, newWindow: {{ 'general.accessibility.link_messages.new_window' | t | json }}, external: {{ 'general.accessibility.link_messages.external' | t | json }}, newWindowExternal: {{ 'general.accessibility.link_messages.new_window_and_external' | t | json }} }, moneyFormat: {{ shop.money_format | json }} } document.documentElement.className = document.documentElement.className.replace('no-js', 'js'); </script> {%- if template.directory == 'customers' -%} <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script> {%- endif -%} <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script> <script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script> <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script> {{ content_for_header }} {{ shop.metafields.loox["global_html_head"] }} </head> <body class="template-{{ template | split: '.' | first }}"> <a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a> <div id="SearchDrawer" class="search-bar drawer drawer--top" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}"> <div class="search-bar__table"> <div class="search-bar__table-cell search-bar__form-wrapper"> <form class="search search-bar__form" action="/search" method="get" role="search"> <input class="search__input search-bar__input" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}"> <button class="search-bar__submit search__submit btn--link" type="submit"> {% include 'icon-search' %} <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span> </button> </form> </div> <div class="search-bar__table-cell text-right"> <button type="button" class="btn--link search-bar__close js-drawer-close"> {% include 'icon-close' %} <span class="icon__fallback-text">{{ 'general.search.close' | t }}</span> </button> </div> </div> </div> <button onclick="topFunction()" id="myBtn" title="Naar boven">Top</button> {% section 'header' %} <div class="page-container" id="PageContainer"> <main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1"> {{ content_for_layout }} </main> {% section 'footer' %} <div id="slideshow-info" class="visually-hidden" aria-hidden="true"> {{- 'sections.slideshow.navigation_instructions' | t -}} </div> </div> <ul hidden> <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li> <li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li> </ul> {{ shop.metafields.loox["global_html_body"] }} </body> </html>
Send me your store url i have to check because i think this style added on page load by any app
I would gladly give you the URL; but I still have a password on it, do I give you the password and change it later? is it possible to pm me about it? thanks so much!
Done 🙂
This is an accepted solution.
added this code in theme.js at the bottom of the file
$(window).load(function() { $('html').removeAttr('style'); });
Thanks,
Jasoliya_Brij for the solution! now I can continue my work!
Hi, I'm having problems with a Text alert in the very bottom of mi template debut, here is mi web page link
its says
include usage is not allowed in this context
While I can see this might have solved the problem, it still seems unclear what script was adding this inline style in the first place. Trying to troubleshoot this right now and have the exact same issue of the inline style "padding-bottom: 60px;" being applied to the html element. It would be good to understand what is responsible for this. I'll post it here in case others are experiencing this issue. In the mean time if anyone else has insight here, please share.
@Remco112 wrote:added this code in theme.js at the bottom of the file
$(window).load(function() { $('html').removeAttr('style'); });Thanks,
Jasoliya_Brij for the solution! now I can continue my work!
Hey Everyone,
I believe Shopify adds this padding when the preview bar is visible. As soon as the preview bar is hidden the padding will disappear.
Hope that helps!
Actually this issue is arising when Preview Bar is visible in development themes and we hide the iframe somehow via css/js. The permanent solution is to hide the preview bar iframe and remove that completely like this:
User | RANK |
---|---|
75 | |
62 | |
62 | |
48 | |
44 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023