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
384 111 135

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
121 13 15

do you have some basic css skills?

Cela vous a-t-il aidé ? Si oui, n’hésitez pas à aimer et accepter comme solution. Vous pouvez faire un don en achetant un café ou en utilisant PayPal.me.



Cherchez-vous un développeur Shopify Thème pour votre projet ? N’hésitez pas à me contacter sur Instagram.



Je propose des services d’audit, de personnalisation de thème et de création de boutique Shopify mono-produit.
Spac-es
Shopify Partner
384 111 135

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
384 111 135

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
121 13 15

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

Cela vous a-t-il aidé ? Si oui, n’hésitez pas à aimer et accepter comme solution. Vous pouvez faire un don en achetant un café ou en utilisant PayPal.me.



Cherchez-vous un développeur Shopify Thème pour votre projet ? N’hésitez pas à me contacter sur Instagram.



Je propose des services d’audit, de personnalisation de thème et de création de boutique Shopify mono-produit.
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
121 13 15

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.

Cela vous a-t-il aidé ? Si oui, n’hésitez pas à aimer et accepter comme solution. Vous pouvez faire un don en achetant un café ou en utilisant PayPal.me.



Cherchez-vous un développeur Shopify Thème pour votre projet ? N’hésitez pas à me contacter sur Instagram.



Je propose des services d’audit, de personnalisation de thème et de création de boutique Shopify mono-produit.