New Shopify Certification now available: Liquid Storefronts for Theme Developers

Move the shop now button down on mobile - Dawn Theme

Katielabernathy
Excursionist
24 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 8 (8)
Spac-es
Shopify Partner
160 37 53

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.

Katielabernathy
Excursionist
24 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
63 6 7

do you have some basic css skills?

Développeur de thèmes Shopify
Je personnalise ta boutique
Je crée une boutique Shopify avec un seul produit
Spac-es
Shopify Partner
160 37 53

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!

Spac-es
Shopify Partner
160 37 53

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

 

rochelin_
Shopify Partner
63 6 7

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

Développeur de thèmes Shopify
Je personnalise ta boutique
Je crée une boutique Shopify avec un seul produit
Katielabernathy
Excursionist
24 1 2

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

rochelin_
Shopify Partner
63 6 7

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.

Développeur de thèmes Shopify
Je personnalise ta boutique
Je crée une boutique Shopify avec un seul produit