Code tweaks
Code tweaks for Local: CSS to remove footer link underlines and enlarge the logo, more icons in the Icons list, and more custom badges.
Applies to: Local 4.2.1 and later. Added in: Local 1.0.0. Last checked: 2026-10-13 against Local 4.2.1.
Krown support does not provide help with custom code. This page collects small code changes for Local that customers often ask about, checked against Local 4.2.1. Use them at your own risk, keep a copy of every change, and check them again after each theme update.
Please note that any changes made directly to the theme code will not be preserved after future updates. It is recommended to keep track of any modifications so they can be reapplied after each theme update.
How do I remove the underline from footer links?
Add this CSS in Theme settings → Custom CSS:
.footer-item__menu a, .footer-bottom a {
border-bottom: none !important;
}It removes the line under the links of the footer Menu blocks and of the bottom row (copyright and "Powered by Shopify").
How do I show more icons in the Icons list?
No code is needed in Local 4.2.1. The Icons list block of the product page holds 8 icons, and you can add up to 4 Icons list blocks to the same product page, for up to 32 icons. See Product attribute blocks.
How do I make the logo bigger than the settings allow?
First raise Header → Desktop logo image maximum height (up to 100 px) and Mobile logo image maximum height (up to 100 px). Since Local 4.2.1, the theme also prepares the logo image at the size of these settings, so a logo made bigger with CSS can look soft. The settings are the safe way.
For a desktop logo taller than 100 px, a developer can raise the size variable the header uses, in Theme settings → Custom CSS:
@media screen and (min-width: 1024px) {
.header__top {
--header-logo: 140px !important;
}
}Replace 140px with your height. Upload a logo image at least twice that tall, and check the sticky header and the transparent header afterwards.
How do I add more than three custom badges?
Local has three custom badges in Theme settings → Product card, a limit set for design reasons. A developer can add more in snippets/product-badges.liquid.
Open the badges snippet
In Shopify admin → Online Store → Themes → … → Edit code, open the Snippets folder and select product-badges.liquid. Duplicate the theme first, so you can go back.
Find the last custom badge
Scroll to the block that starts with {%- if settings.product_card_badge_custom_3_tags != blank and ends with {%- endif -%}, just before the closing </div>.
Paste the new badge
Paste this code after that {%- endif -%} and before </div>. Replace limited (the product tag, three times: once in the condition and twice in the class and text) with your own tag and badge text:
{%- if product.tags contains 'limited' -%}
<span class="product-item__badge product-item__badge--limited"
style="background-color: {{ settings.product_card_badge_custom_3_color }}; color: {{ settings.product_card_badge_custom_3_text_color }}"
>
Limited
</span>
{%- endif -%}The badge reuses the colors of Custom badge 3. For other colors, replace the two settings… values with color codes such as #1d1d1d.
Save and check
Select Save, tag a product with your tag in Shopify admin → Products and check its product card and product page.
The new badge shows on product cards (when Show badges is on) and in the Product badges block of the product page, like the three built-in custom badges. A theme update replaces this snippet: add the code again after each update.
Related pages
- Custom CSS and code: where code can go, and what survives an update.
- Product badges theme settings: the three built-in custom badges.
- Product attribute blocks: the Icons list block on the product page.
- Header section: the logo height settings.