> For the complete documentation index, see [llms.txt](https://dtian.gitbook.io/daily-report-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dtian.gitbook.io/daily-report-1/day-27-2.md).

# Day 27/2

Plan 27/2:

* Researching Shopify document ( Developer tools, Liquid, ...)
* customize speed

Progress: 

## <mark style="color:blue;">Architecture</mark>

* **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.

## <mark style="color:blue;">Dev tools</mark>

### CLI

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

It accelerates theme development process with:&#x20;

* 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](https://github.com/Shopify/dawn) as a starting point
* Push and publish themes from the command line
* Work on multiple themes using [environments](https://shopify.dev/docs/themes/tools/cli#environments)
* Run [Theme Check](https://shopify.dev/docs/themes/tools/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.&#x20;

#### Enviroment

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

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 <mark style="color:green;">`store-name`</mark>
* Assure the [installation requirement](https://shopify.dev/docs/themes/getting-started/create#installation-requirements-for-shopify-cli) to install and run Shopify CLI

<figure><img src="https://2878938912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh3eXWDccgTwhy3aSt25T%2Fuploads%2FprP1lkV5LDhmFW3ykP0a%2Fimage.png?alt=media&amp;token=9df3778d-6597-4ec0-bbcd-1351079a4657" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps:

1. Install CLI for Windows and Linux

   Run <mark style="color:green;">`npm install -g @shopify/cli @shopify/theme`</mark> on Terminal
2. Initialize a new theme using Dawn

   Run <mark style="color:green;">`shopify theme init [folder name]`</mark> to clone Dawn Git repository to your local machine as folder \[folder name].&#x20;
3. Navigate to the folder: <mark style="color:green;">`cd "[folder name]"`</mark>
4. Start a local development server by  running&#x20;

<mark style="color:green;">`shopify theme dev --store [store-name]`</mark>

5. On the first time start the server, you will be asked to login to Shopify partner
6. Navigate to <mark style="color:green;">`http://127.0.0.1:9292`</mark> to open the theme preview
7. 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 <mark style="color:green;">`shopify theme push --unpublished`</mark> on the first time pushing your theme code, after that, only need <mark style="color:green;">`shopify theme push`</mark> to update code
8. publish your store to make your theme live with <mark style="color:green;">`shopify theme publish`</mark>  --- >  select the theme you want to publish and confirm
   {% endhint %}

#### 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

{% hint style="info" %}
Steps:

1. Install [Theme access](https://apps.shopify.com/theme-access?shpxid=e8db5d2c-DCA7-48B5-1A2D-DD26540D35C3) 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.
   {% endhint %}