Position heading in the image banner to the right upper corner

Solved

Position heading in the image banner to the right upper corner

JordanGabe
Tourist
6 0 1

Hey! I'd like to position the heading text and button in the image banner to the right upper corner. Both on desktop and especially on mobile view.

WhatsApp Image 2024-06-18 at 4.05.12 PM.jpeg

 my website url is https://charmflowerstudio.com/

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4400 1006 1657

This is an accepted solution.

Hi @JordanGabe 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
div#Banner-template--22513200824631__aa389062-33ed-40aa-9fe0-684aefc5ffb0 .banner__content {
    align-items: start !important;
}
</style>

PageFlyRichard_0-1718758755144.png

 

Additionally, while investigating the issue, I've had some suggestions for you, that might help it make your store more profressional.

PageFlyRichard_1-1718758826651.png

 

My suggestion is: to highlight the product price here, and add the review star below it.

Including review stars can enhance customer trust in your product, while highlighting the price will make it easier for customers to locate the product's pricing.

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 4 (4)

kazi
Shopify Partner
582 88 110

Hello @JordanGabe  add this css bottom of file  assets > base.css

 

.banner .banner__content {
align-items: start !important;
}

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

PageFly-Richard
Shopify Partner
4400 1006 1657

This is an accepted solution.

Hi @JordanGabe 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
div#Banner-template--22513200824631__aa389062-33ed-40aa-9fe0-684aefc5ffb0 .banner__content {
    align-items: start !important;
}
</style>

PageFlyRichard_0-1718758755144.png

 

Additionally, while investigating the issue, I've had some suggestions for you, that might help it make your store more profressional.

PageFlyRichard_1-1718758826651.png

 

My suggestion is: to highlight the product price here, and add the review star below it.

Including review stars can enhance customer trust in your product, while highlighting the price will make it easier for customers to locate the product's pricing.

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

JordanGabe
Tourist
6 0 1

Hey Richard! Thank you a ton for your suggestions and code, the code worked! And I'll make sure to implement your amazing suggestions, also one more thing how can I stack the the text on the banner "5 Stars" to be a line above "on Google Maps". Like this:

5 Stars

on Google Maps

Team_OSC
Shopify Partner
157 18 23

Hi @JordanGabe 

Online store > customizations > select image banner section > set this (for desktop):

Screenshot 2024-06-19 111155.png

For mobile:

Online store > themes > edit code > assests > base.css > paste this code:

@media screen and (max-width: 768px) {
    .banner .banner__content {
        align-items: start !important;
    }
}

 

Let me know if it is useful by like and accept my solution.

 

Regards

Team_OSC