Switching from .scss to .css - Narrative theme

Technical Q&A
1

Hi everyone! :slightly_smiling_face:

Your kind help will be much appreciated!

up until now, I used .scss on my store , and it worked generally fine in most cases, except there was a collection section on the homepage that took ages to load, especially on mobile devices.

Thus, in hope to to fix this issue, I tried switching to .css, as shopify nowadays recommends.

Since using convertors led to errors in the output, I tried the following steps:

  1. I viewed the source code of the index page.
  2. I’ve found and opened the file / link that contained: cdn.shopify.com/s/files/1/0467/6848/8604/t/76/assets/theme.scss.css?v=*********************
  3. I opened the link and copied its content to a notepad.
  4. On the the code edit of the theme (Narrative), I uploaded the notepad file as a new asset called “custom_style.css”
  5. I then opened the theme.liquid and changed the stylesheet: “{{ ‘theme.scss.css’ | asset_url }}” part with stylesheet: “{{ ‘custom_style.css’ | asset_url }}”

The result: the store seems to load a bit faster indeed, only the collection section in question is now completely invisible.

Meaning: The thumbnails and the info of the products are there and are clickable, and they can lead you to each of the product page- they are just not visible as the collection section on the index page at all.

Any ideas what went wrong / how to fix this issue?

Million thanks in advance for your assistance!

2

Narrative now uses a “load-css” function to make the page load even faster. Did you replace ‘theme.scss.css’ with ‘custom_style.css’ in the snippets/load-css.liquid file as well?

Other than that, it sounds like there may be some typing/conversion error between the files. There should be no reason that the collection section disappeared, other than there may be some issues with some animation css not being loaded.

A couple technical things, that are unrelated to why it’s invisible:

In theory, your css file should work until you update your theme.

What’s likely happening (Narrative does this) is that your theme is using a theme.scss.liquid file which then compiles twice, first filling in all the liquid tags (like {{settings.color-accent}}), then compiling from scss to css. You copied the result of both compilations and then

3

Thank you so much @Evan_Ford ! I really appreciate it!

Since I’m not an expert in the shopify backend territory, or even anywhere near it, could you please guide me about what to do exactly?

Million More Thanks in Advance!