How can I create a new button style in the Narrative theme template?

Store Design
1

Hello there. I’d like to create a new button style within my ‘Narrative’ theme template.

Here is the link; https://haze-fitness-wellness.myshopify.com/?key=25c293a6aa9a119052cfdcbc323de0f496d54cd3d78fcac273c1ca5c43ab0153

I’d like to create a primary button style that has a background button colour of #FAF9F6 with a thin black outline around it. The homepage already has a similar style to this for the ‘secondary button style’ albeit the background is transparent so this does not work in our main homepage hero module.

I can’t seem to create the desired button style through the colour settings when i’m in the theme customisation section. Perhaps there is a CSS solution I can try? I can’t code albeit I loosely understand some things from a past life.

THANK YOU.

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.hero.hero--16253369826bcff373 .hero__inner a.btn.hero__btn {
background: transparent;
color: #FAF9F6;
border-color: black;
}
.hero.hero--16253369826bcff373 .hero__inner a.btn.hero__btn:after {
outline: 2px solid #000000;
}
1 Like
3

This is brilliant and so easy, thank you. I could even figure out how to
tweak the colours a bit!

4

Thanks again, this looks great. One follow up question, is there a way of keeping the roll over effect where the outline gets bigger or ideally changes the outline colour to #5015FF on rollover, please? The button no longer seems as interactive. Much thanks