Product Story Section

Generate the Liquid, JavaScript, and CSS for a product story section that I can paste into my theme as a custom section, telling the story behind [PRODUCT_OR_BRAND_NAME] in a visually engaging timeline or alternating layout. The section should have [NUMBER] content blocks, each containing an image on one side and text on the other, alternating left-right as you scroll down. Each block includes: a small heading ([BLOCK_HEADING]), descriptive paragraph ([BLOCK_TEXT]), and an optional image. At the top, add a section heading [SECTION_HEADING] (e.g., Our Story, How It’s Made). Use a vertical timeline line connecting the blocks with small circle markers at each block. On scroll, each block should animate into view with a fade-up effect. On mobile, stack image above text for each block. The blocks should be configurable as section blocks in the theme editor schema. Generate Liquid, JavaScript for scroll animations, and CSS.

Where to add this: In Shopify admin, go to Online Store > Themes > Edit code, create a new section file at sections/product-story.liquid, and paste the generated Liquid/CSS/JS (including the schema block) in. Save, then open the theme customizer, add the “Product Story” section to the page, and fill in the content blocks.