Where you can achieve what your competitors can’t

Shopify Add Logo (Bonus Codes)

CODE : GLOW Logo Effect on Hover – DAWN & Other Variants

.header__heading-logo-wrapper img {
  transition: all 0.6s ease;
}

.header__heading-logo-wrapper:hover img {
  filter: brightness(1.35) contrast(1.2) 
          drop-shadow(0 0 8px rgba(2, 78, 201, 0.75))
          drop-shadow(0 0 12px rgba(2, 78, 201, 0.4));
}

CODE : GLOW Logo Effect on Hover – HORIZON & Other Variants

.header-logo__image-container .header-logo__image {
  transition: all 0.6s ease;
}

.header-logo__image-container:hover .header-logo__image {
  filter: brightness(1.35) contrast(1.2)
    drop-shadow(0 0 8px rgba(2, 78, 201, 0.75))
    drop-shadow(0 0 12px rgba(2, 78, 201, 0.4));
}

CODE : Animated Logo – Horizon & Others

{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}

/* 1. CONTINUOUS PULSE Effect - Heartbeat animation */
.header-logo__image {
  animation: onhowPulse 2s ease-in-out infinite alternate;
}
@keyframes onhowPulse {
  from { transform: scale(1); }
  to { transform: scale(1.056); }
}

/* 2. BREATHING Effect - fade in/out animation*/
.header-logo__image {
  animation: onhowBreathe 3s ease-in-out infinite alternate;
}
@keyframes onhowBreathe {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

/* 3. ELASTIC BOUNCE Effect - vertical bounce animation*/
.header-logo__image {
  animation: onhowBounce 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate;
}
@keyframes onhowBounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-5px) scale(1.08); }
}

/* 4. PENDULUM SWING Effect - rotation swing animation */
.header-logo__image {
  animation: onhowSwing 3s ease-in-out infinite alternate;
}
@keyframes onhowSwing {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

/* 5. FLOATING Effect - Gentle up/down movement animation */
.header-logo__image {
  animation: onhowFloat 4s ease-in-out infinite alternate;
}
@keyframes onhowFloat {
  from { transform: translateY(-2px); }
  to { transform: translateY(2px); }
}

/* ===== COMBINATION EFFECTS ===== */

/* COMBINATION 1: Pulse + Rotation - Dynamic movement */
.header-logo__image {
  animation: onhowPulseRotate 3s ease-in-out infinite alternate;
}
@keyframes onhowPulseRotate {
  from { transform: scale(1) rotate(-2deg); }
  to { transform: scale(1.05) rotate(2deg); }
}

/* COMBINATION 2: Breathing + Float - Subtle organic feel */
.header-logo__image {
  animation: onhowBreatheFloat 3.5s ease-in-out infinite alternate;
}
@keyframes onhowBreatheFloat {
  from { 
    opacity: 0.85; 
    transform: translateY(-3px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(3px); 
  }
}

/* COMBINATION 3: Bounce + Scale - Energetic movement */
.header-logo__image {
  animation: onhowBounceScale 2.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate;
}
@keyframes onhowBounceScale {
  from { transform: translateY(0) scale(0.98); }
  to { transform: translateY(-8px) scale(1.06); }
}

/* ===== THE MOST BALANCED EFFECT ===== */
/* Gentle pulse + subtle float - Professional yet engaging */
.header-logo__image {
  animation: onhowGoldenMotion 4s ease-in-out infinite alternate;
}
@keyframes onhowGoldenMotion {
  from { 
    transform: scale(1) translateY(-1px); 
    opacity: 0.9; 
  }
  to { 
    transform: scale(1.03) translateY(1px); 
    opacity: 1; 
  }
}


/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .header-logo__image {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

CODE : Animated Logo – DAWN & Others

{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}

/* 1. CONTINUOUS PULSE Effect - Heartbeat animation */
.header__heading-logo {
  animation: onhowPulse 2s ease-in-out infinite alternate;
}
@keyframes onhowPulse {
  from { transform: scale(1); }
  to { transform: scale(1.056); }
}

/* 2. BREATHING Effect - Continuous fade in/out */
.header__heading-logo {
  animation: onhowBreathe 3s ease-in-out infinite alternate;
}
@keyframes onhowBreathe {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

/* 3. ELASTIC BOUNCE Effect - Continuous vertical bounce */
.header__heading-logo {
  animation: onhowBounce 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate;
}
@keyframes onhowBounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-5px) scale(1.08); }
}

/* 4. PENDULUM SWING Effect - Continuous rotation swing */
.header__heading-logo {
  animation: onhowSwing 3s ease-in-out infinite alternate;
}
@keyframes onhowSwing {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

/* 5. FLOATING Effect - Gentle up/down movement */
.header__heading-logo {
  animation: onhowFloat 4s ease-in-out infinite alternate;
}
@keyframes onhowFloat {
  from { transform: translateY(-2px); }
  to { transform: translateY(2px); }
}

/* ===== COMBINATION EFFECTS ===== */

/* COMBINATION 1: Pulse + Rotation - Dynamic movement */
.header__heading-logo {
  animation: onhowPulseRotate 3s ease-in-out infinite alternate;
}
@keyframes onhowPulseRotate {
  from { transform: scale(1) rotate(-2deg); }
  to { transform: scale(1.05) rotate(2deg); }
}

/* COMBINATION 2: Breathing + Float - Subtle organic feel */
.header__heading-logo {
  animation: onhowBreatheFloat 3.5s ease-in-out infinite alternate;
}
@keyframes onhowBreatheFloat {
  from { 
    opacity: 0.85; 
    transform: translateY(-3px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(3px); 
  }
}

/* COMBINATION 3: Bounce + Scale - Energetic movement */
.header__heading-logo {
  animation: onhowBounceScale 2.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate;
}
@keyframes onhowBounceScale {
  from { transform: translateY(0) scale(0.98); }
  to { transform: translateY(-8px) scale(1.06); }
}

/* ===== THE MOST BALANCED EFFECT ===== */
/* Gentle pulse + subtle float - Professional yet engaging */
.header__heading-logo {
  animation: onhowGoldenMotion 4s ease-in-out infinite alternate;
}
@keyframes onhowGoldenMotion {
  from { 
    transform: scale(1) translateY(-1px); 
    opacity: 0.9; 
  }
  to { 
    transform: scale(1.03) translateY(1px); 
    opacity: 1; 
  }
}


/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .header__heading-logo {
    animation: none;
    transform: none;
    opacity: 1;
  }
}