App reviews, troubleshooting, and recommendations
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 %}
Solved! Go to the solution
This is an accepted solution.
Did not know there was an override, I was trending toward !important - will give this a shot - thank you!
This is an accepted solution.
Did not know there was an override, I was trending toward !important - will give this a shot - thank you!
Worked perfectly - cannot find that block.override in the liquid references but it works quite well. Thank you so much!
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024