Adding a Downloadable File or Button to the Homepage

Adding a Downloadable File or Button to the Homepage

You can easily add a downloadable file to your storefront homepage using Infigo's editable content blocks. This allows you to offer resources like brochures, templates, or guides directly from your homepage. You can also style the link as a button for a more visually engaging experience.

This article also covers how to apply custom CSS if you want to style individual links or buttons differently from your global theme settings.

Use cases

• Providing a downloadable brochure or flyer on the homepage
• Offering a template or sample file for customers to download
• Creating a visually styled button that links to a downloadable file
• Customising link or button colours for specific content blocks
• Adjusting spacing or layout using CSS overrides

Key settings in Infigo

• Editable Content Blocks: Content Management > Editable Content
• Appearance Settings: Content Management > Appearance Settings
• Custom CSS: Content Management > CSS Override

Step-by-step guide

1. Navigate to Content Management > Editable Content.
2. Select a homepage content block such as Homepage Above Midpage or Homepage Below Midpage.
   • 
     
3. In the content editor, utilise content templates to create stylised sections, columns and content. Select a File content block
   • 
4. Once created, upload the file you wish to provide as a download
   • 
5. Use the Settings icon (represented by a gear) to change how the link to this download appears on your page. For example, you can provide a simple linked text, a button or more. In this example, we will select a button.
   • 
6. To style the link or button, you can:
   • Use the Appearance Settings to change global link or button colours (note: this affects the entire site).
   • Or apply custom CSS to target specific links or buttons for individual styling.
7. To add custom CSS:
   • Go to Content Management > CSS Override.
   • Add a CSS rule targeting the specific element (e.g., using a class or ID).
   • Example:

      .download-link { color: #ffffff; background-color: #000000; padding: 10px 20px; display: inline-block; text-decoration: none; } 

8. Save your changes and preview the homepage to ensure the file link or button appears and functions as expected.