Customize your menu theme, colors, and fonts in Dutchie E-Commerce

In this article, learn how to use custom theming tools to give you more control over the look and feel of your Dutchie E-Commerce menu. 

Things to know

  • This feature requires the Store Settings permission. 

  • If you have multiple locations, you can publish menu customizations to apply to all locations. Click the Apply to all locations button, or after making a change, you'll see a prompt to publish to all locations:

    Popup asking to publish changes to all locations.

    If you have a Dutchie Mobile App, you'll also see a separate set of options that apply only to your mobile app. See Customize your Mobile App navigation bars and tabs. 

Customize your menu

To get started, log in to Dutchie E-Commerce Admin, and select the Customize menu, then select one of the following tabs:

Theme

The Theme tab houses options for styling the main elements such as buttons, cards, and fields, as well as color options.

Style

Expand the Style menu to choose between Rounded, Rounded Rectangle, and Square styles:

ecomm_customize_theme_button styles.png

Colors

In the Colors section, you can set colors for your Navigation Bar, Buttons and Links, Staff Pick Tag, and Discount Tag. You can also choose between a solid or tinted Product Card Button (e.g., "Add to Cart").

For Buttons and Links, Staff Pick Tag, and Discount Tag, you can click + Add to choose a custom color or enter a Hex Code for an exact match to your brand colors.

ecomm_customize_color picker.png

Fonts

ecomm_customize_fonts.png

In the Fonts tab, select from a variety of available fonts for both Heading and Body text. The Text Transform section controls the text case (UPPERCASE, Title Case, Sentence case, or lowercase) for buttons, links, and tags.

Note!

Dutchie does not support custom fonts. We offer a selection of pre-approved options for you to use.

Product Cards

In the Product Cards tab, you can customize the following:

ecomm_customize_product cards.png
  • Default View - select whether to show product Cards or a List view for both Large Screens and Small Screens. For example, you may want to show cards on a large screen but a more compact product list for easier navigation on small screens.
  • Display Product Weight - toggle on to include the product weight next to the price.
  • Text Alignment - choose Left or Center.

Preview your menu

The Preview on the right shows how your menu will look with your current selections with toggles for Homepage vs. Product Pages. If you have multiple locations, you can choose to Apply to all locations to keep your branding consistent without having to repeat your selections for each location.

ecomm_menu customization_homepage product page apply to all.png

Learn more

 

Was this article helpful?