Please enable JavaScript.
Coggle requires JavaScript to display documents.
Virto training - theme development (Theme solution files structure notes…
Virto training - theme development
Liquid
{{ object.propertyName }}
(% tag with logic here %)
https://help.shopify.com/en/themes/liquid/basics
{{ | filter }}
Theme solution files structure notes
Artifacts folder
zip version of the theme for developmen
Assets folder
scripts
angular files
bundle folder
bundled scripts
config folder
theme settings
HTML colour values here for the theme
content values too like link urls
bundle folder
bundled scripts
Layout folder
theme.liquid
like a master page layout
contains reference to header content
that's in the snippet folder
{{ content_for_header }}
Is needed and is used within head html element
Also needs {{ content_for_layout }} within body html
Snippets folder
contains liquid files
that are like partial views
Templates folder
like views in razor
index.liquid etc
Can refer to settings file reference
for doing logic on its value
Adding file content into another file
layout liquid file
layout
(% layout layoutFileName %)
Snippet file
include (server side)
{% include 'snippetFileName' %}
translation
t:
To render the angular value whilst in the liquid syntax
{%raw%}{{ $angularProperty }}{%endraw%}
Form inputs
Has it's own <vc-lable-input ...
So can just copy these
Tasks and bundling
Task runtime explorer
Can watch and see the order of file building
if solution error then it won't do the task runtime
https://virtocommerce.com/docs/vc2devguide/working-with-storefront/theme-development/bundling-and-minification
Day 5