Shopify themes, liquid, logos, and UX
Hi!
I am in the process of setting up my website using the Brooklyn Theme, and in my logo there is one space between each letter, two in between the words. However when writing my company name and collection name in the header and subheader section under "Customise Theme", it does not register the two spaces between the words, so when published it is hard to read. Is there a way around this? I'm experiencing the same issue when writing my company name under General Settings.
Any help would be greatly appreciated, thank you!
Solved! Go to the solution
This is an accepted solution.
Try a CSS solution. Remove all spacing between letters and keep the single spacing between the word and then go to 'Edit Code' of the theme to add the following in the bottom of your theme.scss.liquid
a.site-header__logo-link {
letter-spacing: 5px;
word-spacing: 10px;
}
letter-spacing is for the space between 2 letters inside a word, and word-spacing is between the words (increase or decrease to get your desired outcome)
Hope this helps
This is an accepted solution.
Use this for headings
h2.h1.section-header__title {
letter-spacing: 5px;
word-spacing: 10px;
}
Check your store completely to make sure there is no negative impact of adding this
This is an accepted solution.
Try a CSS solution. Remove all spacing between letters and keep the single spacing between the word and then go to 'Edit Code' of the theme to add the following in the bottom of your theme.scss.liquid
a.site-header__logo-link {
letter-spacing: 5px;
word-spacing: 10px;
}
letter-spacing is for the space between 2 letters inside a word, and word-spacing is between the words (increase or decrease to get your desired outcome)
Hope this helps
Hi, thank you so much, this really helped and solved the problem. Thank you! How do I apply the same code to the headers on the brooklyn theme, for example I'm attempting to do The featured collection title on the home page.
This is an accepted solution.
Use this for headings
h2.h1.section-header__title {
letter-spacing: 5px;
word-spacing: 10px;
}
Check your store completely to make sure there is no negative impact of adding this
Hi, this worked perfectly fine for me. Thank you for all your help I really appreciate it. Does the same code apply when doing the headings for different pages on the theme?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024