The Complete Shopify Theme Development Course

Create a development store from your partner account to test themes or serve a client. Use a unique name, set location India online, and later develop with Visual Studio Code.

Download and set up your Shopify theme from scratch, exploring assets, config, layout, sections, snippets, and templates while filling placeholders in a clean project structure.

Sync local Shopify theme files to a development store with Shopify CLI, start a local dev server, preview via the store URL, and push and publish changes to go live.

Link your local Shopify theme to a private GitHub repo, connect the repo to your development store, and enable version control, collaboration, and quick, trackable deployments.

Discover how two important Shopify configuration files, settings_schema.json and settings_data.json, in the config directory, enable merchants to customize global theme settings without code, and how values are stored and reused.

Explore theme.liquid, the master layout that defines the base HTML for all pages, loading global assets and the header and layout content for modular, dynamic, SEO-conscious Shopify themes.

Explore how Shopify templates and JSON templates shape dynamic pages in Shopify Online Store 2.0, enabling merchants to customize layouts with reusable sections and reorder them through the theme editor.

Explore Shopify's navigation system in liquid using the global link lists object, the link list object for menus, and the link object for items to render dynamic navigation.

Learn to add app.css to a Shopify theme via a style sheet tag, then build utility classes for layout, spacing, and grid layouts across the store.

Explore the difference between global settings and section-specific settings in Shopify 2.0, define section schemas, and access settings to build a customizable header navigation.

Build a header navigation for a Shopify theme by configuring the main menu in the theme customizer, then implement a responsive liquid structure with logo, navigation, and right side icons.

Upload and display your store logo using the settings schema and customizer, handle logo vs store name in the header, and fine-tune with liquid image URL filters and width settings.

Create utility classes using site color for primary and secondary backgrounds in app.css, fix header to switch to the primary color on scroll, and prepare sidebars with Alpine JS.

Build a right-side cart drawer that slides in on cart icon click, with a structured html/css layout, a backdrop, and Alpine.js to manage the show cart state and transitions.

Create a right-side search drawer that slides in like the cart drawer, using the same classes and an x-data state to toggle visibility, and prepare for predictive search functionality.

Design a responsive mobile navigation drawer that slides in from the left, toggled by a hamburger icon with a backdrop and close button, using fixed positioning and CSS transitions.

Design mobile navigation for a Shopify theme with flex menus, padding, colors, and rotating submenu icons. Implement header color changes on scroll and use alpine x-cloak to prevent uninitialized components.

Upload a 32x32 favicon in the theme header and configure a user icon to redirect to account when logged in or to login. Enable one-time code login with legacy option.

Build a fully dynamic and customizable footer with Shopify schema, empowering store owners to control layout, navigation, subscription forms, social links, and copyright from the admin.

Create a footer schema with customizable background and font colors, social icons, padding, and copyright settings, plus blocks like menu, image, and newsletter for draggable layouts.

Generate a dynamic footer grid in a Shopify theme using section settings, inline styles, and liquid logic to assign grid two, grid three, or grid four based on active blocks.

Master building a Shopify theme by looping through blocks, using liquid switch cases for image, linked list, and check box blocks, and rendering headings, menus, footers, and a newsletter form.

Learn to implement a dynamic social media and copyright section by conditionally rendering icons based on schema settings, including a Twitter icon, footer layout, and date and shop links.

Apply padding to the footer container, center the logo in the footer grid, and refine typography and link spacing with a font size of 18px.

Design and animate social media icons in a white 60x60 anchor box with centered SVGs, hover scale and color change, plus a decorative before element.

Implement a responsive photo grid: four columns on desktop, two on medium, one on small screens, using CSS grid and media queries, and set the newsletter input to full width.

Build a fully customizable image banner for a Shopify theme, featuring desktop and mobile backgrounds, overlay, responsive height, text overlays, and primary and secondary buttons via schema settings and presets.

Learn to build the html structure for a Shopify theme banner by creating a unique section id, rendering desktop and mobile background images, and adding overlay, banner content, and buttons.

Design a responsive section banner by configuring desktop and mobile banners, applying position, background, and overlay, then style the headline, description, and buttons with responsive css.

Configure a Shopify theme announcement bar with schema settings, including enable and display on home page or all pages. Set background color, font color, and text to customize its appearance.

Enable the announcement bar from the backend, style it in the header with a black background and white text, and toggle visibility on scroll and home pages only.

Install Alpine.js with npm to enable lightweight interactivity in your Shopify theme. Configure Laravel Mix to compile sass to css, bundle js, and optimize assets, with a CDN option.

Create global settings to control the site heading title font size for desktop and mobile by editing the settings schema JSON, applying theme customizer options, and wiring CSS variables.

Build a rich text section in the Shopify theme customizer by wiring schema settings for background color, font color, title, short description, button label and URL, and padding controls.

Learn to structure a rich text section in Shopify themes by building HTML divs, conditionally rendering titles, descriptions, and buttons, and styling with CSS for responsive alignment, padding, and colors.