Shopify Product Page Template - Beginner-friendly code

This repository is a Shopify product page template built from scratch for Online Store 2.0: a custom section and JSON product template drive a full PDP-gallery, options, pricing, description, add-to-cart, and Theme Editor settings - without reusing another theme’s stock product layout.

This project includes custom product sections based on product metafields and metaobjects for dynamic storefront content.

---

Technical Requirements

Same spec as requirements.md:

• Store Setup: Create a Shopify development store and a test product with multiple variants.
• Custom Section: Build a fully custom section from scratch using Liquid, HTML, CSS (Custom CSS or Tailwind), and Vanilla JS (no jQuery). The section must be built independently, without relying on ready-made theme components.
• Customization: Ensure all key elements are customizable via the Shopify Schema. Feel free to add extra fields to enhance the merchant's control over the section.
• Dynamic Product Data: Render product information directly from the Liquid product object. The section must be compatible with any template type.
• Variant Logic: When a user changes a variant/option, the image, title, description, price, and selection state must update dynamically.
• ATC: Clicking the "ADD" button should add the product to the cart and trigger a 3-second mini-notification.
• Notification: Include a "View Cart" option that redirects the user to the /cart page.
• Slider: You are welcome to use external libraries(Swiper, Splide etc) for the image gallery.
• Integration: Connect the Shopify theme to a Git repository.

---

Key files

Files	Role
templates/product.json	Product template that includes the custom section
sections/mojo-product.liquid	Main custom product section (schema + markup + hooks into client behavior)
snippets/mojo-product-*.liquid	Gallery, variant picker, ATC notification markup
assets/mojo-product-form.js	Variant selection → DOM + cart: option/variant sync, Ajax ATC, notification, header cart badge
assets/mojo-product-*.js	All product-page scripts use this prefix - form (row above), gallery (mojo-product-images-gallery.js), accordions (mojo-product-accordion.js), etc.
assets/section-mojo-product.css	Base / section-level styles for the custom product UI
assets/mojo-product-*.css.liquid	Styles scoped to the custom product UI

Theme architecture

.
├── assets      # Stores static assets (CSS, JS, images, fonts, etc.)
├── blocks      # Reusable, nestable, customizable UI components
├── config      # Global theme settings and customization options
├── layout      # Top-level wrappers for pages (layout templates)
├── locales     # Translation files for theme internationalization
├── sections    # Modular full-width page components
├── snippets    # Reusable Liquid code or HTML fragments
└── templates   # Templates combining sections to define page structures

To learn more, refer to the theme architecture documentation.

---

Live preview

There is a real Shopify store where this theme is installed so you can see the product page live. Because it is a development store, Shopify shows a password screen first - enter the password below, then open the product link.

Product page URL (select and copy):

https://product-template-demo.myshopify.com/products/longevity-gummies

Store password:

regiet

Open product page in browser - if you still see the password screen, submit the password first, then use this link again or refresh.

---

Quick start (for learners)

1. Install the Shopify CLI.

2. Clone this repository and from the theme root run:

   shopify theme dev

3. In the admin Theme Editor, open a product page and inspect how the custom section is added and configured.

---

Learning map (how to read the code)

1. Open sections/mojo-product.liquid and read the {% schema %} - this is how merchants control your UI.
2. Trace how variant change events update the DOM (search for JS that listens to option changes).
3. Follow add to cart to see how the Cart API / forms work and how the notification is triggered.

Official references that pair well with this repo:

• Theme architecture
• JSON templates
• Sections & schema

Tech stack

• Shopify Online Store 2.0: Liquid, JSON templates, sections, snippets, {% schema %}, Theme Editor
• Product metafields and metaobjects for dynamic PDP content
• HTML, CSS, vanilla JavaScript (variants, gallery, accordions, cart, notifications)
• Shopify public app: Installed Judge.me Product Reviews and customized it.
• Git, Shopify CLI (shopify theme dev)

---

Stars

If this repo helped you, a ⭐ on GitHub makes it easier for other Shopify learners to find.

---

Disclaimer

Do not use the code in this repository as-is for production stores. This project is intended only for learning, experimentation, and testing. It is not audited for security, performance, accessibility, SEO, or long-term maintainability across all Shopify features and apps. Use official Shopify docs, theme review guidelines, and your own QA before shipping anything to real merchants or customers.

---

Screenshots

Shopify Product Template Demo store - Longevity Gummies product page.

Desktop - product page

Desktop - ATC mini-notification

Mobile - product page

Mobile - ATC mini-notification