Shopify Question posted in
The Shopify help center can be found here.

Shopify styling isses

I am using shopify and the template (I believe) is baseline.

In the assets folder there is a theme.css and a theme.min.css. I am finding that the only new styles or over rides I can make are in the min.css file?

There doesnt seem to be a SCSS file. How does theme.css become minified because currently it isn’t happening automatically.

Tags:

2

Answers


  1. 0

    I’m not exactly sure I understand what you’re using or trying to do, but here’s two bits of information that might help:

    1. The style being used will be specified in the HTML; so look for tags like
    <link rel="stylesheet" type="text/css"

    On the page you’re working with, you’ll see that it probably points to a ‘min’ version of the css. Change that to change what stylesheet is loaded.

    1. If you want to minify your css, there are a bunch of options, including standalone tools, websites, and packages. Here’s a good resource for explaining what the process is, and for picking out a way to minify your css:

    https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript

    Edit:
    Shopify is deprecating Sass, and this article explains what to use instead
    https://www.shopify.com/partners/blog/deprecating-sass
    "As part of our ongoing initiatives, we’ve decided to deprecate Sass, with the aim of improving the user experience of storefronts, and paving the way for future advancements. In the short term, Sass will continue to work on Shopify themes, but we are actively migrating our themes to use only CSS stylesheets.

    In this article we’ll look at why we’ve decided to transition away from using Sass in themes and how developers can adjust their custom themes to adopt native CSS features and maintain functionality. We’ll also look at what alternatives are available for developers who wish to continue using Sass in their development workflow. "

    Login or Signup to reply.
  2. 0

    Sometimes developers add two versions of the stylesheet (.css and min.css), this is just a good practice, but most of the time the minified version (min.css) is connected to theme.liquid. Same happens with .js files.

    If you want to add custom styles I recommend to add a new file in the assets folder named "custom.css", for example, and connect it to theme.liquid using the liquid stylesheet tag, something like this:

    {{ 'custom.css' | asset_url | stylesheet_tag }}

    is important to place this tag right under ‘theme.min.css’ stylesheet tag in the theme.liquid. This way it will override most of the theme.min.css styles.

    I don’t recommend to use SCSS in Shopify since it is deprecated.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search