Add a slogan and button to the welcome banner.

[trong2409]

Hi, I am using the "Studio" theme and cannot add a slogan and button inside the banner. I want to add them like in the "Trade" theme, as shown in the image below.

My url: https://uponshelf.com/

Thank you!

[Shadab_dev]

Strange as far as my knowledge every theme on any platform would offer as common as elements like a heading and button. 

Don't you have an option from the customizer to add heading and button in the image banner section from the customizer?

[trong2409]

There is a slogan and button, but I cannot adjust their positions to my liking. They look like this.

[Shadab_dev]

If it's just aligning to the left or right I can help you with it. So make your changes and let me know where you need it and I will try updating the code with you.

But if you need more styling to be done other than just aligning it I can help with that as well but ofcourse as you can understand will take some time and I will look forward to a service fee depending on your requirements.

Best

Shadab

[trong2409]

Can you customize the slogan and button to look like these two images: image 1 for desktop and image 2 for mobile ?

Thank you so much!!

[Vinsinfo · Accepted solution]

@trong2409 Please follow the steps below to add a slogan and button to the welcome banner in the Studio theme. Let us know if this is helpful for you.

1. From the admin, go to "Online Store" → "Themes".

2. Click the "Customize" button for the current theme.

3. Select the "Image Banner" section.

4. Update the following:

- Change the color scheme to Scheme 3, as shown in the screenshot.

- Change the "Desktop content position" as middle left as like in the below screenshot.

- Disable the "Show container on desktop" option as shown in below screen shot.

- Change the "Desktop content alignment" as left as like in the below screenshot

- Enter the title, subtitle, button label, and button link. Rearrange the order so that the subtitle is first, the title is second, and the button is last, as shown in the screenshot.

5. Under the Mobile Layout section:

- Disable the "Stack Images on Mobile" option.

- Disable the "Show Container on Mobile" option, as shown in the screenshot.

6. Click the "Action" button for the current theme and select "Edit Code".

7. Search for and locate the `section-image-banner.css` file. Add the following CSS code at the bottom of the file and save the changes:

.banner__buttons .button {
  border-radius: 4px;
  background-color: #B7ACA2;
}
.banner__buttons .button:after {
  display: none;
}

Final results will be like,

Desktop:

Mobile:

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[trong2409]

Thank you so much bro!!