Shopify Theme Development: Online Store 3.0 + TailwindCSS

Set up a Shopify partners or developer account to create a development store and obtain private app credentials for theme kit, then learn to build Shopify themes.

Learn to create a development store in Shopify to build and test themes and apps without selling products, and understand why it must be empty with the latest build.

Install and configure Visual Studio Code for Shopify theme development, install liquid extensions, and test with a liquid file while learning to work with node or npm and Shopify CLI.

Install Node.js via fast node manager (fnrm) to enable npm, then install Shopify CLI and tailwind CSS for Windows, macOS, and Linux, verifying Node.js and npm versions.

Install Shopify CLI on Windows, meets Node.js version 14.17+ and Ruby plus dev kit, and Git with Bundler, then use npm to install Shopify packages for theme development.

install Shopify CLI on macOS using Homebrew, which installs Node, Ruby, and Git; verify versions to confirm a ready Shopify theme development setup.

Learn to create a Shopify theme project with Shopify CLI by cloning a template or using a clone URL, then open it in VS Code and prepare a development store.

Learn to connect your local Shopify theme to a development store with the Shopify CLI using the theme dev command, log in via verification code, and preview on localhost.

Initialize an npm project and install tailwind css version four and tailwind css/cli for a Shopify theme. Create src/tailwind.css, import tailwind, and run npx tailwind css/cli to generate assets/application.css.

Create a .shopifyignore file to fix Shopify CLI errors; ignore package.json, package-lock.json, css, and node_modules, then run Shopify theme dev with the development store flag.

Build a simple, responsive navigational bar for a Shopify theme using liquid objects and TailwindCSS, displaying the store name, links, and cart, with dropdowns and a mobile menu.

Create a dropdown menu in the navigation bar using alpine.js to toggle visibility with an open boolean and x-show. Iterate over sublinks to render clickable child links with proper hrefs.

Learn to build a responsive mobile menu in Shopify themes by adding a hamburger button, Alpine.js controls, and a header.liquid menu template, with Tailwind CSS styling and accessible icons.

Learn to customize the header with a single json schema per section, shaping the navigational bar and link list menus in Shopify themes.

Use the shop.customer_accounts_enabled flag and a Liquid if tag to toggle the login and register links in the header based on customer account settings.

Learn to connect a Shopify theme to GitHub, track and push theme changes, and pull updates to your dev store, including creating a repository, setting main, and previewing updates.

Learn to create a 404 page with json templates in Shopify. Apply the attributes name, layout, wrapper, sections, and order within the templates folder.

Create a 404 template schema with title and sub text settings and set their default values. Validate that changes update in real time through the customizer.

Learn to design a centered 404 page in Shopify using Tailwind CSS, wrapping the template with a schema tag and enabling a theme editor back-to-home button with a URL fallback.

Create and publish a blog post in a Shopify store, add placeholder lorem ipsum content and a thumbnail from pexels, and migrate the article template from liquid to JSON template.

Migration from liquid to json template for article pages, covering article content, metadata, thumbnail, author, published date, image alt, and SEO, with schema settings and design considerations.

Create a schema settings and blocks system for the article template, enabling toggles for author and publish date, define block order, and render content with json template and liquid.

Design the article page with Tailwind CSS to deliver a responsive layout featuring category, title, date, author, and a featured image or placeholder svg, plus seo-friendly json structure.

Enable and render the article's comments in a Shopify theme, build a complete comment form with author, email, and body, and implement validation, error messages, success alerts, and pagination.

Learn how search engine optimization for article pages boosts organic traffic inside a Shopify theme by implementing schema.org blog posting metadata, headlines, and article body.

Implement json-ld structured schema for article templates, compare microdata with json-ld, and optimize blog post search engine optimization using headline, body, image, date published, author, and publisher.

Learn to build a Shopify blog page by converting the blog template from Liquid to JSON, rendering articles with images and titles, and styling with Tailwind CSS, including pagination.

Learn to add a blog page schema setting that lets merchants set blog post per page with a range from 1 to 6, using the paginate tag.

Design and render a responsive blog page with a grid of article cards, images or placeholders, titles, excerpts, and a read more link, plus pagination controls.

Learn how to implement simple blog pagination in a Shopify theme by creating a reusable pagination snippet, passing the paginated object, and rendering next and previous links with accessible nav.

Convert the liquid cart template to a json cart template, create cart.json and a template cart section, and build a modular cart page with heading, product list, and checkout buttons.

This lecture teaches building a Shopify cart page that handles empty and filled carts, renders a product table with quantity updates, supports checkout, and adds a cart notes area.

Learn how to create test orders in development stores by enabling optional customer accounts, activating the bogus gateway, and simulating transactions with test card numbers.

Define a settings schema for cart with subtotal, update button, and checkout button blocks, wire them in cart.json, and render using a for loop and case blocks to enable reordering.

Learn to migrate the collection template to a json structure, paginate and render products with Tailwind CSS and hover animations, and reuse a responsive product card snippet across sections.

Design a responsive Shopify collection page using Tailwind CSS. Build a grid of product cards with vendor, title, and price, add pagination, and use placeholder images.

Create a collection page setting in the theme's schema for the template collection to control the number of products per page, using a number-type setting with a default of six.

Create a hover zoom animation for product images on collection and product cards using Tailwind CSS, with a 1 second transition, ease in and out, and transform scale.

We migrate the index template from liquid to a json template, create index.json with sections and orders arrays, and wire a featured collection section for the home page.

Migrate the list collections template from liquid to a json template in a Shopify theme, then render collections with images and titles using Tailwind CSS.

Learn to migrate a Shopify page from liquid to a JSON template, create a reusable contact form section with Tailwind CSS, and render content across pages.

Render the page content by displaying the title and content from the page object using a heading and a content div, as shown on the about us page.

Design the Shopify page template using tailwind css by building a centered flex column container, enlarging the about us heading, and spacing content with responsive margins and max width.

Learn to build a reusable Shopify contact form section compatible with Online Store 3.0, including schema presets, responsive two-column layout, and validation for name, email, and message.

Create a json template for the contact page, replacing the liquid page and using reusable sections for the template page and the contact form.

Migrate the product template from liquid to json, implement image carousels with Swiper JS, render videos and YouTube, and build Tailwind CSS sidescroller with variant selectors and add to cart.

Create two Shopify products with media: the first with images and a video, the second with an image, a video, and a YouTube embed; configure variants, pricing, and summer collection.

Learn to build a mobile friendly product media carousel in Shopify theme development using Swiper.js and TailwindCSS, including setup, slides, pagination, navigation, and styling.

Render the product form by displaying vendor, title, price, variant selector, quantity, description, and add-to-cart button, with a sale badge for available variants.

Fix the product media and the template product button in liquid in this quick lesson, using a selected_variant variable to ensure the button enables when a variant is available.

Learn to build schema blocks for the product form in a Shopify theme, including vendor, title, price, variant selector, quantity, description, and checkout buttons.

Build a custom variant selector using custom elements, update price and form inputs, and reflect the selected variant in the URL and add-to-cart workflow.

Create and toggle a search bar in Shopify theme by building an alpine component, rendering a search icon, and submitting a form to the search URL with a q query.

Migrate the search template from liquid to json, implement ten-per-page pagination, and render product cards with images, titles, prices, and vendors.

Create a modular Shopify login page using json templates and sections, with an email and password form, optional recovery, and Alpine.js toggling.

Build a Shopify registration page using the create customer form with first name, last name, email, and password, plus add custom data via notes and test with a preview URL.

Test the forgot your password form for a customer by entering a valid email on the login page, trigger password recovery, and verify the received password reset email.

Discover how to enable and implement guest checkout in Shopify themes, contrasting registered versus guest checkout and building a guest login form that redirects to checkout.

Build the customer account page for Shopify theme development by rendering order history and account details with the customer object, using json templates, sections, and a responsive two-column layout.

Learn to build a Shopify order page using Liquid templates and json templates, rendering the order number, line items, addresses, statuses, and payment details with a responsive user interface.

Render fulfillment status for each line item, showing fulfilled quantity, tracking details, and a track order button linking to the tracking URL. Show a not yet fulfilled message when applicable.

Render the customer order page section by displaying billing address, payment information from order transactions, and a subtotal, shipping, and total with responsive grid and Tailwind CSS styling.

Learn to build the customer addresses interface in Shopify theme development, including create, edit, delete, and set their default address, with a responsive grid and province options updating by country.

Develop and style the create new address modal in Shopify theme development using Alpine.js, TailwindCSS, and Liquid form tags; build the address form with country select, province, and zip code.

learn to implement JavaScript side of the customer address form by wiring country and province selectors, extracting provinces from option data, populating the province dropdown, and handling create address interactions.

Learn to add an edit addresses modal in the Shopify addresses template, opening with a button, pre-filling inputs via Alpine JS, and submitting through a shared customer_address form.

Learn to set an existing or new address as the default in the customer address templates by adding a set-as-default checkbox in the edit and new address modals.

Learn to implement deleting customer addresses on a Shopify theme by adding delete buttons, a confirmation dialog, and a dynamic form submission using JavaScript and Liquid data attributes.

Build the activate account page by implementing a password and confirm password form, rendering errors, and offering activate or decline invitation actions via liquid templates and Tailwind CSS utilities.

Learn to eliminate the bleeping on page reloads in Shopify themes by applying Alpine.js x-cloak to hide elements until Alpine initializes, ensuring clean, seamless page loads.

Fix Shopify cli errors by excluding package-lock.json with a Shopify ignore file, preserving the theme structure (assets, config, layout, locales, sections, snippets, templates) and restarting with Shopify theme serve.

Learn to use Shopify theme check to detect liquid syntax errors, missing templates, and performance issues, and follow practical steps to fix tag usage, spacing, and deprecated filters in themes.

Fix a SwiperJS error on product pages by loading the SwiperJS library after the DOMContentLoaded event, initialize with a try-catch, and resize media using viewport width.

Learn how to use 3d models in Shopify by uploading and rendering them in product media, including Apple Watch and green shirt, and previewing them with the 3d model viewer.

Learn how Shopify renders 3D models using the model viewer tag, powered by Google's model viewer, and why enabling AR and 3D media boosts conversions up to 250%.

Set up the product model component to render a 3d model thumbnail and load the model viewer on click, then create the model window and reveal interaction template.

Set up a product model modal window in a Shopify theme, wiring Alpine.js to toggle a 3D model viewer with open and close buttons, using Tailwind CSS and liquid templates.

Create a custom product modal element and clone a model viewer template. Insert the clone and bind the open button to render the selected media model with auto reveal.

Maximize the model viewer size by setting 100% width and height, applying absolute positioning, and using a padding-top aspect-ratio box with min and calc for responsive height.

Explore how to enable Shopify's model viewer UI using the Shopify object and load features to display a zoomable, fullscreen 3D product model, despite limited documentation.