Web design in Barcelona: connect the online shop with the real store

For a Barcelona retailer, good web design connects the character of the shop with accurate products and a dependable purchase. The useful question is how the online catalogue, languages and fulfilment work together. Use this brief to compare a design studio, ecommerce specialist or platform implementation on the same scope.

Choose the operating model before buying a storefront

Decide whether the site sells from the same stock as the physical shop, reserves items for collection, or presents a catalogue for later consultation. Those choices determine what the website must know and which member of staff has to act. A small collection with reliable manual stock updates can be a sensible launch; a large catalogue shared with a busy shop may need a connection to the existing inventory system. Neither approach becomes correct simply because a proposal names a popular ecommerce platform.

Barcelona Activa's local-economy programme includes advice for neighborhood commerce, while Cibernàrium offers ecommerce training. These are useful local support routes for clarifying the business process before commissioning software. They are not endorsements of a web agency. Write down who receives an order, confirms availability, prepares it and handles a change. Ask the designer to show how those operational facts become visible to the customer at the right moment.

Plan Catalan, Spanish and international content explicitly

Language scope should follow the customers you serve and the support your team can provide. If the project includes Catalan and Spanish, count product descriptions, variant names, category explanations, checkout messages, order emails and help content in both. If English is also needed, specify it as another maintained edition. A language menu with only translated navigation leaves the hardest work to the customer precisely when they are choosing a size, checking a material or arranging delivery.

Keep shared product facts such as dimensions and stock in one controlled source while allowing natural editorial wording in each language. Assign a reviewer for terminology and a rule for incomplete translations. Show a clear fallback instead of silently switching language during checkout. This article has English and Spanish editions; it does not pretend to be Catalan content. Ask the studio to identify who supplies and approves Catalan in the production project, including the future updates your staff will need to make.

Design the product page around the buying uncertainty

A beautiful grid introduces the collection; the product page must resolve what the customer is buying. Use the actual material, dimensions, available variants, photographs and care information that matter for that product. Do not make every item conform to a demo with a single image and a short title. Ask to see a product with several variants, one with only one available unit, and one that cannot be shipped through the standard delivery option.

Photography should communicate scale and detail, with appropriate mobile crops and useful descriptions. A variant selection must update the relevant price, availability and image where those differ. Preserve the selection in the basket and explain when it is unavailable. Google provides specific guidance on ecommerce URL structure and product variants; ask the implementation team to document its chosen approach rather than creating uncontrolled duplicate product URLs. The acceptance test is that a shared product link opens the intended item reliably and the chosen variant survives the purchase journey.

Make collection and delivery promises match the shop

Click-and-collect is a workflow, not just a shipping label. Define whether the item is reserved immediately, when the customer receives a ready-to-collect message, where they go and what happens if staff cannot locate it. A completed payment does not necessarily mean an order is ready. Give staff a simple way to update the status and give the customer a clear route to ask about it.

For delivery, test an accepted address, an unsupported destination, a mixed basket and a product with a different handling requirement. Keep the price and delivery expectation visible before the customer commits. Ask the business's advisers to approve the applicable sales, privacy and returns terms; the design proposal should specify implementing the approved text and interactions. Do not copy another shop's terms and assume they fit. A useful launch demonstrates both the normal order and an exception that staff can resolve without a developer intervening in every transaction.

Compare this illustrative shop brief across proposals

Imagine a Barcelona design shop with forty products, two languages at launch, local collection and shipping to an agreed list of destinations. It has existing product photography, but dimensions and care instructions still need editorial work. A comparable proposal covers the product model, data entry, language review, art direction, platform setup, fulfilment messages, training and migration of useful old pages. This is a made-up project for scoping, not a Dardo case or a local price benchmark.

Price the initial setup separately from subscriptions, payment fees, paid extensions and routine catalogue support. Ask what changes when the collection doubles or another language is added. Count the work you must supply yourself so a low implementation fee does not hide weeks of unassigned product preparation. The table separates three scopes that are often sold under the same phrase, online shop. Choose the smallest one that reliably supports the actual business, then price optional additions clearly.

Compare this illustrative shop brief across proposals
ScopeRequired operating decision
Catalogue and inquiryWho confirms availability and sends a proposal?
Store with manual stockWho updates stock after an in-store sale?
Connected inventoryWhich system is authoritative when records disagree?

Accept a working operation, then improve discovery

Before sign-off, ask the shop operator to add a product, change a variant, process a test order and handle an unavailable item. Repeat the customer's journey in every launch language and with keyboard navigation. Confirm the domain, platform account, product data and image rights are owned by the intended party, with a documented export and handover path. A beautiful storefront is incomplete if daily work can only be done through the original supplier.

Review indexable product and category URLs, internal links and the relationship between translations. After launch, compare product visits with completed orders, collection problems and useful inquiries; a popular category that creates confusion may need clearer content before more traffic. A Barcelona project does not require a local office for every task, although a shoot or in-store observation may benefit from one. Verify office claims directly. Dardo publishes this buying guide without asserting a Barcelona address or guaranteeing a search position.

Plan a project with Dardo
Make the brief useful / ES

Plan a project for Spain

Choose a review date and a time in Bogotá to see the corresponding local time. This is a planning aid, we’ll confirm availability when we reply.

Choose a date to compare times.

Europe/Madrid — Representative time zone; some countries have more than one. Check the actual city and agree on a working window. Dates include seasonal clock changes through your browser’s time-zone data.

Budget currency to discuss: EUR. The project calculator lets you enter your own rate. It does not convert exchange rates.

From a brief to a conversation

Let’s make it happen.

Send your result and project details directly to Dardo. We’ll review them and reply to your email. Review the included details below before sending.

Review the result we’ll receive

WhatsApp +57 316 337 3216

Prefer email? hello@dardo.studio

Sources & further reading

Sources behind this guide, with further detail from the original publishers.

How we publish these guides

Have a project in mind?

Let’s talk