This is a starter theme structure for devs wanting to code Shopify 2.0 themes from scratch
- First clone this repository and then navigate to the theme's directory on your local machine.
git clone https://github.com/nairdaee/Shopify-2.0-Skeleton-Theme.git
cd Shopify-2.0-Skeleton-Theme
code .-
Next, login to your shopify store
-
Now any Shopify CLI theme command that you run uses the theme in our
Shopify-2.0-Skeleton-Themedirectory.
-
Download the .zip file for this repository
-
Log into your store and navigate to
/admin/themes -
Under theme library click on
Add themeand selectUpload zip file -
Select the zip file you downloaded and wait for it to be added to your themes.
-
You can now go ahead and customize your theme
- First go to the
sectionsfolder and create the section you want inside i.eeditorial.liquid - Inside the .liquid file you have just created add the following code(ensure that the sections.
editorial.name matches your file name):
{% schema %}
{
"name": "t:sections.editorial.name",
"tag": "section",
"class": "section"
}
{% endschema %}- If the section you are creating is static(no dynamic content will be added later, mostly used for announcement bars, navbars and footers). Then the schema is not required. Instead you'll manually extend inside the
layout/theme.liquidfile like shown below:
<body>
<!-- Ensure the section is inside the body tag -->
{% section 'editorial' %}
</body>- If your sections are dynamic then we need to add them to the
templates/. For example, if you want to add the editorial page. First create a new file callededitorial.jsonunder thetemplates/folder and add the following:
{
"sections": {},
"order": []
}- Inside the
editorial.json, under sections, add the following code:
"editorial": {
<!-- no comma at the end if there's only one item -->
"type": "editorial"
}- Lastly, under
"order"add:
<!-- no comma at the end if there's only one item -->
"editorial"- You can now see your page when you do a
shopify theme serveand go to the url/editorial
- Now you'll need to add your css. This is achieved by adding a
.cssfile inside theassets/folder. In our case, it will be callededitorial.css - To import it into our
.liquidsection file. We use the following code at the very top of our .liquid file:
{{ 'editorial.css' | asset_url | stylesheet_tag }}
- For inline styles, you can use the styles tag i.e:
{% style %}
/* Add your styles here */
{% endstyle %}