eCommerce Storefront Template

What the storefront covers

The template includes the three pages every small shop needs: a home page that sells the brand and shows best sellers, a product page with gallery, options and details, and a cart with an order summary. Preview them above and add an item to see how the pieces connect.

Set up your shop

1. Brand. Replace "Corner Shop", the announcement bar text and the footer links. Change the free-shipping threshold in the bar and in assets/site.js together.
2. Products. Each card is a repeated block: image, category, name, price and an optional old price with a Sale badge. Duplicate cards for more items.
3. Product page. Update the title, description, price, colour options and accordion text. The thumbnail strip swaps the main image, so list your own photos.
4. Cart. The line items and totals use a small script so you can see the layout respond. Replace it with your platform logic when you integrate.

Photography tips

Use one consistent background and ratio. Square crops fit the grids here. Compress images to about 100 to 200 KB, and add descriptive alt text for each product, which helps accessibility and search.

Connect real commerce

For a few products, a hosted checkout link on each Add to cart button is enough. For a larger catalogue, use this layout as the front end of a headless setup, or as a base for a theme on your platform. Remember to add shipping and returns policies, a privacy policy and your business details before launch.

Colours

The rose accent comes from variables in src/input.css. Edit them and rebuild with npx @tailwindcss/cli -i src/input.css -o assets/tailwind.css --minify.

Need the full system?

When you outgrow a static design and need inventory, orders, accounts and payments, DEV3 can build a custom store around this look.