Skip to main content

Theme Settings

Delivery Gateway allows you to fully customize how the Delivery Gateway widget appears on your storefront. You can manage global settings from the app dashboard and fine-tune the visual appearance directly within the Shopify Theme Editor.

Accessing the Settings​

To access the configuration menu:

  1. Open the Delivery Gateway app in your Shopify Admin.
  2. Navigate to Theme settings in the left-hand sidebar menu.
Theme settings page in Shopify Admin

1. App Embed Status​

At the top of the Theme settings page, you will see the global status of the app embed.

  • Status Indicator: Look for the green Active badge. This confirms that the Delivery Gateway app embed is enabled in your current theme. If the badge is yellow and displays Inactive, you must enable the app embed to activate it.
  • Clicking Open app embed settings button takes you directly to the Shopify Theme Editor, where you can toggle the embed on or off.

2. Widget Locations​

You can choose exactly where the delivery widget appears on your website. Each block in the Theme settings menu corresponds to a specific stage in the customer's journey.

Cart Drawer​

Displays delivery options directly within the side cart drawer.

Cart drawer configuration in Shopify Theme Editor

Cart Page​

Adds the widget to the standard full-page shopping cart.

Cart page configuration in Shopify Theme Editor

Checkout​

Adds the Delivery Gateway Checkout UI extension to the native checkout flow.

note

Checkout UI extensions are only available for Shopify Plus merchants.

Checkout configuration in Shopify Theme Editor

Thank You Page​

Customizes the order confirmation experience. Displays pickup point details immediately after purchase.

Thank you page configuration in Shopify Theme Editor

Order Status Page​

Ensures customers can reference delivery details later. Adds the widget to the Order Status/Tracking page.

Order status page configuration in Shopify Theme Editor

3. Visual Customization​

Open the Shopify Theme Editor and navigate to the App embeds tab on the left sidebar. Ensure the Delivery Gateway Embed toggle is switched ON to enable the features.

Checkout configuration in Shopify Theme Editor

You can configure the following sections to match the widget to your store's design and technical structure.

Theme Customization​

This section allows you to control the visual appearance of the Delivery Gateway interface.

  • Brand color: Select a primary color to customize buttons and highlights within the interface. If you want to use the Delivery Gateway default color, leave this field transparent.
  • Surface rounding: Choose the rounding style for container surfaces, such as modals and cards (e.g., Default).
  • Button rounding: Select the shape style for buttons. Options include Full (rounded), Square, or Default.
  • Font family: Specify the font family name (e.g., Inter, sans-serif) to ensure the widget matches your store's typography. Leave this empty to use the default font.

Cart Drawer Configuration​

This section manages how Delivery Gateway integrates with your store's "Cart Drawer" (slide-out cart).

Cart drawer configuration in Shopify Theme Editor

Enable cart drawer support: Toggle this option to enable functionality inside the cart drawer.

note

The app currently has automatic support for themes like Horizon, Atelier, Mix, and Brooklyn. We continuously work to add support for more themes. Contact our support team if you need assistance.

Cart drawer configuration (advanced): If your theme is not automatically supported, you can manually specify the drawer's CSS selectors using JSON format in this text area.

Example configuration:

{
"drawerSelector": "#CartDrawer",
"drawerContainerTarget": ".cart-drawer-price-total",
"containerInsertPosition": "below"
}

Configuration parameters:

  • drawerSelector: The CSS selector identifying the main div element of your theme's cart drawer.
  • drawerContainerTarget: The specific element within the drawer where the Delivery Gateway widget should be anchored. We recommend placing this between the cart total amount and the checkout button.
  • containerInsertPosition: Values: above or below. Defines the placement relative to the drawerContainerTarget.

This determines if the widget is generated immediately above or below the target element.

Insert position: Choose where the Delivery Gateway section is inserted relative to the target selector:

  • Above selector
  • Below selector.

Cart Note Configuration​

The app automatically saves the customer's delivery instructions into the cart's Note field.

Cart note configuration in Shopify Theme Editor

Cart note field selector: If the automatic detection fails, you can manually input the document query selector for your cart note field here (for example, textarea[name="note"], input[name="note"]).