Custom css not applying to page

Shopify Discussion
1

I’m working with Loyalty Lion as an app for a rewards program on my website and I’m trying to modify the LL SDK on the page with custom CSS. Loyalty Lion has documentation on how to do that that I’ve used and tried adding to my styles.css.liquid file and to the custom CSS option in the page template (I’m using a Flex theme from Out of the Sandbox). No matter where I place the CSS, the changes don’t show up on the page.

The page is here: https://allu-com.myshopify.com/pages/rewards

I want it to look like this: https://drive.google.com/file/d/102-tv1GGIBIcnF6Omt2iNf6SIrgxK8L3/view?usp=share_link

The custom CSS I want to add is:

#loyaltylion .lion-section-background-color: #f5f1ec

#loyaltylion .lion-icon__rule–purchase {
background: #fff url(https://esycreative.com/wp-content/uploads/2022/12/Allu-Bag-Icon.png) no-repeat 50% 50%;
background-size: 46px;
-webkit-mask-image:none;
};

#loyaltylion .lion-icon__rule–birthday {
background: #fff url(https://esycreative.com/wp-content/uploads/2022/12/Allu-Birthday.png) no-repeat 50% 50%;
background-size: 46px;
-webkit-mask-image:none;
};

#loyaltylion .lion-icon__rule–signup {
background: #fff url(https://esycreative.com/wp-content/uploads/2022/12/Allu-Person-Icon.png) no-repeat 50% 50%;
background-size: 46px;
-webkit-mask-image:none;
};

#loyaltylion .lion-icon__rule–referral {
background: #fff url(https://esycreative.com/wp-content/uploads/2022/12/Allu-Cell-Icon.png) no-repeat 50% 50%;
background-size: 46px;
-webkit-mask-image:none;
};

#loyaltylion .lion-icon__rule–instagram {
background: #fff url(https://esycreative.com/wp-content/uploads/2022/12/Allu-Icon-Ig.png) no-repeat 50% 50%;
background-size: 46px;
-webkit-mask-image:none;
};

#loyaltylion .lion-icon__rule–newsletter-signup {
background: #fff url(https://esycreative.com/wp-content/uploads/2022/12/Allu-Newsletter-Icon.png) no-repeat 50% 50%;
background-size: 46px;
-webkit-mask-image:none;
};

#loyaltylion .lion-reward-item__icon {
background: #fff url(https://esycreative.com/wp-content/uploads/2022/12/Allu-Gift-Card-Icon.png) no-repeat 50% 50%;
background-size: 46px;
-webkit-mask-image:none;
};

Loyalty Lion’s documentation on this: https://help.loyaltylion.com/en/articles/4444059-change-icons-of-our-loyalty-page

2

Hi @jasminsharp97

This is certainly doable, when it doesn’t work it’s usually a syntax issue:

The first line below doesn’t seem right and could break the code after it:

#loyaltylion .lion-section-background-color: #f5f1ec

What is the proper CSS class that should have its background colour changed?

3

Hello @jasminsharp97

I get the error that may come from this line of your code

#loyaltylion .lion-section-background-color: #f5f1ec

I believe the correct code would be

#loyaltylion .lion-section {
background-color: #f5f1ec;
}

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team