Prestige Theme: Moving location of a button on the Homepage

Store Design
1

Hello everyone.

I am currently using the Prestige Theme. On the homepage, I can put featured collections. There is a button that says “view all” that will open the collection page placed on the bottom of the featured collection.

I wanted to move this button to the top right of the featured collection.

store - www.guapstar.com

pw - gstar00 (upper right hand corner)

Here is what I have now and where I want the button moved:

Untitledsssss.png
Untitledsssss.png1920×1080 186 KB

Here is an example of what I want:

11xx.png
11xx.png1920×1080 257 KB

How can I achieve this? I am also able to get rid of button, which means I can make a new one on the top, instead of moving the original.

Any response will be appreciated, thank you very much.

2

Hi @emjayp ,

ou can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (min-width: 1080px) {
.shopify-section--bordered {
    position: relative;
}
.shopify-section--bordered .SectionFooter {
    position: absolute;
    top: -12px;
    right: 40px;
}
.shopify-section--bordered .SectionFooter a {
    padding: 0;
    text-decoration: underline;
    background: transparent !important;
    color: #000;
    border: 0;
}
.shopify-section--bordered .SectionFooter a:before {
    display: none !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

Hello AvadaCommerce, thank you for your response. This solution works quite well but is it possible to do the same for the mobile version?

Thank you very much!

4

Hi @emjayp ,

You can try below code to be suitable for both mobile and desktop:

.shopify-section--bordered {
    position: relative;
}
.shopify-section--bordered .SectionFooter {
    position: absolute;
    top: -12px;
    right: 40px;
}
.shopify-section--bordered .SectionFooter a {
    padding: 0;
    text-decoration: underline;
    background: transparent !important;
    color: #000;
    border: 0;
}
.shopify-section--bordered .SectionFooter a:before {
    display: none !important;
}

Hope it can help you. ^^