Day 27/2

Plan 27/2:

• Researching Shopify document ( Developer tools, Liquid, ...)

• customize speed

Progress:

Architecture

• Layouts: Serve as the framework for each page of the store, wrapping around the content of each page. A typical theme has a single layout that includes sections common across the store, such as the header and footer.

• Templates: Specific to different types of pages within the store (e.g., product pages, collection pages). Templates define the structure and content that appear within the layout's main content area.

• Sections: Reusable modules that can be customized and reordered by merchants in the theme editor. Sections can be static (specific to certain pages) or dynamic (added to any page).

• Blocks: Components that form parts of sections, allowing for further customization of content within sections. Blocks can have different types, such as text, images, or sliders.

• Snippets: Reusable code parts that can be included in multiple templates and sections. Snippets are used to simplify theme code and avoid repetition.

• Assets: Include static files like images, stylesheets (CSS), and JavaScript. These are used to add functionality and style to themes.

• Config: Contains settings data for themes, which can be used to store theme settings and preferences, allowing merchants to customize aspects of their theme through the theme editor.

• Locales: Contains translation files that enable themes to support multiple languages, making the store accessible to a wider audience.

• Schema: Defines the settings for customizable elements within sections, allowing merchants to modify content directly in the theme editor without needing to edit the code.

Dev tools

CLI

Shopify CLI is a command-line interface tool help with building Shopify apps and themes.

It accelerates theme development process with:

• Safely preview, test, and share changes to themes using development themes

• Hot reload CSS and section changes, or automatically refresh a page on file change, when previewing a theme

• Initialize a new theme using Dawn as a starting point

• Push and publish themes from the command line

• Work on multiple themes using environments

• Run Theme Check on your theme

Development themes

Development themes are temporary, hidden themes that are connected to the Shopify store that you're using for development and local testing.

Enviroment

Environments streamline command configurations, reducing the need for multiple flags by grouping settings under a single name.

They're handy for switching between development stores, accessing multiple stores with passwords, or deploying projects across different environments.

Create a theme

• Create or login to a Shopify partner account and create a development store with store-name

• Assure the installation requirement to install and run Shopify CLI

Steps:

1. Install CLI for Windows and Linux

   Run npm install -g @shopify/cli @shopify/theme on Terminal

2. Initialize a new theme using Dawn

   Run shopify theme init [folder name] to clone Dawn Git repository to your local machine as folder [folder name].

3. Navigate to the folder: cd "[folder name]"

4. Start a local development server by running

shopify theme dev --store [store-name]

1. On the first time start the server, you will be asked to login to Shopify partner

2. Navigate to http://127.0.0.1:9292 to open the theme preview

3. Upload your theme to a store if you want to share a permanent link to your theme, update the code of an existing theme, or prepare for your theme to be published. Run shopify theme push --unpublished on the first time pushing your theme code, after that, only need shopify theme push to update code

4. publish your store to make your theme live with shopify theme publish --- > select the theme you want to publish and confirm

Switching between account

If you need to switch between accounts, log out of the current account:

shopify auth logout

The next time you enter a command that requires authentication, you'll be prompted to log in

Use Shopify CLI in a CI/CD pipeline

Steps:

1. Install Theme access App to create Theme access password which helps you in interacting with programmatically using Shopify CLI

2. Install Shopify CLI and its dependencies in your CD pipeline

3. Use environment variables (SHOPIFY_FLAG_STORE, SHOPIFY_CLI_THEME_TOKEN, SHOPIFY_CLI_TTY) for store interaction and to manage interactive prompts.

4. Set up Ruby, bundler, and Node.js.

5. Install Shopify CLI globally.

6. Execute the desired Shopify CLI command.