Shopify Ultimate Component is an all in one shopify liquid section that can be dropped into your thems code and provide a wide variety of customizer options to help you quickly build beautifully looking single page layouts.
See it in use at WAMCoffee.com
- Easy to install, copy code into the web based shopify code editor for your theme.
- Self Contained, Reusable even on the same page.
- A LOT of customizer options.
- Simple CSS overrides
- animate.css animations
- lax.js paralax support
- supports disruptive horizons
- separate mobile and desktop configurations
- image lazy loading
- video backgrounds
- overlay colors and images
- horizontal and vertical content layout.
- spacing customizations
- shopify image pickers
- shopify color pickers
- Open your shopify code editor (Sales channels>Themes>Actions>Edit Code)
- find the section on the left labled
Sections
- Click Add a new section
- Name the component
ultimate-compnent.liquid
- Click Create Section
- copy the raw github content of
ultimate-component.liquid
from this repo replacing everything on the shopify code editor tab for yourultimate-compnent.liquid
file. - Hit save on the top right
- open up your shopify theme customizer
- on the left side add a new section to your desired page and search for Ultimate Component
- customize the ultimate component to your liking from the right side with the ultimate component section selected.
- Note: There are 2 different areas for settings because the Ultimate Compnent supports multiple instances horizontally in each section(Not Actively Maintained though)
If you want to contribute or add new functionality to this component, feel free to open a PR with a fully tested(Manually) code change and I will merge it in to main.
MIT