Shopify Theme Development: Create Shopify Themes [2023]

Install theme kit across Linux, Mac OS, and Windows using the official scripts and package managers, then verify the installation with theme kit version 1.30.1.

Create a new Shopify theme project in VS Code using theme kit, starting with a project folder, and configuring the password and store domain to upload a blank slate theme.

Explore the Shopify theme structure—assets, config, templates, and liquid files—learn to customize settings, like nav bar color, and publish changes with theme deploy or theme watch.

Speed up Shopify theme development by installing Bootstrap, uploading its assets, and referencing them with stylesheet and script tags in theme.liquid, while planning custom styles later.

Install liquid and shapefile liquid extensions from the marketplace, beautify the liquid code, create a hero liquid section, and use the section tag to validate the index liquid.

Learn how to build a Shopify product page from scratch with Liquid, including product and image variables, variant selection, an add-to-cart form, and dynamic payment buttons.

Build custom Shopify pages, including about us and FAQs, by creating page templates with layout settings (container or container fluid) and a dynamic FAQ using blocks and a Bootstrap accordion.

Develop the collection template by rendering products, enabling pagination, and adding filtering and sorting options to help users navigate collections.

Build a collection filter by adding a sort by select with options, including price, best selling, and alphabetical sorts; use JavaScript to update the URL parameter sort_by and refresh results.

Learn to build a Shopify blog page by rendering posts as cards with title, author, date, and excerpts, including images and pagination via a Liquid snippet.

Build a Shopify article page by creating the article template with header, title, author and date, a two-column layout, and a dynamic comments section.

Learn to build a simple article sidebar in Shopify themes by adding two blocks—image and rich text—configuring the section in liquid, and rendering it in the template.

Create a configurable Shopify theme footer with a dedicated section and blocks for navigation and store details, render menus, and adjust the number of columns using section settings.

Learn to create a Shopify theme search form, adjust the header and hero image, and preview search results, including configuring the form action, method, and input name for search queries.

Learn to customize Shopify search results by editing search template files, implementing a product grid with cards and images, and adding type filters for products, articles, and pages with pagination.

Build a Shopify theme login page with an email and password form and a submit button. Include error handling via a reusable form-error snippet in the login template.

Create a Shopify addresses page featuring address cards and a Bootstrap modal to add and delete customer addresses with dynamic country and province selection.

Build a Shopify order page by creating the order template, showing billing and shipping info with status badges, and listing line items with prices, quantities, and a subtotal.

Learn how to build and customize the Shopify account activation and reset password templates, including activation emails, password and password confirmation fields, and forgot password flows.

Master Liquid to explore filters and objects, optimize your theme by extracting reusable code into snippets like the product card, and learn Bootstrap to enhance Shopify theme design.

Learn to add a translation selector to a Shopify storefront, configure multiple languages, and implement a translation liquid with a localization form and a bottom-right drop-up menu.

Fix styling and responsiveness in a Shopify storefront by adjusting the hero section, navigation spacing, footer, and featured collection layout, using height, object fit, object position, and z-index tweaks.

Learn to display Shopify payment method icons by looping over shop.enabled_payment_types in Liquid, rendering each payment type image, and adding a theme setting to toggle icons on or off.

Create a bootstrap modal popup powered by the Shopify product API, fetch product data via Ajax, and display image, title, price, and description when users click a product.

Learn to display a live cart item count by using the card API and fetch, updating the header badge via DOMContentLoaded.

Learn to implement product recommendations on the product page using the product recommendation API, and render related products as cards with image, title, and link.