Re: Move the shop now button down on mobile - Dawn Theme

Move the shop now button down on mobile - Dawn Theme

Katielabernathy
Excursionist
30 1 2

Hi, I would like to move the "Shop Now" button to the bottom of my mobile banner.Does anyone know how to do this? Screen Shot 2023-11-07 at 7.37.47 PM.png

Replies 9 (9)

Spac-es
Shopify Partner
406 119 153

If you apply the option: 'Show container on mobile' The button will be placed below the image.

This option is within the 'Mobile Design' section by selecting the banner from the Shopify customize panel.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Katielabernathy
Excursionist
30 1 2

Screen Shot 2023-11-07 at 7.57.25 PM.png

It did move it down. I'd like it to be on the graphic under "Christmas Collection". Is that possible?

rochelin_
Shopify Partner
163 15 20

do you have some basic css skills?

Pour obtenir des réponses ultra-rapides et des personnalisations sur mesure, contactez-moi directement : https://comeup.com/fr/@guilerminmouafo

Spac-es
Shopify Partner
406 119 153

Can be done! It took me a little while to find a solution.

 

Look for a file called: section-image-banner.css and add the following code to the end of the document:

@media screen and (max-width: 749px) {
  .banner__buttons {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 45rem;
    word-break: break-word;
  }
}

 I hope it helped you!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Spac-es
Shopify Partner
406 119 153

In case you don't know how to access it, simply follow these steps :
1. Online Store > 2. Themes > 3. Three points about the current theme > 4. Use the search engine to find the file > 5. Add the above code.code.png

 

Captura de pantalla 2023-11-08 023430.png

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
aliamak
Shopify Partner
7 0 1

It worked great, thank you!  but instead of editing from the code editor, I added your code in the css section on the theme editor. with a small edit:

@media screen and (max-width: 749px) {
  .banner__box {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 45rem;
    word-break: break-word;
  }
}

 

rochelin_
Shopify Partner
163 15 20

it's possible to do this by modifying the css a little.

Pour obtenir des réponses ultra-rapides et des personnalisations sur mesure, contactez-moi directement : https://comeup.com/fr/@guilerminmouafo

Katielabernathy
Excursionist
30 1 2

Okay! do you have a code? I apologize, I don't know anything about css or coding a website.

rochelin_
Shopify Partner
163 15 20

okay, to get the code I need to inspect the element before adding the css. if it's too complicated for you, I can make the changes directly in your shop if you let me.

Pour obtenir des réponses ultra-rapides et des personnalisations sur mesure, contactez-moi directement : https://comeup.com/fr/@guilerminmouafo