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.

Updated on: 23/06/2024