Styling the download page

The download page is a pre-defined page that automatically shows on your Shopify store when a customer access their digital products. This page automatically inherits the styling of your Shopify store's theme, including elements such as fonts, padding, and sizes. While you can customise the page's content, you also have the flexibility to modify colors, sizes, and other design aspects. This ensures a fully tailored page that aligns with your store's overall theme.

Option 1: Customise from the in-app Checkout settings page

There are plenty of available options to style the download page. You can find styling options in the Checkout settings under "The download page" title.

If you want to add some extra styling options, the page is fully customisable with custom CSS. Please see our pre-built snippets below:

Option 2: Customize using pre-built custom CSS snippets

If you are not comfortable with making these adjustments, please contact our support and we are more than happy to do this for you.

You can customize the download page by using custom CSS. The way it works is that you copy and paste the code snippets provided into your Shopify theme.

The location where you will place the code snippets

Go to your Shopify store
Go to "Online store"
Click on the three dots and then "Edit code"


Search for "css" and find the main styles sheet where your store's theme hosts all the CSS. This could show differently depending on your Shopify theme. For example, the Debut theme by Shopify, the file is called "base.css".



This is where you will place the below code snippets.

Styling options for the boxes, colours, and sizes

Paste the below code into the styles sheet at the top of the sheet:

.dda-orders {
    --dda-orders-width: 53.75em; /* Width of the box on the page */
    --dda-order-radius-lg: 16px; /* Border radius of the main box */
    --dda-order-radius-md: 12px; /* Border radius of the inside box */
    --dda-order-radius-sm: 8px; /* Border radius of the hover box */
    --dda-order-radius-xs: 4px;
    --dda-order-radius-full: 50pc;
    --dda-order-spacing: 2em; /* Spacing between main and inside box */
    --dda-color-000: #FFF; /* Background of the inside box */
    --dda-color-100: #F7F9FC; /* Background main box */
    --dda-color-200: #E2E7F0; /* Order number bubble background */
    --dda-color-300: #EDF0F7; /* Horizontal border line below product title & hover background */
    --dda-color-400: #CBD2E0; /* The main border line */
    --dda-color-500: #717D96; /* File type/size text */
    --dda-color-600: #2D3648; /* Main text colour */
}

You can use dynamic colors from your Shopify theme by using the below variables, or you can use color codes of your choice. Feel free to use this color picker.

Shopify color variables for using your Shopify theme colors:

Shopify button color - {{ settings.btn_color }}
Shop background color - {{ settings.shop_bg_color }}
Headline color - {{ settings.headline_color }}
Border color - {{ settings.border_color }}
Link color - {{ settings.link_color }}
Link hover color - {{ settings.link_hover_color }}
Navigation color - {{ settings.nav_color }}
Regular color - {{ settings.regular_color }}

It will look like this:



Once pasted in, you can continue to adjust the values and it will reflect on your download page. When refreshing the download page o see the new changes, please use Command + Shift + R on the keyboard, or for Windows Control + Shift + R. It will refresh the page and cache.

Changing the download icon to text

Change the icon to text of your choice by adding this below code to your CSS theme file.

Go to "Online store"
Click the three dots and then click "Edit code"
Find your main CSS sheet (sometimes called base.css)
Add this code at the top

You can change the text by changing the word "download" to a word of your choice.

.dda-order__asset-link > a[target]::before { content: 'download' }
.dda-order__asset-link > a[target] {
  color: var(--dda-color-600);
  font-size: small;
  line-break: 1;
  text-decoration: none;
  text-transform: uppercase;
}
.dda-order__asset-link > a[target] > svg { display: none }

Change the font styling

All font styling is inherited from your Shopify theme, but if you want to do custom styling directly on the download page, you can use the following CSS options:

/* Product name */
.dda-order__item-name {
  font-size: 18px !important;
}

/* Asset name */
.dda-order__asset-filename {
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0.1px;
  font-weight: 500;
}

/* Asset meta text - file type and size */
.dda-order__asset-meta {
  line-height: 21px;
  letter-spacing: 0.1px;
  font-weight: 700;
}

/* Limitations */
.dda-order__asset-limiter {
  line-height: 21px;
  letter-spacing: 0.1px;
  font-size: 12px !important;
}

Hide the meta text

This will hide the meta text that shows under the file name. For example, MP4 • 3.71 GB.

.dda-order__asset-meta { display: none }

Hide the file name

This will hide the file name. For example, File.zip.

.dda-order__asset-filename { display:none }

Hide the date

This will hide the date from the download page.

.dda-order__date{display:none}

Remove all asset text and show only the icon centrered

This will just show the download button in the box, or the download text if you have changed the download icon to text.

.dda-order__asset > :not(.dda-order__asset-link) { display: none }
.dda-order__asset { justify-content: center!important }

Hide the product names

This will just show the assets in the download box, and hide all the product names.

.dda-order__item-header { display: none !important }
.dda-order__item-content { border-top: none !important; padding: 1em !important }

Updated on: 03/12/2024