Shopify Slideshow Button needs to be moved

[ArkandColleagues]

Hello,

I need to move our shopify store slideshow button further down the image close to the bottom and the Heading (and Subheading) slightly further down. We use the Dawn theme.

How do we do this?

[ArkandColleagues]

Hi,

Thanks for the reply,

The url is www.arkoutlet.shop

[Galico-Digital]

Paste this code in the end of section-image-banner.css file.

.banner__box>*+.banner__buttons {
    margin-top: 8rem;
}

[devcoders]

Hi @ArkandColleagues

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

@media screen and (max-width: 749px){
  .slideshow__slide .banner__buttons{
    position: relative;
    top: 60px;
  }
}

[ArkandColleagues]

Hi devcoders,

Thanks a lot for the code. It works!

Could you send me the custom code to move the Heading and the Subheading also please

[devcoders]

Hi @ArkandColleagues

Remove this css.

@media screen and (max-width: 749px){
  .slideshow__slide .banner__buttons{
    position: relative;
    top: 60px;
  }
}

Add this css.

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

@media screen and (max-width: 749px){
.slideshow__slide .banner__box{ position: relative; top: 100px; }
}

[ArkandColleagues]

Hi devcoders,

Thanks for the reply,

I meant I need to adjust the Heading separately, I’d like to have the Heading adjusted differently to the button.

The button’s position is good but the Heading I need it moved only slightly down, so its under the model’s face, not around the bottom.

[devcoders]

Hi @ArkandColleagues

You want like this.

[ArkandColleagues]

The “New Arrivals” to be under the guys chin so to move the header slightly down

[devcoders]

Hi @ArkandColleagues

Like this ?

[ArkandColleagues]

Hi devcoder

I took a screenshot of a draft I made last week. Its an old image. Ignore the other button.

This is the position I want the Header below the man’s chin.

I would like the Subheading “rugby jest” slightly above the button

[devcoders]

Hi @ArkandColleagues

Please remove the CSS I shared earlier and add this one instead.

@media screen and (max-width: 749px) {
    .slideshow__slide .banner__buttons {
        position: relative;
        top: 60px;
    }
    .banner__heading {
    margin-top: 8rem;
    }
}

[OttyAI]

So you’ll need to edit the CSS for the slideshow section in Dawn. Go to your theme customizer, click on the slideshow section, and look for custom CSS options there. If that’s not available you might need to add some CSS through the theme’s custom CSS file to adjust the positioning of those elements. Are you comfortable editing CSS or do you need someone to walk you through it?

[ArkandColleagues]

Hi Devcodes

I put in the new code and now it doeent work

[ArkandColleagues]

Also on top of my previous reply above this one. On top of the new code you provided not working. The position is off.

This is how I need the Heading and Subheading positioned relative to eachother.

I want to say thank you so much for the support.

[devcoders]

Hi @ArkandColleagues

Please remove the CSS I shared earlier and add this one instead.

@media screen and (max-width: 749px) {
    .slideshow__slide .banner__buttons {
        position: relative;
        top: 60px;
    }
    .banner__heading {
    margin-top: 8rem!important;
    }
}

[ArkandColleagues]

Hi devcoders,

Thanks for fixing the Header for me. I have one final request

How do I move the Subheading so that its right ontop of the button like this:

[devcoders]

Hi @ArkandColleagues

I have a suggestion: you can add all these settings in the Customize section . That way, whenever you need to make changes, you can easily adjust the position (left, right, top, bottom, or center) from there. It will be much easier to manage. If you’d like, let me know and I can set it up properly for you.

[ArkandColleagues]

Hi devcoders,

Thanks a lot for the suggestion.

Could you adjust the Subheading first then we can set up Customizable settings for me to have after?

Its so I can have the flexibility of having both.

[devcoders]

Hi @ArkandColleagues

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

@media screen and (max-width: 749px) {
.banner__text.rte {
    position: relative;
    top: 65px;
}
}