Shop Poppers
a catalog and store with clear control over availability
Shop Poppers got a site where the products look like one well-ordered collection, but they do not all behave the same way. Eight items can go into the cart, while ten have a price and a separate information page with no option to order. That difference is enforced both in the interface and on the server.
- Online store
- Serbia
- October 2026
- 4 min read
- PHP 8.5
- MariaDB
- Vanilla JavaScript
- WebP
- Customer
- Shop Poppers
- Industry
- Online catalog and store
- Area
- All of Serbia
- Type
- Online store with an informational catalog
- Catalog
- 18 products · 8 available to order · 10 information-only
- Technologies
- PHP 8.5 · MariaDB · Vanilla JavaScript · WebP
- Website
- shoppoppers.rs
- Status
- Live site, actively maintained
01 / 07
One catalog, two kinds of availability
Shop Poppers has 18 publicly listed products. Eight items are available to order, while ten products stay in the information-only part of the catalog, with a price, a description and a separate page, but no option to buy.
So the visitor does not end up on two separate sites or hunt for a price list in a document. Everything is in the same visual whole, and labels, buttons and helper text clearly show what can be done on each card.
On phones and computers the catalog stays easy to read, with uniform cards, large product photos and short paths to the details, a call or a message.
02 / 07
Availability is more than a label on a button
The most important rule is enforced on the server. An information-only product cannot be added to the cart by changing the HTML, sending a hand-crafted request or editing data in the browser. On every attempt, the server checks the product record and accepts only items marked as available to order.
The same check runs again at checkout. That is why the cart is not the source of truth for the price, availability or the shipping charge. All three values come from the database again before the order is accepted.
This double check lets the information pages stay public and useful without creating a hidden path to a purchase.
03 / 07
The cart and the shipping rule
For available items, buying starts right in the catalog: adding to the cart gives a clear confirmation, the quantity can be changed without hunting around, and the order summary shows the items and the final total.
Shipping is 550 dinars when one product is ordered and free for two or more. The rule is shown throughout the site, but the server makes the final calculation based on the actual number of items. So changing the amount by hand in the browser cannot change the order price.
Ordering is built for cash on delivery, with no card details collected on the site.
04 / 07
The admin panel follows how the business actually works
For each product in the sales part, the owner marks in the panel whether it is available and whether it is currently on sale, and a single switch in the settings closes the cart and ordering for the whole site while the catalog stays visible. Information-only products do not have those fields: sales are permanently turned off for them and cannot be turned on from the panel.
A change does not require a new page or a code change. The same record drives the card, the product details, the buttons and the server checks, so there is no risk of one place showing one thing while another still shows the old state.
The panel brings products and orders together, so the client maintains the catalog and tracks purchases in one place. Logging in to the panel also requires a one-time code from an authenticator app.
05 / 07
A visual system for the products
The original photos were not consistent: the angle, lighting, background and amount of empty space all varied. For the catalog we built a consistent display system, with the same product-to-frame ratio, controlled lighting and backgrounds that match the brand's character.
The photos are used as part of the design, not as separate rectangles pasted onto cards. The home page combines cut-out products with larger compositions, while the catalog uses a calmer frame so that comparing items is easier.
The same visual language continues on the individual product pages, through cards for key information, price, availability and contact.
06 / 07
Product pages and help for the buyer
Each product has its own URL, name, description, price, photo and structured blocks of information. Available products lead to the cart, while information-only ones offer a direct call or message when the visitor needs help.
Contact prompts are not left only in the footer. They sit where questions most often come up: on the card, on the product page and next to the availability explanation. On phones, floating call and email buttons also stay within easy reach.
All pages use the same header, spacing rhythm, rounded cards and a line that guides you through the content, so the catalog and the details feel like one system.
07 / 07
SEO and final checks
Products have their own canonical URLs, titles and descriptions for sharing and search, with Open Graph images and structured data based on the actual page content. The sitemap includes the public product pages, while the cart, confirmations and the admin area are kept out of indexing.
Before launch we checked the cart flows, the protection of information-only products, the shipping calculation, the order form, and the display of all 18 cards and all media. The visual check covered wide screens and phones, keyboard navigation, focus, the browser console and how messages behave under the sticky header.
The result is a live site with a clear line between the catalog and sales, without promises about search rankings that no technical optimization can honestly guarantee.
Numbers
Measured, not promised.
On a phone
The same site, in your hand.
Most visitors come from phones, so the layout, buttons and images are arranged for the small screen first.
Questions
What clients ask.
How is it decided which products can be ordered?
Only products from the sales part of the catalog that are marked as available and on sale in the admin panel can be ordered. The server checks this when an item is added to the cart and again at checkout, so an information-only product cannot be bought by sending a request manually.
Do the information-only products have their own page?
Yes. Each one has its own URL, photo, price and description, plus contact options for further questions. There is no path to purchase on that page.
How is shipping calculated?
Shipping is 550 dinars for one product and free for two or more. The final calculation is done by the server, based on the items that are actually available to order.
Can the client change a product's status on their own?
Yes, for products in the sales part of the catalog: availability and whether a product is on sale are changed in the admin panel and immediately control the buttons and the server rules, with no code changes. Information-only products stay off sale, and that cannot be changed from the panel.
Does the site work on a phone?
Yes. The catalog, product pages, cart and contact elements are adapted to smaller screens and checked in the mobile view.
Can you promise first place on Google?
No. The technical foundation, content and structured data help search engines understand the site, but the position is determined by competition, time, domain authority and algorithm changes.
Related projects
From the same field.
Hemax Pro Wash
Leskovački Kutak
