How to Customize CSS On Your Shopify Store

Have you ever found a Shopify App that doesn’t quite work like you want it to, and you’d like to make modifications, but don’t know how?  Follow this guide to find out how to use CSS to customize Shopify Apps so they appear or function differently on your store.

What Is CSS?

CSS (Cascading Style Sheets) is a style sheet language used to control the presentation of your store’s HTML so you can easily make changes to the visual appearance of your Shopify Store. The great thing about CSS is that has a simple syntax and uses some English keywords for various style properties.

How to Customize CSS On Your Shopify Store

Customizing CSS is easy!  Just find out the line of CSS you need from your app or theme vendor – so you can copy and paste it directly from them, then follow these steps:

1. Click this link to open up your Shopify Admin Templates

(or go to your Shopify Admin > Online Store > Current Theme > Actions > Edit Code >Templates)

2. Click Templates


3. Find the specific Template you want to customize your code on, most commonly you’ll want to customize:

  • article.liquid – for your blog posts
  • collection.liquid – for your collection pages
  • index.liquid – for your homepage
  • page.liquid – for your general pages such as about and contact pages
  • product.liquid – for your product pages

4. Click at the bottom of the existing code, and type:

<style>

Then, on the same line paste your customized CSS supplied by your vendor – remember the CSS will be different depending on the customization you want.

Then on the same line type:

</style>


5. Above is a real-life example, we will make our app Sticky Cart by Uplinkly appear immediately on all product pages rather than appearing after the customer scrolls down the page.

The line we will enter on our Template for product pages (product.liquid) will look like this:

<style>.sticky-cart-button {bottom: 0!important;}</style>


6. Click Save on the top right so your customised CSS on your Shopify Store changes stick

If you still need help or have questions about our software, we’re a friendly dedicated support team, and you can contact us here.

>