Emergency situation

In case of emergencies or breakdowns, you can send an SMS to our emergency hotline

On-call phone (SMS only)

+45 29 70 15 95

Send an SMS with the following information:

  • Your name and webshop
  • Description of the problem
  • Your callback phone number

Notes: This service is only for critical situations where your webshop is down or has serious problems. For regular support, please use our normal support channels.

Delaware Documentation

Everything you need to know to unlock the full potential of the Delaware theme

Welcome to Delaware

Delaware is one of Shoporama's built-in themes. It supports the Page Builder and includes features such as a mega menu, tabs in the product description, add-ons, wish lists, subscriptions, and a multi-step checkout. Here you can read about how to set up these features and how the theme is structured if you want to customize it.

Delaware and DelawareDK: These two themes are identical. Delaware is the English version, and DelawareDK is the Danish version. The settings have the same names behind the scenes, but the names in the admin panel are in English in Delaware and in Danish in DelawareDK. This page usually mentions both names.

Note: The videos show an older version of Shoporama's admin panel. The design has been updated since then, but the layout remains the same, so you'll find the same settings and features in the same places.

Quick setup

Build pages in the Page Builder using the theme's 23 pre-designed sections

Many settings

Manage colors, badges, product pages, checkout, and emails under Theme Settings

Responsive

The layout adapts to mobile, tablet, and desktop devices

Page designer

With the Page Builder, you can build pages using pre-made sections without writing code. You'll find it under Design → Page Builder. Delaware has 23 sections, which you can view in the "Components" section below.

Key features:

User-friendly interface

  • Drag sections into place, or click to add at the bottom
  • Preview link, even for offline setups
  • Expand and collapse the sections for an overview
  • One layout per page type, or only on selected pages

Advanced options

  • Plan a setup with a start and end date and a priority
  • Copy a layout and split-test it under Design → Split Test
  • The "Custom Code" section for your own HTML, schema, or scripts

Tip: Sections that retrieve products or categories find them using the tag you entered in the "Tag" field under " Advanced " on the category or landing page. Therefore, be sure to assign a tag to your categories and landing pages before building the page.

Video tutorial

Mega Menu

Display your product categories and promotions using a large, multi-column dropdown menu. Ideal for stores with many categories.

First things first: CSS class "megamenu"

The mega menu is not activated by a menu name or a menu tag. It is activated by the CSS class megamenu (exactly this string, lowercase, no spaces or underscore) on a menu item in the main navigation.

The class is set in the "Class" field on the individual menu item, not on the menu itself. You can find the field under Content → Menus → Edit a menu item.

The 3-level structure

A functional mega menu consists of three levels of menus that are nested within one another as submenus:

Hovedmenu (placering: Øverst)
└── Menupunkt "Løbehjul"  (type: undermenu, klasse: megamenu)
    │
    └── Mega menu-container (undermenuen)
        ├── Menupunkt "Kolonne 1"  (type: undermenu)
        │   └── Kolonne-menu
        │       ├── 1. menupunkt  → bliver kolonne-overskrift
        │       │   (skal være kategori, produkt eller landingsside,
        │       │    evt. med klassen show_image for billede øverst i kolonnen)
        │       ├── 2. menupunkt  → almindeligt link
        │       └── 3. menupunkt  → almindeligt link
        │
        ├── Menupunkt "Kolonne 2"  (type: undermenu)
        │   └── ...
        │
        └── Menupunkt "Kolonne 3"  (type: undermenu)
            └── ...

Setup step by step

Step 1: Create the main navigation

  1. Go to Content → Menus
  2. Create or open your main navigation, and select the menu location: Top
  3. The name of the menu doesn't matter to the code, but "Main Menu" is a good convention

Step 2: Create the mega menu container

  1. Leave "Place" in the main navigation, click " Add Submenu," and name it after the top-level menu item (e.g., "Scooters")
  2. Type "megamenu" in the "Optional CSS class" field, or add the class to the item afterward in the "Class" field
  3. The submenu will be the mega dropdown itself and must contain one item per column

Step 3: Create one submenu per column

  1. Select the mega menu container under " Place in," and click " Add submenu " once for each column you want
  2. Add menu items to each column. The first menu item will be the column header; the rest will be links.
  3. The headline appears only when the first item is a category, a product, or a landing page. If it is a link, a static page, or a blog post, the item does not appear at all
  4. If you want an image at the top of the column, assign the "show_image" class to the first menu item (the first image in the category, product, or landing page will be displayed automatically)

Step 4: Check the structure

  1. The top-level menu item must be of the "submenu" type and have the " megamenu" class
  2. The columns must also be of the submenu type. Other items placed directly within the mega menu container will not be displayed.
  3. Save the menu. The item in the main navigation now displays a mega menu when hovered over on desktop and when clicked on smaller screens.

The two classes you need to know

megamenu

Set as a submenu item in the main navigation.

Tells the theme to render this top-level item as a large multi-column dropdown instead of a regular single-column dropdown.

show_image

Set on the first menu item in a column menu.

Works for the "category," "product," and "landing page" types. Automatically retrieves the first image from the selected object and displays it at the top of the column as a clickable image. If the object has no image, only the headline is displayed.

Best practices

Recommendations:

  • - Plan the 3-level structure on paper before creating the menus in admin
  • • Spell the class name exactly as " megamenu," not " mega_menu," " mega-menu," or " Megamenu." The comparison is case-sensitive.
  • - Use descriptive titles that make sense to customers
  • - Test the mega menu on both desktop and mobile devices (it folds to off-canvas on mobile)
  • • Keep the number of columns in each mega menu to 3–5. Any more than that makes it hard to navigate.
  • • Use `show_image` sparingly. It draws attention away from the content and works best as an eye-catcher in one of the columns

Watch the demo:

See the mega menu in action at: https://delaware.shoporama.dk

Components

Delaware has 23 pre-built sections for the Page Designer and a number of fixed components on the product, category, and checkout pages. Here is an overview of what’s available.

Sections in the Page Designer

The names listed below are the ones you see in DelawareDK. In Delaware, they are in English. The technical key in parentheses is the name of the template in templates/sections/.

Products

  • Product list (product-list): newest, popular, best-selling, or by category or landing page tag
  • Product slider: like the product list, but with product IDs and Clerk.io types
  • Product feature: featured products with a background image and two buttons
  • Product block: a single product with a title and text
  • Recommendations: e.g., "Others also viewed," "Others also bought," "Popular," or "Customer's most recently viewed"

Categories

  • Category list: all categories, by tag, or by ID
  • Category slider: same selection as a slider
  • Hero video with category/landing page (hero-video-categories): background video featuring up to three categories or landing pages

Content

  • Hero (hero), Banners (banner), and Image Grid (image-grid)
  • Text (text), Text - two columns (text-two-columns), and Text with image - two columns (text-image-two-columns)
  • H1 element (h1 element) and Blog List (blog list)

Trust and Communication

  • Trustpilot (trustpilot) and Value Propositions (value-propositions)
  • Newsletter: three layouts, possibly with a name field
  • Address & Map (address-map), Facebook (facebook-feed), and Instagram (instagram-feed)
  • Custom code: your own HTML, schema, or scripts

Where can they be used?

The sections can be used on the homepage, categories, landing pages, products, static pages, the blog and blog posts, search, the shopping cart, the thank-you page, customer pages, and the 404 page. However, recommendations cannot be selected on static pages, blog posts, the blog, the thank-you page, or customer pages.

"Category Feature" appears on the list in the Page Builder, but Delaware does not have a template for it. If you select it, the page will display a red error box instead of the section. Use "Category List" or "Hero Video with Category/Landing Page" instead.

Product Components

Product display

  • Product Grid - By category with filters and sorting, and on landing pages
  • Product Slider - Swipe-friendly slider with lazy-loaded images
  • Quick Purchase - Add to Cart from the product detail page, with a variant selector as a dropdown on desktop and a panel on mobile
  • Badges - Sale, new arrivals, limited stock, bundle deals, volume discounts, variants, and up to three custom badges
  • Best Sellers - Via a product list labeled "Best-Selling Products" or a product slider labeled "Best Sellers"

Customer Engagement

  • Wish Lists and Favorites - See the "Wish Lists" section
  • Get notified when in stock - Sign-up form for sold-out products or variants
  • Most Recently Watched - Via the Recommendations section
  • Size Guide and Care Instructions - As tabs on the product page
  • Ask a Question - Tab with contact form on the product page

Content & Layout Components

Hero & Banners

  • • Full-width hero with a button
  • • Text placement and size in Hero
  • • Background video via a link to a video file
  • • Light or dark overlay on multiple sections
  • • Banners in two columns
  • • Four-column image grid

Social Proof

  • • Trustpilot widgets in the header, footer, and on the product page
  • • e-mærket widget in the header, footer, and on the product page
  • • User ratings with stars and the number of reviews
  • • Product reviews on the product page
  • • Facebook and Instagram sections

Information

  • • Tabs in the product description
  • • Dedicated tabs for shipping, returns, and payment based on your terms
  • • Tab containing the product's PDF files
  • • Long category descriptions can be collapsed
  • • Value propositions with icons

Address & map

  • - Embedded Google map without API key
  • - Enter address or insert your own embed code
  • • Layout: map on the right, on the left, or just the map
  • - Zoom, map height, and directions link
  • - Extra info field for opening hours etc.
  • - Responsive on mobile

Marketing & Conversion

Urgency & Scarcity

  • Countdown —Until the end of the promotion on the product page, and for additional sales on the thank-you page
  • Low stock - Badges below a limit you set yourself, possibly with a specific quantity
  • Sales and Promotions - Sale Badge and Promotion Message on the Product
  • Backorder Notification - When a customer orders more than is in stock

Lead Generation

  • Newsletter - Sign-up in the footer, as a section, and at checkout
  • Site Notice - Top banner with custom text for desktop and mobile
  • Shopping Cart Sharing - Customers can share a link to their shopping cart
  • Upselling after purchase - Offers on the thank-you page that are added to the order just completed, possibly with a countdown

Navigation & Search

Navigation

  • • Mega menu with images (show_image)
  • • Breadcrumbs, which can be turned off on mobile devices
  • • Category menu on the side of the category page
  • • Menu button and panel menu on mobile devices
  • • The filter bar follows the customer as they scroll

Search

  • • Suggestions as the customer types
  • • Displays both categories and products with images
  • • The arrow keys move between the suggestions
  • • "See All" takes you to the search page
  • • Can be replaced by Clerk.io

Checkout & Trust

Checkout Components

  • Step-by-step instructions at the top of the checkout page
  • Trustpilot or your own review
  • Icons for payment and shipping methods
  • Selecting a Package Shop
  • Shop without creating an account
  • Order summary next to the form
  • Discount code field in the cart and checkout
  • Icons for MobilePay, Apple Pay, and Google Pay

Customized Components

Here's how the theme is structured

Templates
  • • Smarty 4 with <{ }> as delimiters
  • • Reusable parts in templates/components and templates/partials
  • • Page Designer sections in templates/sections
  • • Alpine.js for dropdowns, shopping cart, and filters
Styling
  • • Precompiled CSS and JavaScript in dist/
  • • CSS variables for colors, such as --primary and --action
  • • Icons as SVG sprites in dist/svg
  • • Mobile-first media queries

Performance & SEO

That's what the topic of speed and search engines is all about:

  • Lazy Loading - Images load when they come into view
  • Minified JavaScript - One combined file in dist/scripts
  • WebP - Images are provided as WebP files in the required size
  • Schema Markup - Structured data for products, breadcrumbs, and the store
  • Mobile-optimized - The layout is designed with small screens in mind
  • Accessibility - "Skip to content" link and `aria-labels` on buttons

See all components in action:

Experience the Delaware components live at: https://delaware.shoporama.dk

Shortcodes

Use shortcodes to insert links, products, images, and videos directly into your text.

Where do the shortcodes work? In static pages, blog posts, category descriptions, landing page descriptions, text sections in the Page Builder, and product descriptions without tabs. If a product description has tabs (see point 7), the shortcodes in it will not be translated. The image shortcodes in points 4 and 5 work only on static pages, blog posts, category and landing page descriptions, and product descriptions without tabs.

1. Insert links to products, categories, and landing pages

Shortcode with custom text:

[link type="product" id="2627350" text="Din anchor tekst"]
[link type="category" id="122617" text="Din anchor tekst"]
[link type="landingpage" id="15252" text="Din anchor tekst"]

Shortcode with the title of the object:

[link type="product" id="2627350"]
[link type="category" id="122617"]
[link type="landingpage" id="15252"]

Note: The order must be type, id, and finally text. If the object does not exist, the text "Link not found" (displayed as "Link ikke fundet" in DelawareDK) appears crossed out.

How to find the ID:

The ID can be found in the Shoporama control panel in the URL when editing a product/category/landing page.
Example URL: /admin/en/6581/product/edit/2633263
The ID is the last number in the URL (2633263)

2. Insert product list

Shortcode syntax:

[products ids="123,456,789,101112"]
[products ids="123,456,789" columns="3"]
[products category="122617" columns="4" max="8"]
[products landingpage="15252" max="8"]

Note: Do not include spaces between product IDs. The number of columns can be 3, 4, or 5 (default is 4), and the max value (default 4) applies only to category and landingpage. The ids parameter displays all the products you list. List the attributes in the order ids/category/landingpage, columns, max. If you have multiple category or landing page shortcodes in the same text, they will all display the first category or landing page. Additionally, all [products] shortcodes of the same type in the same text will use the columns and max values from the first one.

3. Insert YouTube video

Shortcode syntax:

[youtube_embed id="lJIrF4YjHfQ"]

Note: Replace this with the video's 11-character ID. You can find it in the video's URL after " watch?v="

4. Insert uploaded images

Shortcode for uploaded image:

[image index="1"]

Note: Inserts the first image you uploaded to the page, blog post, category, landing page, or product. index="2" inserts the second image, and so on. Be sure to include quotation marks around the number. The image description appears as a caption if it has been filled in.

5. Insert images with absolute path

Shortcode for absolute image path:

[image href="https://www.ditdomæne.dk/billeder/banner.jpg"]

Note: Works in the same places as [image index="1"]. For example, use the address of a file you've uploaded under Design → Files.

6. Enter your terms and conditions

Code abbreviations for terms:

[terms_trade]
[terms_return]
[terms_delivery]
[terms_payment]
[terms_eprivacy]
[terms_gdpr]

Note: The shortcodes insert the text from Theme Settings → Terms of Service. This way, you only need to edit the terms in one place.

7. Tabs in the product description

Divide a product description into tabs by entering a start marker and an end marker. Each marker must be on its own line in the editor so that it appears in its own paragraph:

Kort introduktion til produktet.
[tab type="materiale" title="Materiale"]
100 procent bomuld.
[/tab]
[tab type="pasform" title="Pasform"]
Normal pasform.
[/tab]

In the HTML code, the markers must be in separate paragraphs:

<p>[tab type="materiale" title="Materiale"]</p>
<p>100 procent bomuld.</p>
<p>[/tab]</p>
  • • The "type" and "title" fields may only contain letters (a-z, A-Z), numbers, spaces, and underscores. The characters Æ, ø, å, hyphens, and punctuation marks will not work, and the placeholders will appear as plain text.
  • • "title" becomes the tab's heading. "type" is used as a CSS class (accordion--type) and can be anything you want
  • • Text before the first tab appears in the "Description" tab, and text after the last tab appears in the "More Information" tab ("Description" and "More Information" in Delaware)
  • • Write at least one paragraph of regular text before the first tab
  • • Shortcodes such as [youtube_embed] and [products] are not translated in a description with tabs

Video tutorial

Filters & Search

Product filters on category pages that update the product list without reloading the page, and search with suggestions as the customer types.

Filter types

  • Fire filter
  • Attribute filters, such as color and size
  • Sort by: most popular and price
  • You can select multiple values at once

Setting Up Filters

  1. Turn on the filters under Theme Settings → Categories → Enable Filtration
  2. Enter the attribute tags, separated by commas, under Theme Settings → Filters, e.g., color, size. The tag appears on the attribute in the product profile.
  3. If you want to apply different filters to a specific category, enter ` filters=color,material ` in the category’s “Extra Fields” section under “Advanced.” This will replace the general list for that category. If the line is entered for a parent category, its filters will instead be added to the top of the general list for the subcategories.

Note: Filters and sorting are displayed only on category pages and are controlled solely by the setting under "Categories." Landing pages have neither filters nor sorting, and the "Enable filter" setting under "Landing Pages" is not used by the theme.

Video tutorial

Shipping methods

Customize shipping methods with carrier icons, delivery times, and descriptions to enhance the customer experience.

Supplier icons setup

HTML field configuration:

Go to Shipping → Shipping Methods, edit the shipping method, and click Add New HTML Field. Name the field " carrier," and enter the icon's name in the field. Separate multiple icons with commas.

Feltnavn: carrier
Placering: Tilføj ikke automatisk
Indhold: gls
Eller flere: gls,postnord

Available supplier icons:

📦
burd
Burd
🚚
gls
GLS
📮
postnord
PostNord
🏪
pickup
PickUp
📦
bring
Bring
🚛
budbee
Budbee
✈️
dhl
DHL
🚐
dao
DAO
🚚
dkfragt
DK Freight
📪
instabox
Instabox
🏃
coolrunner
CoolRunner
📬
swipbox
SwipBox
📦
ups
UPS

Delivery time setup

HTML field configuration:

Create an HTML field named "delivery_time " for the shipping method. The text will appear below the shipping method's name during checkout.

Feltnavn: delivery_time
Indhold: 1-2 hverdage
Best practice:

Use clear and consistent language such as "1–2 business days," "Same day," "3–5 business days." The field appears as plain text, so HTML won't work here.

Delivery time on the product page:

The product page displays the inventory status along with a delivery time. This information is taken from the product’s own delivery times, or otherwise from Theme Settings → General:

  • • Delivery time: Items in stock
  • • Delivery time: Items in remote inventory (items that may be sold even if the warehouse is out of stock)
  • • Delivery time: Out-of-stock items

Note: The "Shipping" group has three similar delivery time fields. The theme does not read these fields, so use the fields under "General."

Delivery description setup

HTML field configuration:

Create an HTML field called " delivery_info." The text appears below the shipping method once the customer has selected it, and it also appears as plain text.

Feltnavn: delivery_info
Indhold: Leveres til nærmeste pakkeshop
Examples of descriptions:
  • - "Delivered directly to your door"
  • - "Pickup at the nearest parcel shop"
  • - "Delivery between 08:00-16:00"
  • - "Free with purchases over 500 kr."

Watch the demo:

See shipping methods in action at: https://delaware.shoporama.dk

Support:

Missing icons for your supplier? Contact us at support@shoporama.dk

View by postcode

Only show relevant shipping methods based on the customer's postal code.

Hide by postcode

Hide shipping methods for specific areas or postcodes.

General shipping method setup

Payment methods

Display icons next to the payment methods at checkout.

HTML field setup

Setup process:

Go to Integrations → Payment Gateways, edit the payment method, and click Add New HTML Field. Name the field " cards."

Feltnavn: cards
Format: Komma-separeret liste
Indhold: dankort,mastercard,visa,mobilepay

An HTML field called "payment_info " appears below the payment method once the customer has selected it. You are welcome to use HTML here.

Available payment icons

📅
anyday
Any day
📱
applepay
Apple Pay
🏦
banktransfer
Bank Transfer
💳
dankort
Thank you card
📊
ean
EAN
📱
googlepay
Google Pay
🧾
invoice
Invoice
🛍️
klarna
Klarna
💳
maestro
Maestro
💳
mastercard
Mastercard
📱
mobilepay
MobilePay
🅿️
paypal
PayPal
📊
viabill
ViaBill
💳
visa
Visas

Configuration example

Example setup for a Dankort payment method:

cards: dankort,mastercard,visa

The Dankort, Mastercard, and Visa icons will then appear for this payment method.

Watch the demo:

See payment methods in action at: https://delaware.shoporama.dk

Support:

Missing icons for your payment method? Contact us at support@shoporama.dk

Video tutorial

Sizing and washing instructions

Display a size guide and washing instructions as tabs on the product page. The text is written once on a static page and linked to the products using product labels.

1. Enabling in Theme Settings

Enable functionality:

  1. Go to Design → Theme Settings
  2. Find the " Product " group
  3. Turn on "Enable washing instructions " and/or "Enable size guide"
  4. Optional: Enter your own tab title. The default titles are "Vaskeanvisning" and "Størrelsesguide" in DelawareDK, and "Washing instructions" and "Size guide" in Delaware

2. Creating labels

Go to Products → Product Labels:

Create one label per guide. It’s the “Tag” field of the label that matters: it must contain “washing-instruction” for washing instructions and “size-guide” for a size guide. You can choose any name you like.

Tags for washing instructions:
washing-instructions-1
washing-instructions-2
washing-instructions-3
Tags for size guides:
size-guide-1
size-guide-2
size-guide-3

3. Creating instruction pages

Go to Content → Static Pages:

  1. Create new page with descriptive title
  2. Enter the care instructions or size guide in the page text. This is the text that appears in the tab
  3. Under " Advanced," enter the label's tag in the "Optional tag" field
  4. Save the page
Examples of matching tags:
Label tag: washing-instructions-1
Page tag: washing-instructions-1

4. Apply to products

Go to specific product in Products:

  1. Find the " Labels " box on the product
  2. Select the relevant wash/size label
  3. Save the product

If the product has multiple labels of the same type, the first one that has a page with the same tag is used.

Flexible system

Benefits of the system:

  • Multiple instruction sets: Create different washing/sizing guides for different product types
  • Flexible application: Same instructions can be used on multiple products
  • Easy administration: Centralized management of all instructions
  • Automatic display: Instructions are automatically displayed on product pages

Watch the demo:

See sizing and washing guides in action at: https://delaware.shoporama.dk

Video tutorial

Checkout Features

Delaware's checkout process is divided into steps, with an order summary displayed next to the form. You can control which fields and options the customer sees under Theme Settings in the groups that begin with "Checkout."

Checkout Process Flow

1

Shopping Cart

View and edit items; enter a discount code if applicable

2

Information

Contact and Address Information

3

Delivery and Approval

Shipping and payment method, followed by order confirmation

✓

Payment and Thanks

Payment via the payment gateway and thank-you page

  • • If the store offers only one shipping method and one payment method, they are selected during the information step, and the delivery step is skipped
  • • The " Approve" step is skipped when "Skip 'Approve Order'?" is enabled under Web Store → General. The terms and conditions are then displayed on the step before checkout

Payment canceled / failed

When a customer cancels or encounters an error in the payment flow, several payment gateways redirect the customer back to the store with the parameter ?payment_cancelled=1 in the URL.

The Delaware theme automatically displays a warning at the top of the page via partials/header.html when this parameter is present.

Smarty code in your theme:

<{if $get.payment_cancelled}>
  <{include file="components/alert.html" variant="warning" icon="information" text="Din betaling blev ikke gennemført."}>
<{/if}>

The customer keeps their cart and can try the payment again.

Note: Use $get, $post, and $cookie in the web store templates. $smarty.get, $smarty.post, and $smarty.cookie are disabled in the themes.

Options at checkout

Cart and Address

  • Discount Code - Enable during checkout: General. The field in the shopping cart also requires "Enable discount code during checkout: Shopping Cart"
  • Shopping Cart Sharing - Customers can share a link to their shopping cart
  • Customer Types - Individual, Business, and Government (EAN) under Checkout: Address
  • Comment - Field for a message regarding the order
  • Order Review - Suggestions for Additional Items in the Order Summary

Account and Newsletter

  • Shop Without an Account - Customers Do Not Need to Create an Account
  • Log In - "Log In" button in the header (Enable Login (Beta) under Checkout: General)
  • Create Profile - Customers can create a profile under the address section (Beta)
  • Newsletter - Checkbox for Subscription
  • Acknowledgments Page - Custom title and text, with confetti if desired

Mobile Payments

Delaware has icons for the three mobile payment methods. Whether a customer can pay using them depends on your payment gateway.

Apple Pay

Icon Name: Apple Pay

Google Pay

Icon Name: googlepay

MobilePay

Icon Name: mobilepay

Trust & Security

Terms and Conditions

  • Cancel Purchase - Permanent link in the footer to the digital cancellation feature
  • Terms and Conditions - Title and short text upon acceptance, during checkout: Accept
  • Newsletter - Custom title and text for the consent form
  • Image in checkout —for example, an 18+ label below the order summary (the "Image for approval page" field)

Trust Badges & Certifications

  • e-Mærket - Widget in the header, footer, and on the product page
  • Trustpilot Integration - Widgets in the header, checkout, and footer
  • Your own rating —stars and number of reviews, if you don't use Trustpilot
  • Free Shipping - Notification of how much more is needed to qualify for free shipping

The withdrawal link can be disabled by selecting "Disable Digital Withdrawal " under "Checkout: General," but only if you sell exclusively to businesses. If one of your footer menus links directly to /withdrawal, the fixed link will not appear.

Payment methods

The payment methods available to customers depend on your payment gateway. Delaware offers icons for these, among others (see the full list under "Payment Methods"):

Thank you card
Visas
Mastercard
MobilePay
PayPal
Klarna

Delivery Options

Shipping Methods at Checkout

  • • Delivery time and description via HTML fields
  • • Show or hide shipping methods by ZIP code
  • • Shipping methods that exceed the weight limit are displayed with a line through them
  • • Products are available for pickup only (see below)

Parcel shop integration

  • • List of package pickup locations based on the customer's ZIP code
  • • Name and address of each package pickup location
  • • A message if there are no package pickup locations for that ZIP code
  • • Which shipping carriers have package pickup locations depends on your shipping settings

Pickup Only: Check the "Pickup Only " box under the product's Theme Settings, and enter the IDs for the pickup methods in "Shipping Method IDs for Pickup" under Theme Settings → Shipping. If such a product is in the cart, the checkout will display only those methods.

Abandoned baskets

The basket will be saved

  • • The shopping cart will still be there if the payment is interrupted
  • • The customer sees a message at the top of the page

Shopping Cart Email

  • • The abandoned cart email uses Delaware's template
  • • Subject and text under Theme Settings → Emails (Shopping Cart Email)
  • • Tags: [basket_url], [products_list], [company_email], and [company_phone]

Shipping Alert

  • • Countdown to the next shipment in the cart and when an item is added to the cart
  • • Shipping days, times, and closed days in Shipping Alerts (Beta)

Tracking and Testing

Conversion Tracking

When tracking is enabled under Webstore → Tracking, Delaware sends e-commerce events to dataLayer:

  • view_item, view_item_list, search
  • add_to_cart, remove_from_cart, view_cart
  • begin_checkout, add_shipping_info, purchase

A/B Testing

  • Page Designer - Split-test layouts under Design → Split-test
  • Shipping Rates - Split Test under Delivery → Split Test of Shipping Rates

Test the checkout process:

Try Delaware's checkout at: https://delaware.shoporama.dk

Integrations

Delaware has built-in support for a number of third-party services. Most of them can be enabled under Theme Settings → Integrations.

Tracking

  • • E-commerce events sent to the dataLayer with GA4 names
  • • Meta Pixel and Google Analytics IDs are included
  • • Enable under Web Store → Tracking
  • • View the list of events under Checkout

Social Media

  • • Instagram section with a feed or "Follow" button
  • • Facebook section with a "Follow" button or its own feed
  • • Links to Facebook, Instagram, Google, and YouTube in the footer
  • • Custom image for sharing (Open Graph)

Tools

  • - Trustpilot
  • • e-mark
  • • Pricerunner logo on the product image
  • • ViaBill and Anyday on the product page

C
Clerk.io Integration

With Clerk.io, Delaware can use Clerk's search and recommendations instead of Shoporama's own.

Features that can be replaced with Clerk.io:

  • Search - Clerk - Replace Search (Clerk Replace Search)
  • Product Recommendations - Related, Similar, and "Others Also Bought" on the Product Page
  • Cart Recommendations - Recommendations in the Cart (Clerk - Cart Products)
  • Product Slider - Clerk types such as newest, popular, trending, and most recently purchased

Setup: Enable Clerk and enter your Clerk.io API key under Theme Settings → Integrations. Then select which features you want Clerk to handle. You’ll need to create your Clerk account on Clerk.

Icon Library

Delaware has its own icons as SVG sprites in dist/svg/default.svg. Use the names listed below in the "Icon" field of value propositions, in menu items with [icon id="..."], and in your own templates. The icons on this page are for illustrative purposes only; it’s the name that matters.

<{include file="components/svg.html" icon="truck" width="24" height="24"}>

Brand Icons

brand-applepay

brand-emaerket

brand-googlepay

brand-mobilepay

Payment card icons

card-anyday

card-dankort

card-mastercard

card-paypal

card-visa

card-klarna

All 14: card-anyday, card-applepay, card-banktransfer, card-dankort, card-ean, card-googlepay, card-invoice, card-klarna, card-maestro, card-mastercard, card-mobilepay, card-paypal, card-viabill, and card-visa. In the "cards" HTML field and in the "Payment Methods" setting, enter the name without "card-".

Shipping methods Icons

carrier-bring

carrier-dhl

carrier-gls

carrier-postnord

carrier-ups

All 13: carrier-bring, carrier-budbee, carrier-burd, carrier-coolrunner, carrier-dao, carrier-dhl, carrier-dkfragt, carrier-gls, carrier-instabox, carrier-pickup, carrier-postnord, carrier-swipbox, and carrier-ups. In the "carrier" HTML field and in the "Shipping Methods" setting, enter the name without "carrier-".

Language flag

flag-da

flag-en

flag-nb

flag-sv

Additional Icons

General icons, such as those for value propositions and menu items:

truck

arrow-return

search

shopping-cart

user

heart

star

home

The rest of the general icons: adjustment, adjustments, caret-right, chart-bar, check, chevron-down, chevron-left, chevron-right, chevron-up, cloud-arrow-down, cog, create, credit-card, document-check, document-text, eye, filter, heart-solid, information, language, lifebuoy, loader, menu, minus, orders, pencil, play, plus, question-mark, queue-list, shopping-bag, sign-out, star-outline, storefront, test, trash, truck-loading, wrench, and x.

Need more icons? Contact us at support@shoporama.dk to request additional icons for your theme.

Washing symbols

Delaware has international care symbols as SVG icons in dist/svg/washicons.svg. You select them for each product using an additional field.

How to Display Laundry Symbols

  1. Add a tab to the product description using [tab] (see Shortcodes, item 7), for example, a tab titled "Care"
  2. Enter the names of the icons, separated by commas, in the product's " Additional Fields" section:
washing=washing-30deg,bleaching-not-allowed,drying-tumble-low-heat,iron-low

Note: The symbols appear only when the description has tabs, and they are included in all tabs of the description. Therefore, use only one tab for products with care symbols. Do not include spaces between the names.

Wash

washing-30deg

washing-40deg

washing-60deg

washing-hand

washing-not-allowed

washing-30deg-extra-care

There are also 50, 70, and 90 degrees, 95 degrees as “washing-95deg-alt,” hand wash at 30 and 40 degrees, variants with “-permanent-press” and “-extra-care,” and alternative symbols with “-alt,” such as “washing-40deg-alt.”

Bleaching

bleaching-non-chlorine

bleaching-not-allowed

bleaching

Drying ring

drying-tumble-low-heat

drying-line-dry

drying-line-dry-shade

drying-flat-dry

More: drying, drying-drip-dry, drying-drip-dry-shade, drying-dry-shade, drying-flat-dry-shade, drying-not-allowed, drying-tumble, drying-tumble-medium-heat, drying-tumble-high-heat, drying-tumble-no-heat, drying-tumble-not-allowed, and variants with -permanent-press and -extra-care.

Ironing

iron-low

iron-medium

iron-high

iron-not-allowed

More: iron and iron-steam-not-allowed. For dry cleaning, there are drycleaning, drycleaning-a, drycleaning-p, drycleaning-f, drycleaning-w, drycleaning-not-allowed, etc., as well as wringing-not-allowed and a number of custom icons such as custom-t-shirt and custom-washing-machine.

Brand Management

Delaware can display all your brands on a single page, complete with logos and links to each brand's category or landing page.

Setting up Fire Overview

  1. Create a new page: Go to Content → Static Pages, and create a new page
  2. Select a template: Select "Brands" in the Template field under the page's Theme settings
  3. Automatic loading: All brands are displayed below the page text in the order they appear in the admin panel
  4. Save the page: And link to it from, for example, a footer menu

Creating Brands

Administration

  • • Go to Products → Brands
  • • Create a brand
  • • Enter your name
  • • Select a category or landing page under "Link to"
  • • Upload the brand's image

Image recommendations

  • - Format: PNG with transparent background
  • • Square format, since the logo appears in a square frame
  • - High quality logos
  • - Consistent styling

Brand Features

Your own order

Brands are displayed in the order you specified them in the admin panel, and otherwise in alphabetical order

Responsive Design

The brand page adapts to the screen size

Automatic links

Each logo links to the category or landing page you've selected for that brand

Example: See how the brand overview works at delaware.shoporama.com/brands

Advanced Postcode Features

With two HTML fields for the shipping method, Delaware can show or hide the shipping method based on the ZIP code in the customer's shipping address.

Two Methods for Postcode Checking

Show by Match

The shipping method is only shown for specific postcode areas.

Use: When you only want to offer a shipping method in specific areas (e.g. city delivery)

Remove by Match

The shipping method is hidden for specific postcode areas.

Use: When you want to exclude a shipping method from specific areas (e.g. islands or remote locations)

Show by Match Method

Implementation:

  1. Go to Shipping → Shipping Methods, and edit the shipping method
  2. Click "Add New HTML Field" and name the field " allowed_zip_codes"
  3. Enter postcode areas in the format: 1000-1999,3000-3999,5000-5999
  4. Save your settings
Example of postcode areas:
1000-1999,2000-2999,3000-3999,4000-4999,5000-5999

This will show the shipping method for postal codes 1000-5999

Video tutorial - Show shipping methods

Remove by Match Method

Implementation:

  1. Go to Shipping → Shipping Methods, and edit the shipping method
  2. Click "Add New HTML Field" and name the field " disallowed_zip_codes"
  3. Enter ZIP code ranges in the following format: 3700-3790, 3900-3999
  4. Save your settings
Example of exclusion:
3700-3790,3900-3999

This will hide the shipping method for Bornholm (3700-3790) and Greenland (3900-3999)

Video tutorial - Hide shipping methods

Format Guidelines

Supported Formats

  • 1000-1999 - Range from 1000 to 1999
  • 2000,2100,2200 - Specific postcodes
  • 3000-3999,4000 - Combined area and specific
  • 5000-5999,6000-6999 - More areas

Important Notes

  • - Use commas to separate areas
  • - Hyphen to define areas
  • - No spaces between values
  • • Ranges only work with ZIP codes consisting of numbers
  • • Use only one of the fields per shipping method. If it has both, it will be displayed for all ZIP codes except those in `disallowed_zip_codes`

Practical Application Examples

Bicycle delivery

Only in the Copenhagen metropolitan area and Aarhus

allowed: 1000-2999,8000-8270

Express Delivery

Not to Bornholm and Greenland

disallowed: 3700-3790,3900-3999

Island delivery

For Bornholm Only

allowed: 3700-3790

Pro Tip: Always test your postcode configurations thoroughly by simulating different customer addresses during the checkout process.

Video Embedding

Display YouTube videos on the product page and in your text, and use a video file as the background on the home page.

Supported platforms

  • YouTube videos (not playlists)
  • Video file as the background in the "Hero Video" section with category/landing page

Here's how to do it

  • Product Video: Enter the video's ID in the "YouTube ID" field under "Video Settings" in the product's Theme Settings. This will add a play button to the product image and product card that opens the video
  • Video in text: Use [youtube_embed id="..."] (see Shortcodes)
  • Background Video: Paste a direct link to a video file in the "Background Video" field. It will play automatically, without sound, and on a loop.

Pro tip: The video ID can also be entered as youtube_id=... in the product's "Additional Fields." If you fill in both, the field under "Theme Settings" will be used.

Video tutorial

Product Add-on System

The add-on system allows your customers to add related products with a single click. The products appear as checkboxes in the "Add to Cart" form on the product page, making it easy to upsell accessories, insurance, or other relevant products.

What are Add-ons?

Add-ons are a feature that lets you link related products to a main product. When a customer clicks "Add to Cart" ("Læg i kurv" in Delaware), they can choose to add the add-on products at the same time by checking the checkboxes.

Examples of use:

  • Batteries for electronics
  • Insurance or warranty extension
  • Accessories for the main product
  • Complementary products (e.g. coffee for coffee machines)

How to configure add-ons

1. product level (highest priority)

This is the most specific configuration and overrides all other settings:

  1. Go to the product where you want to add add-ons
  2. Open Theme Settings on the product
  3. Find the "Add-on Settings" section
  4. In the " Product IDs " field, enter comma-separated product IDs

Example:

123,456,789

2. Category level

Applies to products with the category as their main category (if they do not have product-level add-ons):

  • Enter addon_ids=123,456 in the category's " Extra Fields " section under "Advanced"
  • Products in this category automatically receive these add-ons

3. Parent category level (fallback)

If neither product nor category has add-ons configured:

  • The theme checks the subcategories of the main category, starting from the top and working down
  • Use first parent category that has addon_ids set

Important limitations

  • Add-ons with variants have their own variant selector, but only when the variant is a value list. If the variant is of a different type, the add-on cannot be selected and is displayed without a checkbox. The same applies if an add-on has no variants in stock
  • Add-ons are added as separate basket lines (not bundled with the main product)
  • Add-ons are always added with number 1 (not configurable)
  • No special pricing or bundle discounts for add-ons
  • The customer is free to change or remove add-ons in the cart afterwards

User experience

On the product side

  • Headline: "Add to cart with" ("Læg i kurv med" in Delaware)
  • Checkbox list with all add-ons
  • Each add-on shows:
    • - 32x32px product image
    • - Product name
    • - Price
    • - Eye icon (link to full product page)
    • • Variant selector when the add-on has variants

In the basket

  • Add-ons appear as normal products
  • No visual indication that they were add-ons
  • Can be changed and removed independently
  • No binding to the main product

Technical details

Extension field name:

addon_product_ids

Additional field (product and category):

addon_ids

Format:

Comma-separated product IDs (e.g.: 123,456,789)

Prioritized order:

  1. Product extension value (addon_product_ids)
  2. Additional field for the product (addon_ids)
  3. Additional field in the main category (addon_ids)
  4. Additional field for top-level categories (addon_ids)

Best Practices

  • Only use relevant add-ons that provide value to the customer
  • Keep the number of add-ons between 2-5 to avoid overwhelming the customer
  • Use category-level configuration for products with the same add-ons
  • Test the prices of add-on products - too high prices can decrease conversions
  • Choose add-on products with good product images and descriptions
  • Use value list variants for add-ons that require a variant selector

Add to Cart and Checkout

In addition to add-ons on the product page, the store can offer add-ons for the entire order, such as gift wrapping, greeting cards, or delivery. These add-ons are regular products in a product profile marked with the "Add-on Profile" checkbox. They are excluded from lists, search results, the sitemap, and feeds. Instead, they appear as checkboxes in the shopping cart and on the final step before checkout.

Where do they appear?

  • In the shopping cart (basket.html), above the order summary
  • At the top of the approval page (approve.html)
  • At the shipping stage (shipping.html), when is Spring's "Approve Order" feature enabled?

The component is located in components/basket-addons.html and accepts the parameters return (basket, shipping, or approve) and class. Each add-on has its own form, so the component must be included outside the step’s own form. It does not appear on the address step because clicking reloads the page, and the customer would lose the fields they’ve filled out.

Methods and Form

  • $webshop->getBasketAddOnProducts() Returns the add-ons as products (up to 20, sorted by name). The list is empty when the cart contains no regular items and sold-out add-ons have been filtered out.
  • $product->getBasketAmount() displays the number in the basket so that the field can be shown as selected.
  • The form is submitted via POST to / with the fields basket_addon (product ID), basket_addon_state (1 = add to cart, 0 = remove), and basket_addon_return.
<{foreach $webshop->getBasketAddOnProducts() as $addon}>
    <{$selected = $addon->getBasketAmount() > 0}>
    <form action="/" method="post">
        <input type="hidden" name="basket_addon" value="<{$addon->getProductId()}>">
        <input type="hidden" name="basket_addon_state" value="<{if $selected}>0<{else}>1<{/if}>">
        <input type="hidden" name="basket_addon_return" value="basket">
        <label>
            <input type="checkbox" onchange="this.form.submit()"<{if $selected}> checked<{/if}>>
            <{$addon->getName()|escape}>
        </label>
    </form>
<{/foreach}>

Never check the box unless the add-on is already in the cart. The Consumer Contracts Act requires that the customer actively select an additional payment. Add-ons that appear alone in the cart are automatically removed during the cart and checkout steps.

Value Proposition

Delaware can display up to four value propositions (USPs). They appear in the bar at the top of every page, in the footer, in the "Value Propositions" section of the Page Designer, and—if you enable this feature—on the product page.

Setting Up a Value Proposition

Navigation to settings:

Go to Design → Theme Settings → Value Propositions

For each value proposition, you can configure:
  • • Text - Short headline. If no text is provided, the value proposition will not be displayed
  • • Description - Appears in the footer, in the section, and on the product page, but not in the header
  • • Icon - The name of an icon from the Icon Library, e.g., forklift
  • - Link (optional) - Link to relevant page
Best practices:
  • - Keep texts short and clear
  • - Choose icons that match the message
  • - Highlight your unique advantages
  • - Test on mobile for readability
  • • The product page displays only the first three. Enable them by selecting "Enable Value Propositions" under "Product"

Examples of value propositions

Free shipping

For purchases over 399 kr

30 days return

Full return policy

Customer service

Mon-Fri 9-17

Secure payment

SSL encrypted

Available Icons

Type the name of one of Delaware's icons in the "Icon" field, for example:

truck

credit-card

check

lifebuoy

arrow-return

shopping-bag

storefront

star

heart

View all the names in the Icon Library. If you enter a name that isn't there, no icon will appear.

Blog Features

Delaware displays your blog with an overview, categories via a menu, images in the posts, and a list of additional posts below each post.

Creating Blog Posts

Basic setup:

  1. Go to Content → Blog → Create a New Post
  2. Enter the title and URL
  3. Write your content in the editor
  4. Upload images. The first one will be the post's featured image in the list view
  5. Fill in the title and description for search engines
  6. Save, or select a date under "Publish after"

Image insertion in Blog posts

Images with shortcodes:

Use shortcodes to insert images directly into your blog posts:

[image index="1"]
[image index="2"]
[image index="3"]
This is how it works:
  1. Upload images to the post under "Images"
  2. The images are numbered in order (1, 2, 3...)
  3. Insert the image using [image index="X"]. Remember to include the quotation marks.
  4. The image description appears as a caption

Blog Layout Options

Layout: Default

  • • Image, title, and excerpt from the text
  • • Author and date
  • • "Read more" link

Layout: Simple

  • • Image and title only
  • • Great for many posts

Columns and Categories

  • • 2, 3, 4, or 5 columns (default: 3)
  • • Layout and columns are selected under Theme Settings → Blog Lists
  • • Categories: A menu with tagged blog posts appears as a category selector above the overview

Blog SEO Features

On-page SEO

  • • Custom title and description for each post
  • • The share image from Theme Settings → Open Graph is used when the post is shared
  • • Breadcrumbs, if they have been added under "Breadcrumbs"

Categories & Related Posts

  • • The categories are the menu items tagged "blog"
  • • Below each post, up to 6 posts from the blog are displayed under the heading "Related Blog Posts"
  • • Page builder sections can be used on the blog and in blog posts

Color Matching

Delaware has two main colors and separate colors for badges and for the web store message at the top of the page. The colors are specified under Design → Theme Settings as a hex value preceded by # (e.g., #1a1a1a) or as an HTML color name.

Primary Color Settings

Customize the following colors:

Theme and Colors
Primary color
theme.primary
Action Color
theme.action

Both are black (#000) until you select a different color. The primary color is also used for badges that don't have their own color and for the sliders.

Other colors
Online Store Message: Background sitenotice.bg_color
Online Store Message: text sitenotice.text_color
Background Behind the Photos images.background

The "Campaigns" group also has two color fields, but the theme does not use them.

Badge & Label Colors

Under "Badges," each badge has a background color and a text color. If no color is specified, the badge will have the primary color as its background and white text:

Clearance sale
onsale_bg / onsale_text
What's new
new_bg / new_text
Low stock
fewinstock_bg / fewinstock_text
Bundle
bundle_bg / bundle_text

In addition, volume discounts (volumediscount_bg/_text) and variants (variant_bg/_text). Your own badges from the product's Theme Settings (Badge 1-3) use the colors from "In Stock."

Preset color schemes

Delaware does not have any predefined color schemes. You set the primary color, action color, and badge colors yourself. If you want to make further changes, use your own CSS (see below).

Advanced Color Settings

CSS Custom Properties:

The colors from Theme Settings are set as CSS variables on :root. You can override them in your own CSS, for example, in the Custom CSS field under Custom Code (Beta):

:root {
--primary: #1a1a1a;
--action: #d97706;
--badge-bg-onsale: #dc2626;
--badge-text-onsale: #ffffff;
}

The badge variables are named --badge-bg-[type] and --badge-text-[type], where type is onsale, new, bundle, volumediscount, fewinstock, or variant.

Theme Settings

Delaware has over 250 settings across 36 groups. They give you control over the theme's appearance and features without any coding.

Access to settings

Navigation: Admin → Design → Theme Settings

In the admin section:

  • • Search in the settings
  • • Collapse or expand all groups
  • • Save, or save and continue editing

Good to know:

  • • The names are listed in English on the Delaware website and in Danish on the DelawareDK website
  • • The "Inventory," "Pages," and "Checkout: Shipping" and "Checkout: Payment" groups are empty
  • • A few fields are not used by the theme (see the bottom of this section)

General Settings

Colors & Branding

  • Colors - Primary color, action color, and badge colors
  • Logo - The logo from Design → Logo & Terms, or a URL and ALT text under Theme and Colors
  • Favicon - From Design → Logo & Terms, or a URL under Theme and Colors
  • Images - Aspect ratio (1:1, 2:3, 3:2, or 16:9), cropping, space around the subject, and background
  • Open Graph - Image for Sharing on Social Media

Language, Currency, and Numbers

  • Numbers - Thousands and Decimal Separators
  • Language - Language Code and Regional Settings
  • Currency - The text that appears, and whether it appears on the product card
  • Multilingual - Language selector with links to your other stores
  • Company - Contact information, hours of operation, and social media links in the footer

Layout & Navigation

Categories

  • • Layout for category cards and category pages
  • • Category menu on the page
  • • Filters
  • • Fold descriptions A and B together
  • • Popular Products

Top of the page

  • • Online store message with text for desktop and mobile
  • • The message can be closed for a number of days
  • • Value proposition in the top bar
  • • User reviews or Trustpilot
  • • Language Selector

Breadcrumb

  • • Turn breadcrumbs on and off
  • • Show or hide them on your phone
  • • Structured data for breadcrumbs on categories, landing pages, and products

Product Settings

Product images

  • Lightbox - View the images in full size
  • Thumbnails - Small images below the product image
  • Lazy loading - Performance optimization
  • WebP support - Modern image formats
  • Aspect Ratio - Set the aspect ratio under "Images"

Product information

  • Previous Price - Lowest Price in the Last 30 Days (Omnibus)
  • Inventory Status - "Low Stock," Quantity on Hand, and Backorder Notice
  • Variants - Show out-of-stock variants and variants without a price
  • Tabs - Product Attributes, Shipping, Returns, Payment, and "Ask a Question"
  • Recommendations - Related, similar, and "Others also bought," possibly filled in automatically

Shop & Checkout Settings

Shopping cart

  • Sliding basket - The basket slides in from the side
  • Shopping Cart in the Header - Number of Items and Total Price
  • AJAX updates - No page reload on add
  • Confirmation - Notification when the item has been added to the cart
  • Recommendations - In the slide basket and as related products in the basket

Checkout Process

  • Checkout Step-by-Step - See the "Checkout" section
  • Guest checkout - Buy without registration
  • Customer Types - Individual, Business, and Government (EAN)
  • Terms and Conditions - Text for Terms of Sale and Newsletter
  • Thank-You Page and Upsells - Custom Text, Confetti, and Upsells with a Countdown

Marketing & SEO

Messages

  • • Online store message at the top of the page
  • • Newsletter sign-up box in the footer
  • • Free Shipping Notice
  • • Shipping Alert

SEO Optimization

  • • Open Graph image
  • • Store schema under "Schema: Global" (type, description, contact, payment)
  • • Canonical links on the pages
  • • Sitemap page via the "Template" field on the page
  • • Custom text on the 404 and 410 pages

Analytics

  • • E-commerce events for dataLayer
  • • Google Analytics and Meta Pixel IDs are included
  • • Enable under Web Store → Tracking

Third-party integrations

In the "Integrations" section

  • Reviews - Trustpilot and e-mærket
  • Search & Discovery - Clerk.io
  • Price Comparison - Pricerunner
  • Installment Payments - ViaBill and Anyday

At Shoporama

Payment, shipping, accounting, and newsletters are set up in Shoporama under "Integrations" and "Delivery." They work regardless of which theme you use and therefore have no settings in Delaware.

Advanced Settings

Custom Code

  • Custom CSS - Is inserted based on the theme's colors. The CSS is rendered as soon as the field is filled in, even if "Enable Custom CSS" is turned off
  • Custom JavaScript - Not rendered by the theme. Instead, use an HTML field under Webstore → HTML Fields and place it at the end of the body.
  • Template overrides - Edit the theme's files under Design → Code Editor or via SFTP

Performance

  • Lazy loading - Images load when they come into view
  • Asset minification - CSS and JavaScript are fully built and minified
  • Debug mode - "Set the store to debug mode" under General forces the browser to reload the theme's CSS and JavaScript on every page view. Turn it off again afterward

Settings with no effect

These fields appear in Theme Settings, but Delaware does not read them. If you fill them in, nothing happens:

  • • Shipping: the three delivery time fields. Use the fields under "General "
  • • Custom Code: Enable Custom CSS, Enable Custom JS, and Custom JavaScript
  • • Campaigns: all four fields
  • • Newsletter: button text (Form Button). The button always displays the default text
  • • Landing Pages: Enable filter
  • • Product: Assets (shortened long description)
  • • Integrations: Trustpilot Template ID Starter

See settings in practice:

See Delaware with the settings in use at: https://delaware.shoporama.dk

theme_settings.json Structure

Delaware's settings are defined in theme_settings.json in the theme's root folder. The file determines which fields are displayed under Theme Settings.

File Structure

{
"info": "Delaware",
"smarty_version": 4, // Temaet kører Smarty 4
"features": [ // Liste over tema features
"Support for Shoporama Sidedesigner",
"Eget logo og favicon",
// ... flere features
],
"demo": "https://delaware.shoporama.dk/",
"settings": [ // Grupper af indstillinger
// ... indstillings grupper
]
}

These are all the keys in the Delaware file. The page designer sections and theme extensions are located in other files, which you can read about further down.

Setting Groups

Group Structure 

{
  "path": "theme",
  "name": "Theme & Colors",
  "description": "",
  "fields": [
    // Individuelle felter
  ]
}

Examples of Delaware's groups

  • General - Separators, icons in the footer, and delivery times
  • Theme and Badges - Colors and Logo
  • value_propositions - The Four Value Propositions
  • product and product_card - Product page and product card
  • checkout, checkout_cart, checkout_address, etc. - Checkout
  • emails - Subject and text for the theme's emails

In your templates, you read a value in the format $settings.[group].[field], for example <{if $settings.checkout.enable_login}>. "Group" and "field" are the two path values.

Field Types

Text & Input

  • string - Single line text
  • text - Multi-line text
  • wysiwyg - Rich text editor

Choices & Options

  • bool - Yes/No toggle
  • list - Dropdown selection
  • color - Color picker

Media & Files

  • image - Image upload. In the template, the value is an image object

Delaware itself uses string, bool, list, image, and wysiwyg. Colors are entered in regular text fields.

Field Definition Example

Complete field example from Delaware:

{
  "path": "enable_login",
  "name": "Enable Login (Beta)",
  "description": "Lets your customers create accounts and log in",
  "type": "bool"
}
Required properties:
  • • path - Unique identifier
  • • name - Display name
  • • type - Field type
Optional properties:
  • • description - Help text
  • • default - Fills in the field in the admin panel when it is empty. The value will not take effect in the store until the settings are saved
  • • values - Options in a list box

List Field Example

Dropdown with options (blog_list.layout):

{
  "path": "layout",
  "name": "Layout",
  "description": "Choose the layout for your blog lists",
  "type": "list",
  "values": [
    {
      "name": "Default",
      "value": "default"
    },
    {
      "name": "Simple",
      "value": "simple"
    }
  ]
}

Theme Extensions

Fields for individual products, categories, and pages are defined in the extensions/ folder (product.json, category.json, landing_page.json, static_page.json, and blog_post.json). They appear under Theme Settings for the product or page in the admin panel. Example from product.json: 

[
  {
    "name": "Video Settings",
    "description": "",
    "fields": [
      {
        "title": "YouTube Id",
        "id": "youtube_id",
        "type": "text"
      }
    ]
  }
]

The value is retrieved using $product->getExtensionValue('youtube_id'). Delaware's extensions are: for products, youtube_id, badge-1 through badge-3, addon_product_ids, bundle_hide_view, comment_enabled, comment_attribute_id, pickup_only, hide_discount_pricetable, and hide_variants_pricetable. For categories, an image at the top of the category page; and for static pages, the “template” field (sitemap, terms, unpaid, or brands).

Additional fields that Delaware reads

In addition to the extensions, Delaware reads some keys from the "Extra Fields " field (key=value, one per line). In templates, these are retrieved using $product->getMetaValue('subtitle').

On products

  • • subtitle= Subtitle below the product name
  • • washing= Care labels (see Care Labels)
  • • addon_ids= Add-ons (see Product Add-ons)
  • • youtube_id= Product video, if the field is empty
  • • variants_landing= The ID of a landing page. Its products are displayed as a selector on the product page, for example, when each color is its own product
  • • googletitle=, g:color=, g:material=, and others are used in the theme's own feeds (google.xml and facebook.xml)

By categories and pages

  • • filters= Filters by category (see Filters & Search)
  • • addon_ids= Add-ons for products in this category
  • • Using `template=pagebuilder ` on a static page displays only the Page Builder content, without the page's own text

Page Designer Modules

The sections are not defined in theme_settings.json. They consist of three parts:

  • • components/sections.json - which sections can be used on which page types
  • • components/sections/[name].json - the section's title and fields
  • • templates/sections/[name].html - the template where the fields are read as $section.[id]

The field types in Delaware's sections are text, longtext, richtext, image, list, bool, integer, repeater, and product. Some of Delaware's 23 sections:

banner

product-list

hero-video-categories

text-two-columns

product-slider

trustpilot

newsletter

address-map

facebook-feed

instagram-feed

13 more

<{if $section.title}>
  <h2><{$section.title|escape}></h2>
<{/if}>

Best Practices

  • Use descriptive names: Make it clear what the setting does
  • Add help text: Use the description field to guide the user
  • Group related settings: Keep similar settings together
  • Use default values: Set sensible defaults
  • Test changes: Verify that settings are working correctly

Wishlists & Favorites

Delaware has two independent systems for saving products: wish lists (requires login, shared via link) and favorites (local in browser, heart button).

Wish lists

The customer can create multiple named wish lists, add products with quantities and variants, and share them via a unique link.

  • Requires login, and data is stored in the database
  • Multiple wishlists per customer
  • Sharing via unique link
  • Variants and numbers supported
  • Public view with "Add to cart" buttons

Enabling: Theme Settings → Product → Enable Wishlists

Favorite products

Simple "heart" button on the product card and product page. Favorites are saved locally in the browser, so no login is required.

  • No login required
  • Heart button on product card and product page
  • Sidebar with all favorites
  • Direct "Add to cart" from the sidebar
  • Counter in the header

Enable: Theme Settings → Product → Enable Wishlist (Beta)

Note: The two systems are independent, so you can use one or both at the same time. Wish lists require a login and are ideal for sharing (birthday wishes, Christmas wishes), while favorites are quick and non-committal.

Subscriptions

Delaware supports subscriptions (recurring orders), so customers can sign up for ongoing subscriptions to products.

Setting up subscription products

To sell a product as a subscription, fill out the " Subscription Settings " section for that product:

Subscription price

Price with or without sales tax for a subscription

Interval

Possible intervals in days, weeks, or months

Binding period

Optional minimum duration

Customer experience

Product pages

  • Subscription box with type and price
  • Select delivery interval (e.g. "Every 2 months")
  • Variant selection with subscription pricing
  • Comment field
  • Binding period message (if set)

My profile

  • Overview of all subscriptions
  • Change next delivery and interval
  • Update payment card
  • Cancel or reopen subscription
  • See product and address details

Cart & checkout

  • Subscriptions are shown in the cart and sidebar with icon and interval
  • Remove button on subscriptions in cart and sidebar
  • "Product was added to cart" modal when adding a subscription
  • Subscription badge on product card

Email templates

Delaware includes 6 email templates for subscriptions:

Subscription Confirmation
Confirmation at creation
Subscription Cancel
Message upon termination
Subscription Open
Message on reopening
Subscription Reminder
Reminder before delivery
Subscription Cancel After
Planned termination after binding
Subscription Change
Confirmation on map update

Important: Subscriptions require a payment gateway that can automatically charge a saved card. Contact your payment provider to ensure this feature is enabled on your account, and email support@shoporama.dk if you're unsure whether your gateway is compatible.

Performance & SEO

That's what Delaware does for speed and search engines. The actual score depends on your images, sections, and scripts, so test your own store using a tool like PageSpeed Insights.

Performance metrics

WebP
Images in the correct size
Lazy
Images are loaded when they are displayed
1
Combined, minified JavaScript file
SVG
Icons as sprites

Need help?

We're here to help you get the best out of Delaware

Contact Support API documentation