Re: Dawn theme - how to add 'scroll down arrow/indicator' on home page

Dawn theme - how to add 'scroll down arrow/indicator' on home page

DIG
Tourist
16 0 3

Hi, I am using dawn theme, how to add 'scroll down arrow/indicator' on home page? ... please help 

Replies 4 (4)

EYCB
Shopify Partner
70 5 13

Hello DEmichelle,

You can add a "scroll down arrow/indicator" on your home page using HTML and CSS code.

HTML Code:

"<div class="scroll-down-indicator">
<a href="#next-section">
<i class="fa fa-angle-down"></i>
</a>
</div> "

 

CSS code-:

".scroll-down-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
}

.scroll-down-indicator a {
color: #fff;
text-decoration: none;
font-size: 30px;
transition: all 0.3s ease-in-out;
}

.scroll-down-indicator a:hover {
color: #ddd;
} "

Note: This code uses Font Awesome for the down arrow icon. Make sure to include the Font Awesome CSS in your theme.

You can add this code to your theme's HTML and CSS files, or use a section in the theme editor to add it to the home page. You'll also need to update the href attribute in the HTML code to point to the section you want the user to scroll to.

banned
DIG
Tourist
16 0 3

Hi Coddvila,

 

Where to add the above html and css codes? I am using Futura font. Could you amend the codes for Futura font and resend/guide me here... BIG thank you !!

EYCB
Shopify Partner
70 5 13

Hey can you give me your store url so that i can check your code and provide the exact solution.

banned
DIG
Tourist
16 0 3

Hi, my store url anveerus.com

Thanks!