Summary
Keywords
Full Transcript
In this video we will take a comprehensive look at Shopify Sections for building Shopify Themes with Liquid. Sections let us create customizable modules that merchants can add and customize to the different pages on their store. 🟢 My links - Website - https://stackingcontext.com - Support This Project - https://stackingcontext.com/support - Let's work together - https://stackingcontext.com#contact - Get Early Access To New Videos - https://www.youtube.com/@stackingcontext/join Resources • Liquid Tutorial - https://www.youtube.com/watch?v=Oc9zCbsN5Q4 • Shopify Sections Documentation - https://shopify.dev/docs/themes/architecture/sections • Shopify Input Settings Documentation - https://shopify.dev/docs/themes/architecture/settings/input-settings • Section Groups Documentation - https://shopify.dev/docs/themes/architecture/section-groups • Shopify Fonts - https://shopify.dev/docs/themes/architecture/settings/fonts#available-fonts • Template Types - https://shopify.dev/docs/api/liquid/objects/request#request-page_type • Section Object Documentation - https://shopify.dev/docs/api/liquid/objects/section • Product Object Documentation - https://shopify.dev/docs/api/liquid/objects/product • Collection Object Documentation - https://shopify.dev/docs/api/liquid/objects/collection • Page Object Documentation - https://shopify.dev/docs/api/liquid/objects/page • Article Object Documentation - https://shopify.dev/docs/api/liquid/objects/article • Blog Object Documentation - https://shopify.dev/docs/api/liquid/objects/blog • Link List Object Documentation - https://shopify.dev/docs/api/liquid/objects/https://shopify.dev/docs/api/liquid/objects/linklist Timestamps 00:00:00 - Introduction 00:01:28 - Sections Overview 00:05:50 - Creating a Section 00:06:12 - The Section Schema 00:13:10 - Section Input Settings 00:16:14 - Textarea Settings 00:18:47 - Richtext Settings 00:23:04 - Inline Richtext Settings 00:24:11 - Number Settings 00:25:25 - Range Settings 00:27:40 - Select Settings 00:31:35 - Checkbox Settings 00:33:09 - Radio Settings 00:34:46 - Color Settings 00:37:08 - Color Background Settings 00:39:19 - Image Picker Settings 00:43:03 - Video Settings 00:46:04 - Video URL Settings 00:48:09 - URL Settings 00:50:00 - HTML Settings 00:51:38 - Liquid Settings 00:53:29 - Product Settings 00:55:36 - Product List Settings 00:58:00 - Collection and Collection List Settings 01:00:59 - Page, Article, Blog and Link List Settings 01:02:02 - Text Alignment Settings 01:04:25 - Font Picker Settings 01:08:24 - Header Settings 01:09:33 - Links in Settings Info 01:10:08 - Section Blocks 01:25:10 - Section Groups 01:29:55 - The section Object 01:31:57 - Section Presets 01:38:06 - Detecting the Theme Editor 01:39:51 - Loading CSS and Javascript for a Section 01:48:50 - Final Thoughts
