Theme Development

VS Code Key Commands!

February 12, 2022

Back tab: Shift + Tab Go to file: Ctrl + P Settings: Ctrl + Shift + P Format selection: Ctrl+K Ctrl+F

Shopify CLI Useful Commands

December 24, 2021

1. Shopify theme pull --nodelete

Metafields Online Store 2.0

December 3, 2021

1. Settings -> Metafields 2. Go to specific product and add value in the metafield 3. Link 4. Two ways to access the metafield: {{ block.settings.option1 }} or {{ product.metafields.my_fields.grip }} 5. Value is stored in product.json template

Metafields (OLD WAY)

December 3, 2021

/admin/bulk?resource_name=Product&edit=metafields.global.canonical {{ product.metafields.global.canonical }}

AJAX Collection API

December 2, 2021

fetch('https://ivanturnovski.myshopify.com/collections/frontpage?view=json').then(response => response.json()).then(data => console.log(data)); Preview collection that don't use collection.json.liquid template: /collections/featured?view=json

Count Products, Collections etc...

December 2, 2021

/admin/products/count.json /admin/collections/count.json /admin/blogs/count.json /admin/pages/count.json /admin/articles/count.json /admin/orders/count.json /admin/customers/count.json /admin/customers.json

Shopify CLI Initial Settings

November 22, 2021

Install Node JS v16.13.0 Install NPM 7.11.1 RUN: gem -v to check is Ruby Installed Download Ruby: rubyinstaller.org/downloads/ (Ruby+DevKit) RUN: gem install shopify-cli RUN: shopify version RUN: shopify theme init Elizabeth --clone-url https://github.com/bbbpppolly/Elizabeth_Clean.git RUN: shopify login --store https://ivanturnovski.myshopify.com/admin RUN: shopify whoami RUN: shopify theme serve RUN: npm init -y (to create package.json) RUN: npm install -D tailwindcss postcss autoprefixer (to install the dev dependencies) npx tailwind init npx tailwindcss -i ./src/tailwind.css -o ./assets/application.css Important None: The Changes made in Customizer are not reflecting locally. 1. Suggestion: Connect to Github repository 2. Make Changes from Customizer 3....

September 24, 2021

WAY 1: 1. git clone https://github.com/ivanturnovski/Shopify-Theme-Development-Create-Shopify-Themes-2021---Udemy 2. Check Repo: git remote -v 3. Remove Repo: git remote remove origin 4. git add origin https://github.com/ivanturnovski/Leena---Online-Store-2.0 5. git push -u origin master 6. Open Shopify Admin: Add theme Connect from github 7. npm install 8. theme configure --password=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 --store="ivanturnovski.myshopify.com" --themeid=120612716632 This outputs config.yml file or you can create yourself manually 9. gulp watch 10. Works!!!! Note: 6 add to github everytime you save the theme. AVOID THIS WAY! WAY 2: 1. git clone https://github.com/ivanturnovski/Shopify-Theme-Development-Create-Shopify-Themes-2021---Udemy 2.Open Shopify Admin: Add theme Upload ZIP This won't upload...

Sections and Snippets

April 22, 2021

1. Snippet get access to schema settings within the parent section 2. This is how the feed works in shopify: Layouts > Templates > Sections > Snippets 3. Snippets can be included anywhere 4. If you set variable in theme.liquid you can access that variable everywhere the theme that uses that layout

Alternative layouts and templates

April 20, 2021

Alternate layouts: Contact us page have alternate layout, Steps: 1. Create naked.liquid in layout folder, this file is copy of theme.liquid just delete header and footer 2. in page.contact.liquid type {% layout 'naked' %} Alternate templates: The main template is page.liquid and alternate template is page.contact.liquid Alternate templates appear only on the live themes. If you are working on unpublished theme there is a work-around for this: Just create the alternate template on live and leave it empty, don't need to have anything in it

Include vs Render

April 15, 2021

Even though Shopify have announced Include is deprecated you can still use include, I personally I think it's more powerful than render. {% include 'snippet.liquid' %} Has to pass variable into the snipped using include: 1. Assign variables before you call the snippet: {% assign fulfstat = order.fulfillment_status %}{% assign finstat = order.financial_status %} {% include 'check-order-status' 2. {% include 'check-order-status', fulfstat: order.fulfillment_status, finstat: order.financial_status %} Content inside the snipped: {%- capture fulfillment_status -%} {%- if fulfstat == 'fulfilled' -%} bg-primary {%- elsif fulfstat == 'unfulfilled'-%} bg-danger {%- else -%} bg-dark {%- endif -%} {%- endcapture -%} {%- capture financial_status -%} {%- if finstat == 'paid' -%} bg-success {%- elsif finstat == 'partially_refunded'-%} bg-warning {%- else -%} bg-secondary {%- endif -%} {%- endcapture -%} Include works in both ways, and, you can use variable within the snippet outside of that snippet {{ financial_status }}{{ fulfillment_status }} {%...