New website, beginner's error.

Shopify Discussion
1

Hi all, I am trying to build a new store, my first experience with Shopify, I am not a developer.
After days of work, I have nearly got the site how I want it.
I have added code to the base.css file, I thought this was how it had to be done.
I have just read, if the theme is updated, all these changes will be lost.
Is that correct?
I see there was a limit how many characters you can use in the custom css section, the additional code will not fit here.
I want to keep the design changes I have made, but don’t want an update to delete them all.
Any ideas how i should continue?
Please bear in mind, I am a beginner, one who realised they may have made a painful error :face_with_crossed_out_eyes:
Thank you in advance.

2

Hey! First off, huge congrats on building your first shopify store. You’ve clearly put in a lot of effort and realizing how theme updates work now is actually a good thing.

If you edit theme files directly (like base.css), those changes can be overwritten if the theme gets updated by the developer. Although, you can use the Custom CSS section, it’s designed to be update-safe but it does have a character limit.

If you’d like, i can help safely move your css into a custom file, I am a developer. You’re doing great by the way, most people don’t even get this far

3

Hi @Marcus7

Welcome to the community, and good luck with the store.

It is good that you willing to edit code even if you are not a developer.

One solution to be safe is to create your own CSS file for example “custom.css” I’m assets folder. Then in your theme .liquid in layout folder after this line

https://github.com/Shopify/dawn/blob/main/layout/theme.liquid#L258

add similar

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

And place all your changes and new code there. It is important to place after base.css so rules from custom.css will be applied.

Let me know you have any additional questions on this.

4

Thank you very much for taking the time to reply.

I actually tried this, i found the steps online.
Not all the changes came through, some like mega menu, I understand.
The changes are all aesthetic, font colour etc.
My new plan, I just saw I can copy my website, so I will replicate it, take the additional code from base.css and place into new file, i will use your code in case the other code was wrong.
Do you think that is a sensible way to proceed?

5

Yes, make backups of live theme from time to time. That is a good practice.

For the plan, yes, try it out. Good luck.

6

I get around that problem by:

  1. Adding a Custom Liquid section to the Header area (so the section will appear on every page).

  2. Write all the CSS you want in this Custom Liquid section (without worrying that updating the theme will overwrite it all).

Note: Remember to write any CSS in the Custom Liquid section in between style tags like shown below

 <= Note the closing style tag is slightly different from the opening style tag

001.png
001.png691Ă—585 67 KB

7

Thank you for this, I just created my custom.css, and I think it is working.
Are there any advantages to adding code in custom liquid section?
Does either method affect page loading times?
Thanks again.