This page is ignored from search.
This new theme is much more complicated than the old theme, that's because when it was purchased it was incredibly generic. There were 6 different header options, tons of features like Quick View, AJAX Loading, etc. When I started working on it I was asked to add very specific features that are 100% custom built. It also uses some new technology not seen on the old theme.
To change style
The main stylesheet is called 'assets/global-styles.css'. I made some variables to easily change the color scheme and fonts.
Homepage
index-complete.liquid
How to add banners:
go to banner-data.liquid
follow instructions
Remove from search:
On a page:
Add '<!--ignore-from-search-->' to the page content
On a blog post:
Add '<!--ignore-from-search-->' to the page content
On a collection:
Add '<!--ignore-from-search-->' to the description
On a product:
Add the tag 'ignore_from_search'
Modify links on header / footer:
navigation-content.liquid
Add a tooltip:
Add these properties to a link:
data-tl-tooltip="Share on Facebook"
data-tl-tooltip-settings="topOffset: -20, direction: below"
<a
href="LINK"
data-tl-tooltip="Share on Facebook"
data-tl-tooltip-settings="topOffset: -20, direction: below"
>
<i class="lnr-facebook-letter-logo ver-sub"></i>
</a>
Images:
I use multisized images for speed (ie IMAGE-NAME-lg.webp, IMAGE-NAME-sm.webp, etc) some of the tools on this site only support multisized images. The most common being the banner system.
All of my tools support only WEBP images but if you want to use PNG on other things go for it. You can convert PNG to WEBP here: https://cloudconvert.com/png-to-webp
This is how images are included:
This is the assets folder:
assets
- test.png
- test.webp
- apple.webp
- banana.webp
To add in a liquid file:
{{ 'apple.webp' | asset_url }}
This means, Shopify will find a file called 'apple.webp' inside the asset folder, then get the URL to it.
This way you don't have to remember long URLs and if you change the images the URL will update automatically.
To learn Liquid, check this out:
https://shopify.github.io/liquid/
Icons
List of icons: https://boostheme.com/vodoma/icons
Add an icon:
<i class="lnr-ICONNAME"></i>
Important Files
- Megamenu / Footer links: snippets/navigation-content.liquid, header-controller.js, megamenu-container.liquid, header-render-storage.liquid
- Above Megamenu with logos: snippets/header-top-complete.liquid
- Top row of footer (Review, newsletter, logos) - snippets/footer-row-top.liquid
- Middle row of footer (all links) - snippets/footer-row-links.liquid
- Bottom row of footer (brand logos) - snippets/footer-row-bottom.liquid
- Banners / Carousel - snippets/banner-data.liquid
- Main Styles - assets/global-styles.css