Can you modify text placement and color in Shopify's Debut theme?

kilde
New Member
9 0 0

Hi, I have debut theme for my shop, and I would like to make some changes for the text on the theme. 

1) I would like to move the text from the bottom of the picture to the top of the picture. 

2) On the top photo of the shop, I would like to move the text to the left incl. the button. 

3) also does anyone know how to change the color behind the logo og menu bar? 

Best regards Zandra

 

moe text to the left.pngMove text.png

Replies 17 (17)

oscprofessional
Shopify Partner
15830 2369 3071

Hello kilde,
Please share your site url.
So that i can check and let you know the exact solution here.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
kilde
New Member
9 0 0

Hi, yes: https://riisoghertz.com . password: shopi2

 

Thanks

oscprofessional
Shopify Partner
15830 2369 3071

Hello kilde,
2) On the top photo of the shop,to move the text to the left incl. the button.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and (min-width: 750px){
#shopify-section-hero-1 .page-width.text-center {
    text-align: left!important;
}
#shopify-section-hero-1 .rte-setting.mega-subtitle {
    margin: 0px!important;
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15830 2369 3071

3) To change the color behind the logo og menu bar.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.site-header.logo--center {
    background-color: pink;
}
.site-header.logo--center .grid.grid--no-gutters.grid--table.site-header__mobile-nav {
    background-color: pink;
}

 Change the color as per your choice.
Hope this will work for you.
Thanks....

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
kilde
New Member
9 0 0

Thank you very much. 

3) for the color, it doesn't color the menu bar? do you know why? 

Also do you know any solution of my question no. 1? 

Thank you in advance. 

oscprofessional
Shopify Partner
15830 2369 3071

Hello @kilde 

Your site is password protected please share password.
So that I can check and let you know the exact solution for this.

Thanks...

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
kilde
New Member
9 0 0

You should be able to check now. Same password as above: shopi2. Thanks

Wahab_Ahmad
Shopify Partner
773 114 200

Hello @kilde,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

.page-width.text-center {
margin: 0px;
}


Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
oscprofessional
Shopify Partner
15830 2369 3071

Hello @kilde 

for changing background color of menu bar used following code :

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-header .site-nav {
	position: relative;
	text-align: center;
	margin: 0;
	background: #D9BDBD !important;
	padding: 20px;
	color: #fff;
}
.border-bottom {
	border-bottom: none;
}
.site-nav__label {
	border-bottom: 1px solid transparent;
	color: #fff !important;
	font-weight: bold;
}
.site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label {
	border-bottom-color: #fff !important;
}
.site-nav__link .icon-chevron-down {
	fill: #fff;
}

Hope this will work for you

Thanks....

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
kilde
New Member
9 0 0

Thank you so much. It all works. 

Now the only thing I can't do is below:

1) I would like to move the text from the bottom of the picture to the top of the picture. 

2) and also change the size of the text on the hero, too small? 

kilde
New Member
9 0 0

And another small question regarding the color. How to change on the background color of dropdown menu, without changing the color the entire background of the website?. Thanks

oscprofessional
Shopify Partner
15830 2369 3071

Hello @kilde 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.site-nav--has-dropdown #SiteNavLabel-feng-shui-indretning {
	background: #c5bdb1;
}

Hope this will work for you

Thanks....

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
kilde
New Member
9 0 0

Thanks, that worked for the drop down. 

Do you know about the other solution? 

oscprofessional
Shopify Partner
15830 2369 3071

Hello @kilde 

Changes regarding to

1) I would like to move the text from the bottom of the picture to the top of the picture.

2) and also change the size of the text on the hero, too small?

Please specify screenshot related to which text you want to move and change the size of text.

So that I can check and let you know the exact solution for this.

Thanks...

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
kilde
New Member
9 0 0

Hi, thank you. Pls find photo here, for moving the text above the photos. 

The other thing I asked about, I fingered it out. 

Move text.png

tmm1996
Visitor
1 0 0

are you able to help me please?

 

i want to move the heading text on my homepage slightly down

 

tmm1996_0-1618047030615.png

 

 

so that the text isn't across the main picture i want it slightly nearer the bottom

oscprofessional
Shopify Partner
15830 2369 3071

Hello tmm1996,
Please share your store URL with password (If Needed), So that I will give you proper solution here !

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing