A fully featured starter to help you customize and deploy an ecommerce website in minutes.
This starter brings:
- Home, product and listing pages
- Content editable via CMS
- A/B test compatible
- Analytics
- Integration with VTEX, Shopify and Oracle
- Minicart with
- Coupons
- Total
- Subtotal
- Promotions
- SKU selector
- Full text search
- Search filters
- Search pagination
- SEO optmized
- Meta tags
- Rich results
- OpenGraph
- Cookie consent
- Carousel
- Product shelf
- SKU selector
- Breadcrumb
- Search filters
- Dropdown and hamburger menus
- Minicart
- Newsletter
- Footer
- Link Tree
To execute this website on your machine, clone it to your local machine with
git clone and make sure
deno is installed.
Then open the terminal, change the directory to where fashion was cloned and type
deno task startYou should see the following output
$ deno task start
Task start deno run -A --watch=static/,sections/,functions/ dev.ts
Watcher Process started.
Starting live middleware: siteId=538 site=std
The manifest has been generated for 6 routes, 5 islands, 17 sections and 16 functions.
Githooks setup successfully: pre-commit
Starting live middleware: siteId=239 site=fashion
Listening on http://localhost:8000/
Now, open http://localhost:8000/. You should see the fashion starter running on your machine!
To continue from here, you can perform initial setup, understand folder structure, learn how to create common design patterns (components) and comply to best practices
Below is a checklist for the store's initial setup. After completing these tasks, your store will be ready to go live and won't need any further changes on this repository. If, after changing the content via deco.cx's CMS, you feel the store is not ready for going live, you can learn how to customize the code
Checklist
- Ecommerce platform connected
- Fonts added
- Logo changed
- favicon.ico, robots.txt changed
- Design system changed
Products, prices and promotions are provided by an ecommerce platform (VTEX, Shopify, Oracle). To connect to a platform:
Open the
ecommerce's global config
and set your credentials. Then, open /components/minicart/Cart.tsx and
/routes/api/[...catchall].tsx and replace bravtexfashionstore to your
account name.
After this, your should be using the products provenient from your ecommerce account
- Copy & paste your font files (.woff/.woff2) to
/static/fontsfolder - Open
/components/GlobalTags.tsxcomponent and replace@font-facetags accordingly, i.e. change font-family, font-style and font-weight. Now, change the src attribute with the right font path. - Open tailwind.config.ts and change the
fontFamilyattribute accordingly.
WARNING: Do not forget to use the
asset()function. Not adding it will increase the traffic on your site and lead to higher costs
If your don't know the font-family, font-style and font-weight, ask your designer for these values.
- Make sure you have your logo in
.svgformat - Open your logo in your text editor and copy its content
- Open /static/sprites.svg
- Replace
<symbol id="Logo" .../>with the content of your logo's.svgfile. Make sure all<svg />tags are replaced with<symbol />tag and add theid="Logo"attribute. Also, make sure to have thexmlnsattribute.
Open static folder and replace favicon.ico, robots.txt and
site.webmanifest with your own assets
- Run the store (with
deno task start). - Open the design system section
- Now, on your text editor, open
tailwind.config.ts - Change the default, header, badge, etc colors, text colors and border colors to better fit your desired design and check how the design system section changes.
If you are missing a functionality or the changes in the design system were not enough for accomplishing your project, you can fully customize all HTML/CSS/JS generated on your store by changing the code.
This code uses:
- Deno as runtime
- Preact as rendering engine
- Fresh as meta framework.
- Deco.cx as CMS, A/B Tester and Analytics
To better encapsulate the store's code and separate it from framework specific
code, all HTML generator code was placed into components folder, whereas all
logic related code was placed under sdk. This means that UI elements, like
product shelves, footer, header, product galleries etc are all placed into
components whereas code for computing the prices, adding to cart etc are
placed under sdk. Other folders are framework-specific glue code, and serve
for:
islands: Fresh based folder for adding JavaScript to the frontend. More info at Fresh's docsroutes: Fresh based folder for responding custom routes to the store. More info at Fresh's docsstatic: Fresh based folder for serving static content (assets). Check out Fresh's docsimport_map.json: File containing your dependencies. Check out Deno's docstailwind.config.ts: tailwindcss configuration file. tailwind docssections: deco.cx folder for making components both editable and composable on the CMS. Check out deco.cx's docsfunctions: deco.cx folder for adding dynamic data to sections provenient from third party APIs, like ecommerce platforms, ERPs, contentful, wordpress etc
Deco.cx's commitment to outstanding UX requires minimal work by user's devices. This usually means shipping zero or almost to no JavaScript to browsers. This starter uses state of the art design patterns to create rich UX with HTML and CSS only.
Sometimes, it may be difficult to understand everything that's going on a production-ready code like this starter's components. To learn how to create common UI patterns with HTML and CSS only in a simpler context, take a look at deco.cx's recipes
The best practices for managing the project on the long run rely around respecting folder structure. This means:
- Add
.tsxfiles oncomponentsfolder only - Add preact hooks on
sdkfolder. - To make a component editable, create it on the
componentsfolder and add anexport { default }on thesectionsfolder - To add JavaScript to the browser, create a component on the
componentsfolder and add anexport { default }on the islands folder
Check performance best practices on deco.cx's docs.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent