Skip To Content Close Keyboard Navigation

Your cart

Close

Your cart is currently empty.

theme-help

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

 

%HHours
%MMinutes
%SSeconds
%-dDays
%HHours
%MMinutes
%SSeconds
%-wWeeks
%-dDays
%HHours
%MMinutes
%SSeconds
%HHours
%MMinutes
%SSeconds
%-dDays
%HHours
%MMinutes
%SSeconds
%-wWeeks
%-dDays
%HHours
%MMinutes
%SSeconds
//cdn.shopify.com/s/files/1/0614/3796/8618/t/6/assets/favicon-dark.webp?v=99523036855073563661639500793 //cdn.shopify.com/s/files/1/0614/3796/8618/t/6/assets/option-a.js?2646 //cdn.shopify.com/s/files/1/0614/3796/8618/t/6/assets/option-b.js?2646 Back to top