Change Font Size, Padding , Remove The Underline And Change The Position Email Form

Store Design
, , , ,

Topic summary

Topic: Modify footer typography and spacing, remove underlines, and reposition the email sign-up form in a Shopify store.

Latest update: A contributor provides a CSS-based approach for the Dawn theme to change font size, padding, and remove underlines in the footer. Steps:

  • Use the browser’s Inspect tool to identify the relevant footer class (e.g., .footer-block__details-content).
  • In Shopify: Online Store > Themes > Customize, select the Footer section.
  • Add Custom CSS:
    .footer-block__details-content>p, .footer-block__details-content>li { padding-top: 50px; font-size: 50px; text-decoration-line: none; }
  • Effects: larger text, increased spacing (padding-top), and no underlines.

Scope and notes:

  • The guidance focuses on styling text elements (paragraphs and list items) in the footer of the Dawn theme.
  • Repositioning the email sign-up form (layout change) was not addressed; no instructions on moving the form’s position were provided.
  • Screenshots were included for reference but are supplementary.

Status: Partially resolved (styling covered); the layout/position change remains open.

Summarized with AI on January 2. AI used: gpt-5.
1

Hi, I am looking to

  • Change the font size
  • Adjust the padding,
  • Remove the underline
  • and also change the position of the sign-up form in the Footer.

Please provide instructions on how to achieve these modifications. Any assistance you can offer would be greatly appreciated.

![Screenshot 2024-03-21 233224 (1).png|999x418](upload://bwl7BOJiuMVMjucUB6ED6mon3Jp.png)
2

Hi @Christopher_18 , I’m currently using the Dawn theme and I found a way to adjust the CSS style of the footer that you might find useful. Here’s how you can do it:

Step 1: Inspect the Page- Right-click on your page and select “Inspect” .

  • Look for the most general class name associated with the list menu in the footer.

Step 2: Access Theme Customization- Navigate to your Shopify dashboard, then go to “Online Store” > “Themes”.

  • Find the Dawn theme and click “Customize”.
  • In the theme editor, select the footer section from the left-hand menu.

PageFlyGarcia_2-1711078837424.png
PageFlyGarcia_2-1711078837424.png3358×1698 668 KB

Step 3: Add Custom CSS- In the right-hand menu, you’ll find a box where you can enter custom CSS code. Insert the following code:

.footer-block__details-content>p, .footer-block__details-content>li {
    padding-top: 50px;
    font-size: 50px;
    text-decoration-line: none;
}

Here is how it looks from my site:

PageFlyGarcia_0-1711078563815.png
PageFlyGarcia_0-1711078563815.png3346×1214 335 KB

In which:

  • ’ .footer-block__details-content ’ is the class of the content need to be adjusted in footer

  • padding top: 50px; making the footer’s text more spaced out

  • text-decoration-line: none; remove the underline

  • font-size: 50px; to change the font size

Hope it helps!