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;
    --dda-order-radius-lg: 16px;
    --dda-order-radius-md: 12px;
    --dda-order-radius-sm: 8px;
    --dda-order-radius-xs: 4px;
    --dda-order-radius-full: 50pc;
    --dda-order-spacing: 2em;
    --dda-color-000: #FFF; /* Background of the middle box */
    --dda-color-100: #F7F9FC; /* Background main box */
    --dda-color-200: #E2E7F0; /* Order number bubble background */
    --dda-color-300: #EDF0F7; /* Horizontal border line below title */
    --dda-color-400: #CBD2E0; /* The main border line */
    --dda-color-500: #717D96; /* File type/size text */
    --dda-color-600: #2D3648; /* Main text colour */
}

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.

Styling the download button

You can customize the styling of it easily by using custom CSS.

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:

#digitalAssets {
    --dda-color-100: #F7F9FC; /* Button background color */
    --dda-color-200: #E2E7F0; /* Button border color */
    --dda-color-400: #CBD2E0; /* Button hover color */
    --dda-color-600: #2D3648; /* Button text color */
}

Updated on: 17/05/2024