Skip to content

Instantly share code, notes, and snippets.

@dpw1
dpw1 / header.liquid
Last active November 25, 2022 12:44
Dawn sticky header
{% comment %}
____ _ _ _ _ _
/ ___| | |_ (_) ___ | | __ _ _ | |__ ___ __ _ __| | ___ _ __
\___ \ | __| | | / __| | |/ / | | | | | '_ \ / _ \ / _` | / _` | / _ \ | '__|
___) | | |_ | | | (__ | < | |_| | | | | | | __/ | (_| | | (_| | | __/ | |
|____/ \__| |_| \___| |_|\_\ \__, | |_| |_| \___| \__,_| \__,_| \___| |_|
|___/
## Custom Dawn Sticky header by ezfycode.com
{% endcomment %}
@dpw1
dpw1 / base.css
Last active December 23, 2022 00:27
Dawn theme - center logo and enable hamburger menu on Desktop
@media (min-width: 990px) {
.header {
display: flex;
justify-content: space-between;
}
.header .header__inline-menu {
display: none;
}
@dpw1
dpw1 / ezfy-header-search.liquid
Last active March 7, 2023 18:48
EZFY Search
<div class=" EzfySearch EzfySearch--{{ search_type }} search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}" tabindex="-1">
{%- if settings.predictive_search_enabled -%}
<predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
{%- else -%}
<search-form class="search-modal__form">
{%- endif -%}
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
<input class="search__input field__input"
@dpw1
dpw1 / background_image.css
Last active March 27, 2023 09:26
Add a background image to any Shopify theme
<style>
html, body,
[id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer']),
[id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer'])> [class*='background']{
background: url("replaceme.jpg") !important;
background-size: cover !important;
}
</style>
@dpw1
dpw1 / ezfy-arrow-keys.liquid
Last active June 7, 2023 16:26
How to change product images with arrow keys
{% if template == 'product' %}
<script>
document.addEventListener('keydown', function (event) {
function isThumbnailsOrArrows(){
// has arrows
if (window.getComputedStyle(document.querySelector(`.slider-buttons`)).display !== 'none'){
return 'arrows';
}
@dpw1
dpw1 / ezfy-header-search.liquid
Last active August 25, 2023 02:15
Visible search bar for Dawn and free themes (version above 8.0.0)
{% comment %}
Always visible search bar by ezfycode.com
{% endcomment %}
{% assign predictive_search_height = 500 %}
{% assign search_box_width = 350 %}
<div class="EzfyHeaderSearch EzfyHeaderSearch--{{ device }}">
{%- if settings.predictive_search_enabled -%}
<predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
@dpw1
dpw1 / header.liquid
Last active September 2, 2023 01:55
Menu word on mobile
<div class="menu__hamburguer--container" >
<span>
{% render 'icon-hamburger' %}
{% render 'icon-close' %}
</span>
<span class="menu__hamburguer--text">Menu</span>
</div>
<style>
.menu__hamburguer--container{
position: relative;
@dpw1
dpw1 / base.css
Last active September 4, 2023 08:16
Show mobile slideshow's text on top of image
{% if section.settings.show_on_top_of_image_on_mobile_by_ezfycode %}
<style>
/* Custom code by ezfycode.com
Fix mobile banner and slideshow [start]
===================================== */
{% assign _mobile_banner_background = section.settings.mobile_banner_background | color_to_rgb %}
{% assign mobile_banner_background_opacity = section.settings.mobile_banner_background_opacity | prepend: ',.' | append: ')' %}
{% capture mobile_banner_background %}
{% if section.settings.mobile_banner_background_opacity == 100 %}
{{ section.settings.mobile_banner_background }}
@dpw1
dpw1 / image-banner.json
Last active September 4, 2023 08:17
Show mobile banner & slideshow’s text on top of image [all free themes]
{
"type": "header",
"content": "Custom options by [ezfycode.com](https://ezfycode.com)"
},
{
"type": "checkbox",
"id": "show_on_top_of_image_on_mobile_by_ezfycode",
"label": "Show text on top of image on mobile",
"default": true
},
@dpw1
dpw1 / ezfy-custom-fonts.liquid
Created December 6, 2022 21:19
How to add custom fonts to any Shopify theme
{% if section.settings.enable %}
<style data-custom-fonts>
{% assign items = section.blocks | reverse %}
{% for block in items %}
{% assign name = block.settings.name %}
{% assign url = block.settings.custom_font_url %}