summary

Due to the impact of the new coronavirus that has been continuing since last year, while the number of companies opening EC sites is increasing, the demand for Shopify, which can easily create cross-border EC sites, is also increasing. In addition, as a production side, you can also edit code such as html, css, javascript, etc., so you can create EC sites with a higher degree of freedom.

If you have just started developing an EC site with Shopify, you do not know what to touch first, and you may be struggling to work on the management screen. Also, many people may think that it would be easier if you could use the familiar Sass or the original file design.

This time it will be an article to solve the above problem.

What we want to convey in this article

It is possible to develop themes to edit code in Shopify's admin screen, but because it is a different environment from usual, you can not use the shortcut you usually use, the code is not formatted, can you not use Sass? There are various issues such as these, and I think that work efficiency will be very poor. This time, I tried to highlight one of the issues among them, the introduction of Sass and the method of file design, and made it into an article.

The contents are as follows.

• Bring Sass to Shopify
• Shopify to design your Sass files

precondition

• Text editors use vscode. Shopify theme development can be created in vscode using the app. This is also important, but there are already many good articles, so I will omit them this time. As for the production method in vscode, the following article was easy to understand, so I think that you can set it as a reference.

• The file design assumes that the css design will be PRECSS.

Bring Sass to Shopify

1.Prepare to have Sass compile

Install the vscode extension "Live Sass Compiler". "Live Sass Compiler" monitors and automatically compiles Sass files, so you do not need to introduce task runners such as gulp in particular. If you're working with Sass in Shopify, this extension should suffice. If you click on "Watch Sass" added to the menu under vscode, the Sass file will start monitoring and auto-compiling.

2. Create a Sass file

Theme-specific css and javascript are stored in Shopify's assets directory, so create a Sass file here. The file to be created this time is index.scss.

3. Compile and output a CSS file

When you click "Watch Sass", you can see that it has compiled properly and the index.css file is output as shown in the attached image. From then on, the Live Sass Compiler will continue to monitor it, so every time you save the code, it will be compiled. After that, if you write to read the index.css on the corresponding page, you will succeed in introducing Sass.

<link rel="preload" href="{{ 'index.css' | asset_url }}" as="style">

Shopify to design your Sass files

As per the prerequisites, follow the basic design of PRECSS and design the file. I don't do anything particularly difficult, just add the necessary directories and files to the relevant part of vscode as usual.

This time, we have created a file design in assets as follows. As for the scss file, tentatively, I will create _btn.scss under block, _card.scss, element, and import it to the index.scss I created earlier, which is placed under assets.

assets/ 　├ index.scss 　├ _modules/ 　 　└ block/ 　　　　└ _card.scss 　 　└ element/ 　　　　└ _btn.scss

Each file is described as follows:

.bl_card {
  display: block;
}

.el_btn {
  font-size: 16px;
}

@import "_modules/block/card";
@import "_modules/element/btn";

"Live Sass Compiler" is running, so when you check the index.css, I think that it compiles properly and has the correct result.

All that's left is to design the file as you like with reference to this method!

At last

When I looked back at the article, I felt that I was writing something very obvious. However, if you can't do it in the method of the article in the Shopify management screen, or if you are dealing with Shopify for the first time, can you use Sass in the first place? There are some unexpected stumbling blocks.

If you can develop your own production environment and even design, you can create a free EC site more efficiently. I hope it will help those who are troubled by the same thing.

Thank you for reading until the end.