Portar un theme de Shopify a Merge

El motor de temas Merge usa la estructura y los nombres de Shopify Online Store 2.0. Portar un theme propio es, sobre todo, revisar las diferencias de esta página.

Portá solo themes que sean tuyos o de tu cliente. Los themes del Theme Store de Shopify tienen licencias que no permiten usarlos fuera de Shopify.

Lo que funciona igual

• Carpetas layout/, templates/ (JSON), sections/, snippets/, assets/, config/ y locales/.
• {% schema %} con settings, blocks, max_blocks y presets; block.shopify_attributes.
• Templates JSON con sections y order, y templates alternativos page.<handle>.json.
• Secciones estáticas con {% section %} y sus valores en settings_data.json.
• Objetos product, variant, collection, collections, cart, linklists, page, blog, article, search, paginate, routes, request, shop, settings, template.
• Filtros de dinero, image_url con width/height, image_tag, asset_url, t, json, structured_data, metafield_tag y los estándar de Liquid. divided_by entre enteros redondea para abajo, como en Shopify.
• {% form 'product' %}, {% paginate %}, {% stylesheet %} y {% javascript %}.
• El carrito AJAX (/cart.js, /cart/add.js, /cart/change.js, /cart/update.js) con sections para refrescar el HTML. Ver Carrito con JavaScript.
• Filtros y orden de colecciones con la forma de Shopify (collection.filters, url_to_add, sort_options).

Lo que cambia

La salida se escapa sola

En Merge, {{ variable }} escapa el HTML. Lo que viene como HTML de la plataforma (descripciones, settings richtext, filtros que arman tags, metacampos de texto con formato, lo capturado con capture) sale tal cual. En la práctica:

• No hace falta | escape en la mayoría de los lugares (no hace daño).
• Un texto plano con etiquetas HTML adentro se va a ver con las etiquetas. Si un setting tiene que llevar formato, usá richtext o inline_richtext en lugar de text.

Los filtros desconocidos son errores

Shopify ignora un filtro que no existe; Merge muestra un error de render. Buscá en la referencia de filtros los que usa tu theme. Los que no están (por ejemplo font_face, font_url, font_modify, color_modify, link_to, within, img_url) hay que reemplazarlos: las fuentes se declaran en el CSS del theme y los colores derivados se calculan en CSS (color-mix()).

Templates

• Solo templates JSON: un templates/product.liquid no se usa. Pasalo a una sección main-product y un product.json que la incluya.
• El layout lo elige el template JSON ("layout": "password"), no el tag {% layout %}.
• {% include %} no existe: usá {% render %} y pasá las variables que el snippet necesita.

Secciones

• No hay grupos de secciones (sections/header-group.json): el encabezado y el pie son secciones estáticas incluidas desde el layout con {% section %}.
• No hay bloques de apps (@app) ni bloques de theme anidados.
• Tipos de setting: los de Secciones y settings. Para font_picker usá un select con las familias que el theme trae; para color_scheme o color_background, settings color sueltos.

Formularios

{% form %} procesa product, contact (consulta) y customer (suscripción). El resto (customer_login, create_customer, recover_customer_password, localization, cart…) sale con action="#" y el atributo data-form-unsupported para que el theme lo oculte.

Medios

• product.media son solo imágenes (media_type: "image"); no hay videos ni modelos 3D de producto.
• Los videos de las secciones vienen de un setting video (archivo MP4 o WebM) y se muestran con video_tag.

Lo que no existe (todavía)

Checklist

1. Mové los templates .liquid a secciones y templates JSON.
2. Cambiá {% include %} por {% render %} y los grupos de secciones por {% section %} en el layout.
3. Reemplazá los filtros que no existen (fuentes, colores, link_to).
4. Revisá los settings text que se usaban con HTML.
5. Ocultá lo que depende de cuentas de cliente y de formularios no soportados.
6. Abrí cada tipo de página en la vista previa: un error de Liquid se muestra ahí, con el detalle del problema.