Horizontal footer in Prestige theme

Store Design
, , , , ,

Topic summary

Goal: Change Prestige theme footer so menu links display horizontally and the newsletter signup has its button on the right with text inside the input.

Context and assets:

  • Store URL and password were provided for review (arterclo.com, yaifra).
  • Screenshots illustrate the desired horizontal layout; visuals are central to understanding.

Proposed solutions:

  • Actionable: Add custom CSS in Assets > theme.css to:
    • Make footer blocks full width and reflow layout on larger screens (via a 700px media query).
    • Render footer link lists as a horizontal, wrapping flex row.
    • Display the newsletter form as a flex row with the button aligned to the right and matching input height.
  • Another suggestion to paste CSS before in theme.liquid included an empty code block, so it is incomplete, though a result image was shown.

Status:

  • The desired look was confirmed conceptually, and specific CSS was provided.
  • No final confirmation yet that the CSS changes achieved the result on the live store; discussion appears ongoing.
Summarized with AI on December 14. AI used: gpt-5.
1

Hi,

I am using prestige theme and i want my footer to look like this.

Screenshot 2024-11-18 at 15.40.54.png
Screenshot 2024-11-18 at 15.40.54.png3456Ă—276 16 KB

The links in the footer on my website now are vertical underneath each other, how can i make it horizontal like this?

Also, how can i change the button for the newsletter to be on the right of the bar. And the text for the newsletter to be inside the bar.

Store: arterclo.com

Pass: yaifra

Prestige Theme

Thanks

2

Hey @Streccent

Share your Store URL and Password if enabled.

Best Regards,

Moeed

3

Hi, thanks for your reply

Store: arterclo.com

Pass: yaifra

4

Hi @Streccent ,

I checked your footer and you are wanting something like this:

Screenshot.png
Screenshot.png2846Ă—572 15.9 KB

Please let me know, I will check it.

5

Hi Namphan,

Yes that is exactly what i am looking for!

6

Hi @Streccent

TRy this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
7

Hi @Streccent ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.footer__block-list {
  flex-direction: column;
  row-gap: 1rem;
  width: 100%;
}
.footer__block--newsletter {
  max-width: none;
  width: 100%;
  flex-basis: auto;
}
.footer__block--newsletter .form {
  display: flex;
  max-width: 500px;
}
.footer__block--newsletter .form-control {
  width: 100%;
}
.footer__block--newsletter .align-self-start {
  height: 100%;
}
.footer__block--newsletter .align-self-start .button {
  height: 100%;
}
.footer__block--links {
  max-width: none;
  width: 100%;
}
.footer__block--links ul {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 700px) {
  .footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
1 Like