Estructura de carpetas

Estructura del tema

Antes de empezar, entienda un poco sobre la estructura de carpetas en un Theme de Shopify:

.
├── _assets
│   │
│   └── ...(.png, .svg, .eot, .json, .js, .css, ...)
├── _config
│   │
│   └── ...(.json)
├── _layout
│   │
│   └── ...(.liquid)
├── _locales
│   │
│   └── ...(.json)
├── _sections
│   │
│   └── ...(.liquid)
├── _snippets
│   │
│   └── ...(.liquid)
├── _src
└── _templates
    ├── _customer
    │   └── ...(.json)
    └── ...(.json)

Directorio	Descripción
Assets	Es una carpeta que contiene archivos estáticos con recursos importantes para la tienda. Por ejemplo, si ud quiere estilar o añadir interactividad por medio (CSS3 ó JS). Puede agregar directamente los archivos aquí y luego enlazarlos a su tienda. También puede añadir: fuentes, imágenes, json u otros archivos.
Config	Es una carpeta que contiene dos archivos de configuración general. Por ejemplo, puede añadir más settings para permitir la customización general. Y además, contiene información almacenada resultado que se renderiza en el storefront.
Layout	Es una carpeta que contiene los archivos de layout. Por ejemplo, el archivo theme.liquid, afecta la tienda, aquí puede añadir contenido al head y body. Es decir en este archivo, enlaza sus estilos y scripts.
Locales	Es una carpeta con sus locales/código de país. Aquí puede añadir, elementos para generar traducciones automáticas de su tienda.
Sections	El layout de su tienda, está dividida por secciones, aquí puede añadir las secciones que desee para permitir customizar el storefront.
Snippets	En esta carpeta encuentra archivos con trozos de código que puede añadir a las secciones o layouts de su tienda.
src	En esta carpeta puede encontrar una estructura para generar bundles de estilos y scripts de JS.
Templates	En esta carpeta, encuentra cada template de la tienda, en la última versión de Shopify actualizaron los templates de .liquid a .json (con excepción a los templates del customer portal).

Estructura JS

Tenemos un estándar para las interacciones de la tienda. Para generar scripts que pueda utilizar en su tienda, es necesario transpilar por medio de Webpack (un empaquetador de JS).

Conozca la estructura de la raíz para los bundles JS:

_src
├── _services
│   ├── api.js
│   └── ...
├── _components
│   ├── slider-home.js
│   └── ...
├── _templates
│   ├── home.js
│   └── ...
├── _hooks
│   ├── useApi.js
│   └── ...
├── _utils
│   ├── dataToggleActive.js
│   └── ...
└── _shared
    ├── _menu.js
    └── ...

Conozca un poco más sobre el patrón y naming de los archivos. Documentación aquí👇

Estructura SCSS

Para dar estilos en las tiendas en Shopify, hemos establecido un estándar basado en un famoso patrón de SASS (Consulte el patrón aqui👇. En este caso, consiste en estructurar carpetas directamente relacionadas con un componente y maquetado modular. Conozca la estructura:

_src
├── _abstracts
│   ├── mixins.scss
│   └── variables.scss
├── _components
│   ├── slider-home.scss
│   └── ...
├── _layout
│   ├── home.scss
│   └── ...
├── _theme
│   ├── theme.scss
│   └── ...
├── _base
│   ├── reset.scss
│   └── ...
└── _utils
    ├── _spinner.scss
    └── ...