Button on left side

Store Design

Topic summary

A user running the Prestige theme on Shopify wants to move the “View all” button from center to left alignment on their store’s homepage sections.

Initial Attempts:

  • First suggestion to check theme settings for button alignment options proved unsuccessful
  • Custom CSS targeting .SectionHeader and related classes with flexbox properties also failed to resolve the issue

Working Solution:
The problem was solved using a simple CSS override:

.justify-self-center {
  justify-self: flex-start !important;
}

This code should be added via: Online Store → Themes → Customize → Settings → Custom CSS tab

An alternative, more specific CSS selector was also provided targeting the featured collections carousel, though the simpler solution already worked. The issue is now resolved.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I want the View all Button on the left side

Prestige theme

url: www.45keys.com

image
image1511×237 24.2 KB

2

In the “Layout” or “Button alignment” dropdown, check for something like:

  • “Button position: Left / Center / Right”

  • “Text alignment”
    If available → set it to Left.

Only if you’re on version 6 and above

3

Hey, I can´t find something

4

Hi,

Hope this will help

  • Need to add css at base.css (or theme.css)

CSS example

/* === Move "View all" to the LEFT in Prestige === */

/* 1) Core header row used by Prestige sections */
.SectionHeader {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important; /* push content to the left */
  gap: 0.75rem; /* small space between title and button */
}

/* 2) Make the "View all" link appear BEFORE the title (left side) */
.SectionHeader__Link,
.section__action,
.heading__actions,
.SectionHeader__ButtonWrapper {
  order: -1;               /* move to the front/left */
  margin-right: 0.75rem;   /* little breathing room */
}

/* 3) (Optional) Do it only on the homepage */
/* .template-index .SectionHeader { justify-content: flex-start !important; }
.template-index .SectionHeader__Link { order: -1; } */

/* 4) (Optional) If your Featured Collection/Collection List use section-specific wrappers,
   these extra selectors help catch those too across Prestige versions */
.FeaturedCollection .SectionHeader__Link,
.featured-collection .SectionHeader__Link,
.CollectionList .SectionHeader__Link,
.collection-list .SectionHeader__Link {
  order: -1;
}
5

Hey that don´t work unfortonally

6

Ah, Can you share me a collab or staff access to see how to help?

7

Hello @MS2333 ,

I hope you are well!

Please copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

.justify-self-center {

justify-self: flex-start !important;
}

This will move the button to the left.

image
image1919×835 154 KB

8

PERFECT THANK YOU this worked

9

Hello @MS2333

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search theme.css

  • Insert the provided CSS code at the bottom of the file and save the changes.

.shopify-section--featured-collections .section-stack .featured-collections-carousel .featured-collections-carousel__item .justify-self-center
{
    justify-self: flex-start;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.