Why isn't my custom.css file reflecting changes in live preview?

Store Design
1

I am trying to add some custom styling, but my custom.css that I created is not being updated in the live preview.

I have checked the markup with a validator, and everything is fine. I have modified the styles in the Devtools window and everything works, so I know the code is right.

Why won’t my file update?
I have checked the file via url, and it is the old file without my recent updates.

I have looked at other posts about this, but none of those answers work.

2

@cclark440

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Here is the link to the site;

https://efu6s2aiij98hx7d-7734067255.shopifypreview.com

You can navigate to Design your Own->Any of the Analog options.

To get it to work I embedded the css in the html of each page. The css file is custom.css that is imported into the theme.scss.liquid file.

4

@cclark440

i can’t see that file please add your custom file below theme.scss

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

I tried adding this line to the theme.scss.liquid file in several different places, and it seemed to break the entire site.

I have removed the inline style from the Design Your Own->Analog Form Standard Stylus page. It should be loading the custom.css file now.

This is what I see when I open the custom.css file to edit, and what I expect to see in the preview.

.posted { display: none;}

.dyoinputrow{
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  display:flex; 
  align-content:center; 
  justify-content:center;
}

.dyoinputrow div{
	padding: 0.5em;
    width: 50%;
}

.dyoinputrowlast{
 border-bottom: 1px solid black; 
}

.threeinput{
  width:150px;
}
6

@cclark440

i can see custom.css

KetanKumar_0-1630692096516.png
KetanKumar_0-1630692096516.png1920×1080 244 KB

7

I see now, I think.

I have added it in the theme.liquid, but it still does not show on the preview.

customcss.jpg
customcss.jpg1517×799 145 KB

8

@cclark440

oh sorry for that

also if possible to this way let me know

For reference , this is what a collaborator access does: About collaborator permissions · Shopify Help Center
The Shopify Collaborator Account: What You Need to Know
Partners: Requests for staff access when providing assistance is not appropriate. Guidance should be provided within the topic if possible, and if access is required the collaboration feature detailed in this blog post should be used over requesting staff access: The Shopify Collaborator Account: What You Need to Know