Missing theme.scss.liquid / theme.css.liquid within Assets using Debut theme

Tourist
6 0 1

Hi everyone,

I am using the Debut theme, and I am trying to change the <shop now> button color.

There are a couple posts about this subject on the forum, and they require a snippet of code be added within <theme.scss.liquid> or <theme.css.liquid> under assets. Sadly, I do not have either of these in my assets folder. Can someone assist me here?

URL: https://lavendel-rose.ch/

Thanks,

Nico

0 Likes
Navigator
332 78 97

Hi @rehder 

Please add theme.css file code.

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Tourist
6 0 1

Hi @Vikas_Chovatiya , how would you like this? Simply copy - paste the entire theme.css file code as a reply?

0 Likes
Shopify Partner
3 0 0

Here's a snapshot of where to find it within your "Assets" Folder.

If it looks like there are no files underneath the Assets Icon, then click on it to expand the folder. 

assets expanded folderassets expanded folder

0 Likes
Tourist
6 0 1

Hey @Alett_Lewis, yup, this is clear to me. But as you can see, these files are not found in my assets folder.

I have a <theme.css>, but no <theme.scss.liquid> or <theme.css.liquid>. Unless with or without <liquid> represents the same file?

Thanks again!

rehder_0-1606976304639.png

 

0 Likes
Shopify Partner
3 0 0

It should be the same file. Here's how the file starts (for you to verify if it's the same)

/*============================================================================
Debut | Built with Shopify Slate

Some things to know about this file:
- Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
- The output CSS is compressed and comments are removed
- You cannot use native CSS/Sass @imports in this file without a build script
==============================================================================*/

/*================ SASS HELPERS ================*/
/*============================================================================
Convert pixels to ems
eg. for a relational value of 12px write em(12) when the parent is 16px
if the parent is another value say 24px write em(12, 24)
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_px-to-em.scss
==============================================================================*/
@function em($pxval, $base: $font-size-base) {

@IF not unitless($pxval) {
$pxval: strip-units($pxval);
}
@IF not unitless($base) {
$base: strip-units($base);
}
@Return ($pxval / $base) * 1em;
}

/*============================================================================
Strips the unit from a number.
@param {Number (With Unit)} $value
@example scss - Usage
$dimension: strip-units(10em);
@example css - CSS Output
$dimension: 10;
@Return {Number (Unitless)}
based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_strip-units.scss
====================================================

0 Likes
Tourist
6 0 1

Hey @Alett_Lewis 

Here is a snippet of my <Theme.css> until line 88. Is does not quite coincide with your output.

Any other ideas?

__________________________________________________________________________

 

@charset "UTF-8";
/*============================================================================
Debut | Built with Shopify Slate

Some things to know about this file:
- Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
- The output CSS is compressed and comments are removed
- You cannot use native CSS/Sass @imports in this file without a build script
==============================================================================*/
/*================ SASS HELPERS ================*/
/*================ #Mixins ================*/
/*============================================================================
Prefix mixin for generating vendor prefixes.
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss

Usage:
// Input:
.element {
@include prefix(transform, scale(1), ms webkit spec);
}

// Output:
.element {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
==============================================================================*/
/*================ Media Query Mixin ================*/
/*================ Responsive Show/Hide Helper ================*/
/*================ Responsive Text Alignment Helper ================*/
/*============================================================================
Convert pixels (unitless) to ems
eg. for a relational value of 12px write calc-font-size(12) when the parent is 16px
if the parent is another value say 24px write calc-font-size(12, 24)
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_px-to-em.scss
==============================================================================*/
/*============================================================================
Flexbox prefix mixins from Bourbon
https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss
==============================================================================*/
/*================ VARIABLES ================*/
/*============================================================================
Grid Breakpoints and Class Names
- Do not change the variable names
- Breakpoint pixel values are used in the window.theme.breakpoints object
==============================================================================*/
/*============================================================================
Generate breakpoint-specific column widths and push classes
- Default column widths: $grid-breakpoint-has-widths: ($small, $medium-up);
- Default is no push classes
==============================================================================*/
/*================ Color Variables ================*/
/*================ Sizing Variables ================*/
/*================ Footer Variables ================*/
/*================ Z-Index ================*/
/*================ SVG ================*/
/*================ Drawers ================*/
/*================ Hero Slider ================*/
/*================ Typography ================*/
/*================ Gift Cards ================*/
/*================ Z-index ================*/
/*================ Product video ================*/
/*================ Image placeholder ================*/
/*================ VENDOR ================*/
/*============================================================================
Slick Slider 1.6.0

- If upgrading Slick's styles, use the following variables/functions
instead of the slick defaults (from slick-theme.scss)
- This file includes default slick.scss styles (at Slick Slider SCSS)
and slick-theme.scss (at Slick Slider Theme). Upgrade each area individually.
- Remove `outline: none` from `.slick-dots li button`
==============================================================================*/
/*================ Slick Slider SCSS ================*/
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent; }

 

0 Likes
Tourist
6 0 1

Does anyone else have any ideas? Or is the theme.css the same as theme.css.liquid?

0 Likes
Shopify Partner
3 0 0

Why don't you just create the file? You can always delete it if that's not the right file. I suggest using a text editor (not MSWord etc) Add the code from the css file, name the file and upload it to your assets folder.

0 Likes
Tourist
6 0 1

Fair enough, but what I wanted to know or at least understand is why I do not have<theme.css.liquid> in my Assets folder. Clearly, other people using the latest version of the Debut theme can find this file. Am I experiencing a bug? I am sure others, who don't have any experience in CSS might have the same issue and would benefit from having a clear explanation. Anyway, thanks again @Alett_Lewis.