Styling SellUp using Custom CSS - LAUNCHTIP

Get the #1 Free Upsell App with over $100m 💰 in Upsells!Get App

#1 Free Upsell App - $100m+ 💰 in Upsells!Get App

Styling SellUp using Custom CSS

You are here:
Estimated reading time: 1 min

SellUp comes with some basic styling options out of the box that enable you to get SellUp matching your theme pretty well.

For some stores, this doesn’t always quite fit the bill. There may be other elements you need to style and SellUp is giving you the ability to style them. Also, some themes can actually conflict with styling classes from time to time. This can cause SellUp to not quite appear the way it should or you wanting it to.

Luckily, you can apply some custom CSS to fix these points.

 

How to Enable Custom CSS

First off, if you don’t know what CSS is then you probably don’t want to continue. CSS customisation is for advance users who know their way around HTML and CSS, Classes and so on. We suggest hiring a 3rd party developer to style this for you. Alternatively, if you are on a paid plan then we can style SellUp for you.

If you know what CSS is and are comfortable then let’s continue.

Step 1) Enable Custom CSS.

To do this you need to change the Theme Style from “Inherit from theme” to “Custom” within the SellUp Settings > Global Display Settings.

 

Step 2) Enter your Custom CSS

Next, you can enter your custom CSS into the CSS box further down the page. You need to make sure you enter CSS with no breaking spaces as if it were one continuous line (similar to minification) e.g ​

.launchtip-wrapper .title { font-weight: 300; font-size: 18px } .launchtip-wrapper .another-class { text-decoration: none;}
as opposed to:
​.launchtip-wrapper .title {
​        font-weight: 300; 
        font-size: 18px
​}

 

Finally, click Save.

Now, on the frontend you should see your changes. If the widget has disappeared altogether then its an issue with the CSS. Simply check the CSS and make sure there are no breaks in it or errors.

Was this article helpful?
Dislike 1
Previous: Cart Upsells not showing
Next: The App says Server Error / Loading issues

Want to ignite your Shopify store?

Pop your email in and receive instant access to the global renowned merchant success pack or “welcome email” :). Zero Spam. Just Shopify Success.