Styling the download page

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 provided below into your Shopify theme.

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".


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.

Color variables:
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}

Centre the download button/text and remove all other text

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 }

Updated on: 30/09/2024