How to Style a Shopify App Block Button

Solved

How to Style a Shopify App Block Button

ced1968
Shopify Partner
12 1 6

Working on an extension and providing an app block to be added to a theme.  The block is a button but I have been unable to bypass the theme styling to get the button to look right.

This is the styling on the button in liquid.  The button renders, but without styling.  I tried inline and that did not take.  It looks like the theme styling is overriding the styling I put on the button.

 

 

{% style %}
.shopify-block{
display:flex;
justify:content:center;

}
.offerButton {
position:fixed;
display:flex;
justify-content:center;
align-items:center;
bottom:0;
width:100%;
height:auto;
background-color:#0442bf;
border: solid 1px #fff;
border-radius: 5px;
box-shadow: 5px 5px 8px 0 #000;
transition: all ease .5s;
padding:6px;
z-index:101;
}

.offerButton:hover {
background-color: #FFFFFF; /* Background color on hover */
color: #0442bf; /* Text color on hover */
border-color: #0442bf; /* Border color on hover */
}

{% style %}

 

Accepted Solution (1)
ced1968
Shopify Partner
12 1 6

This is an accepted solution.

Did not know there was an override, I was trending toward !important - will give this a shot - thank you!

View solution in original post

Replies 2 (2)
ced1968
Shopify Partner
12 1 6

This is an accepted solution.

Did not know there was an override, I was trending toward !important - will give this a shot - thank you!

ced1968
Shopify Partner
12 1 6

Worked perfectly - cannot find that block.override in the liquid references but it works quite well.  Thank you so much!