> For the complete documentation index, see [llms.txt](https://www.oddle.me/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.oddle.me/docs/new-guests/shop/setting-up-for-online-ordering/storefront-and-branding.md). # Your Storefront & Branding Your webstore is the first thing guests see when they order from you online. How it looks and feels shapes their experience — and their confidence in ordering. Oddle Shop gives you a full visual editor to customise your storefront so it feels like an extension of your restaurant, not a generic ordering page. *** ## Your Webstore URL Your webstore lives at a branded URL under `oddle.me`: ``` https://your-brand.oddle.me ``` This is the link you'll share everywhere — your website, social media, Google Business Profile, printed materials. Keep your URL slug short and recognisable. ### Custom Domain If you'd prefer your webstore to live on your own domain (e.g., `order.yourrestaurant.com`), Oddle supports custom domain configuration. There's a guided setup flow in Merchant Admin — follow the steps and you'll have your custom URL pointing to your Oddle Shop. {% hint style="info" %} For detailed DNS configuration steps, see the Help Centre guide on custom domain setup. {% endhint %} *** ## The Shop Editor The Shop Editor is where you customise the look and feel of your webstore. Access it from Merchant Admin under **Channels > Editor**. The editor has a live preview (switch between desktop and mobile views) and a toolbar on the left for making changes. It's organised into two areas: **Sections** (the building blocks of your page layout) and **General Settings** (styling that applies across your entire webstore). ### General Settings These apply to every page on your webstore: **Colours** — You control six colour settings: section headings font, headings font, body font, lines and borders, container (background of elements), and page background. Choose colours that express your brand while keeping text readable against backgrounds. **Typography** — Choose a font family that fits your brand. Serif for modern, cursive for elegance — it sets the tone for your entire webstore. **Buttons** — Customise button colour and style. Buttons appear across your webstore for "Add to Cart," "Order Now," and other calls to action. **Presets** — Start with a preset colour and style combination, then customise from there. ### Sections Sections are the building blocks of your webstore pages. You can add, remove, rearrange, and hide sections to create the layout you want. **Header** — Your logo, shop name, and navigation. You can link your logo to your own website instead of the webstore if you prefer. **Products** — How your menu is displayed. Choose between **Grid** layout (emphasises food photos) or **List** layout (better for longer descriptions). Category navigation can sit on the **Side** (shows all categories at once) or **Top** (better for many categories). **Slideshow** — Up to 5 rotating slides with images, text, and call-to-action buttons. Great for showcasing your brand, delivery areas, or current promotions. Optional auto-scroll with configurable intervals. **Wide Banner** — A full-width attention-grabbing section with image, text overlay, and call-to-action buttons. Three height options (small, medium, large) for different visual impact. **Reservation** — If you use Oddle Reserve, you can add a reservation section so guests can book a table while browsing your webstore. **Promotion Filmstrip** — Displays your active promotions on the menu page. Promotions need "Show on shopping cart" enabled in their settings to appear here. **Marketing Popup** — A popup that can collect email addresses (newsletter signup) or display announcements. You can offer a promo code as a reward for subscribing. Three trigger types control when the popup appears. **Instagram Feed** — Connect your Instagram account to display your latest posts on your webstore. **Custom HTML** — For advanced customisation if you need something beyond the built-in sections. **Footer** — Background colour, navigation links, and up to 4 content blocks. When you're happy with your changes, click **Publish** in the top right to push them live. *** ## Tracking & Analytics You can connect tracking tools to your webstore to understand where your traffic comes from and how guests behave. These are configured in Merchant Admin under **Channels > Online Shop**. **Google Analytics 4** — Track page views, conversions, and guest behaviour on your webstore. **Facebook Pixel** — Track traffic from Facebook and Instagram ads, build retargeting audiences, and measure ad performance. {% hint style="info" %} Setting up GA4 or Facebook Pixel requires some familiarity with those platforms. See the Help Centre for detailed setup guides. {% endhint %} *** ## Driving Traffic to Your Webstore Your webstore is only valuable if guests can find it. A few key places to share your link: **Google Business Profile** — Add your webstore URL as an ordering link. When guests search for your restaurant on Google, they can order directly. **Facebook** — Add an "Order Food" action button on your Facebook Business Page that links to your webstore. **Instagram** — Add your webstore URL to your profile's website field. **Your own website** — Link directly or embed an "Order Now" button. All orders, regardless of where they come from, flow into the same place — your Register App. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://www.oddle.me/docs/new-guests/shop/setting-up-for-online-ordering/storefront-and-branding.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.