FW Style Addons

Upon popular request I have made multiple style addons for your store.

All you need to do is to go are the steps below:

  1. Go to This Page
  2. Copy the Add-On you want
  3. Paste the <link> tag in the Header Code Section
  4. Enable the Header Code
Small disclaimer:
It could be some add-ons are incompatible with your theme.
Please let me know if so.
Find me in the FourthWall discord as twSparkleCat.

You're also allowed to go to the actual style link and download the file, but do not claim it as your own.

Dynamic Upgrade base from Shop.Sparklecat


<link rel="stylesheet" href="https://sparklecat.eu/fw/fwstyle.css">
  1. Removes white space on Instagram feed
  2. Adds an animated Gradient to the announcement bar
  3. Custom scrollbar
  4. Adds a border effect to product hover
  5. Spices up the Membership Tiers

  • If you want your background-colour and color-on-background to be the colours used for the announcement banner, use the code below instead

<link rel="stylesheet" href="https://sparklecat.eu/fw/fwstyle.css">
<style>
.announcement-bar {
background: linear-gradient(-60deg, var(--color-on-background), var(--color-background), var(--color-background), var(--color-on-background));
background-size: 400% 400%;
}
.tiers__tier-cta > .button--primary{
        background: linear-gradient(-60deg, var(--color-on-background), var(--color-background), var(--color-background), var(--color-on-background));
        background-size: 400% 400% ;
    }
</style>

Minimalistic Glitch effect on hover


<link rel="stylesheet" href="https://sparklecat.eu/fw/addons/glitch.css">
  1. Add a subtle glitch effect when hovering buttons, links, products, icons and logos

Custom Scrollbar


<link rel="stylesheet" href="https://sparklecat.eu/fw/addons/scrollbar.css">
  1. Uses your theme primary and background color to customise the scrollbar

Hover Product Fire Effect


<link rel="stylesheet" href="https://sparklecat.eu/fw/addons/hover_fire.css">
  1. Adds a hover effect to your products that resembles a soft fire gradient

Hover Product Rotating Border Effect


<link rel="stylesheet" href="https://sparklecat.eu/fw/addons/rotateborder.css">
  1. Adds a hover effect to your products that resembles a rotating border from your color-on-background

Do you like what you see?

I do all of this unpaid in my free time. To make sure I can keep offering this service, you can tip me here. There's no obligation, however.

kr