Common code troubleshooting
Troubleshooting | SalesHunterThemes
# Set up customers’ store as demo store
To help customers set up their store to match the demo of the theme, the team has uploaded the demo template files for all themes to this data hub.
A tutorial video for anyone who is unfamiliar with the process can be found here.
# Theme demo zip file
- To import demo store for the customer:
Step 1: Identify the demo store that the customer wants to import
Step 2: Access this file Theme demo zip file to download that demo store
Step 3: Access Store -> Online Store -> Themes -> add theme
Note:
- You need to identify the correct demo store that the customer needs and upload the correct theme.
- Inform the customer that we will import a completely new demo theme, not overwriting their old theme.
#Update themes
1. Keep the content, settings, and layout.
- You need to duplicate the current theme
- Click to update the current theme icon to get a new theme.
- Manually updating JSON template files in the theme folder
- Open both the new theme and the old theme in two tabs.
- Click on Edit theme code to access to theme folders for both themes.
- Search and copy list JSON template files from the current theme to the new theme:
- settings_data.json for general theme settings
- index.json for your home page
- JSON for other pages:
- product.json will contain your default product template
- collection.json will contain your default collection template
- The same goes for article.json, blog.json, cart.json, and page.json
- Note: You might also have custom templates you created. An example like this screenshot is flash-sale template
- Go to a new theme create this template in the Templates Folder and add the same name like this
- Do the same with other .json files template above by copying the content.
- If you get some error when you save the .json files templat in the new theme, let check the layout and order of these sections in the template to make them have the same structure or you can check and delete the text that mentions in the error.
- Check the settings again in Theme Customizer between two themes
2. Check the customized code and moving to new theme.
- Open Diffchecker app in your device to check the change on your theme file.
- If the customer know the where they change, you can access that file and check the difference and copy the difference to the new theme.
- There is one way to help you check the file that was updated in your current theme, you can check some default files from theme with this small dots like this image
- Copy “Current” content and the “Original” content to see the difference in this file in Diffchecker app. Paste “Current” to “Change text” and “Original” to “Original text” on the Diffchecker app.
- Copy the different content to the same file in new theme
#Fix the error of the filter color
Reason
We are making the override setting between the filter metafields color and the filter color.
Solution
- Go to the theme folder code
- Search File: main-search-filter-form.liquid
- Update the code in the theme like this
#Hide the cart drawer from the SHT theme when the customer wants to use 3rd cart
Reason
The customer uses some 3rd app that supports showing the cart drawer in our theme but when they click on the cart icon or add the product to the cart, both the cart drawer from the 3rd app and our theme show.
Solution
We need to hide the cart drawer from our theme and change theme.js file
- Go to theme.js and make some actions like this image
- Add some custom css in custom-css.liquid file to hide cart drawer of theme like this image
#Customize the stock number in the Variant selector
Reason
Some customers want to show the low stock number with a message like “Only 3 left” when they choose the variant options.
Solution
- Open the theme folder and search 3 files like this image
- Create one block setting with a low number the customer wants to set. Ref
- Update the condition to show the stock text in the Variant selector like this image
#Some features of SHT themes do not work
Reason
Some translation apps add some HTML to Store Currency so this can conflict with our Javascript. You can check this image: Monosnap File Monosnap File
Solution
You can go to theme.liquid file and then update the {{shop.money_format}} follows this image
#Make the video banner autoplay
- Steps
- Open theme.js file
- Go to Online JavaScript beautifier to format this javascript file
- Find SHTLazyLoadingVideo and comment on the execute function like the below video and images
- Video guide
- Image: Monosnap File
#Video banner is blurred after fixing autoplay
- You need more size for a video banner like this: https://prnt.sc/TBYu6Q47ApzG
#Open the cart drawer after clicking the ATC button
- Steps
- Open component-add-to-cart.js file and find the onSubmitHandler function
- Comment on the function of render Cart notification and add some custom code like this image: Monosnap File
- Add code:
fetch("" + routes.cart_url, SHTHelper.fetchConfigHTTP).then(t => t.json()).then(t => {
document.querySelector('.cart-count-number').innerText = t.item_count;
document.querySelector('.header__cart-count').classList.remove('opacity-0', 'hidden-xs');
console.log('check cart', t); try { window.shtCartDrawer.openDrawer(); } catch(err) { window.location.assign('/cart');}
})
// this.cartNotification && this.cartNotification.renderContents(t),
this.cartDrawerForm && this.cartDrawerForm.renderContents(t),
this.elms.quantity_input_container && "add-to-cart" == this.elms.quantity_input_container.dataset.show && (this.elms.quantity_input_container.classList.remove("d-none"),
this.elms.quantity_input_container.querySelector("input").value = 1),
this.cardRecipientForm && this.cardRecipientForm.resetRecipientForm(), this.elms.header || window.location.assign(window.routes.cart_url))
fetch("" + routes.cart_url, SHTHelper.fetchConfigHTTP).then(t => t.json()).then(t => {
document.querySelector('.cart-count-number').innerText = t.item_count;
document.querySelector('.header__cart-count').classList.remove('opacity-0', 'hidden-xs');4
window.shtCartDrawer.openDrawer()
})
}
)
#Custom section spacing
https://monosnap.com/direct/dEBZfyDFkISJ22DX59sk9VB5GNE2sP
div:has(> .ctnr) {
--spacing: 0px !important;
}
Or
https://monosnap.com/direct/d3C3QI4QjiPHzxCm2dLrsnDq09nR80
.ctnr {
--gutter-base: 5px;
}
#Remove the out of stock badge
Add CSS code:
.card__badge .badge--oos {
display: none!important
}
#Cart icon in the header does not work
https://monosnap.com/file/bV9bcBaAxwnfqDJp4w1CEzN4PsLZ1Q
.search--close {
display: none !important;
}
sht-predictive-srch[open="true"] .search--close {
display: flex !important;
}
#Align logo in the center of the menu and search icons (mobile view)
https://monosnap.com/file/ubinxKltCv2ezDJnhuGgj7SXNQHmoH
@media (max-width: 767px) {
.header {
grid-template-columns: 75% auto auto;
}
.header__logo {
display: grid;
grid-template-columns: calc((100vw - 40px) / 4) auto;
grid-gap: 0;
}
.header-logo .header__logo-link {
text-align: center;
}
}
#Change the scrolling speed of moving image banner
https://monosnap.com/direct/52R3yAge8tszrA5cOtRnblO2er2xaz
.moving-image-inner {
animation-duration: 50s;
}
#Video Banner does not show full video (mobile view)
https://monosnap.com/file/AHQsaQXeg9VByxScewsZbieNH8ScoW
@media (max-width: 767px) {
[style*="--mh-xs"] {
min-height: 50vh;
}
}
#Remove the gray background from price in the Blum theme
https://monosnap.com/file/tIA29o0e9ABZZ7iit4P5NSGQUkscQa
.product__prices{
background:transparent
}
#Reduce this distance between the blocks
.section, .shopify-challenge__container {
--spacing: 0px;
}
#Reduce some of the spacing on product page
https://monosnap.com/direct/buCtC7OBRrBg0NUSE3YlWPaFYMCN3n
.product__info {
margin-top: 10px;
}
#Collapsible image center
https://monosnap.com/direct/5H3JQk4akxYgzNomCHe6JKUbzSCcjR
.accordion__content {
padding: 0px 40px;
}
#Video youtube banner cut on the mobile
@media (max-width: 767px) {
[style*="--mh-xs"] {
min-height: 56vw;
}
sht-load-video video {
height: 100%;
min-height: unset;
}
}
#Video vimeo banner cut on the mobile
@media (max-width: 767px) {
[style*="--mh-xs"] {
min-height: 56vw;
}
sht-load-video iframe {
height: 100%;
min-height: unset;
}
}
#Custom ATC color
[https://monosnap.com/direct/wSTmwFHMHBFQpUyMS0awalVI6SF3ZI
](https://monosnap.com/direct/wSTmwFHMHBFQpUyMS0awalVI6SF3ZI)
.product-btn-atc {
color: blue;
}
#Change limit size logo header
https://monosnap.com/file/4gPgWx0dM0RgR6pnjbPicl20A56tVs
#Show the full hierarchy of breadcrumb no matter how we open a product page e.g
Home > Collection Name > Product name
https://monosnap.com/file/wNYCy1lTe01AeVKo4Zyw9ra9EdT9aA
Add CSS code
{% else %}
{% assign collectionFirst= product.collections.first %}
<li>
{{ collectionFirst.title | link_to: collectionFirst.url, class: 'td-underline' }}
</li>
{{separate}}
{%- endif -%}
#The featured image to appear first in product media/details element
https://monosnap.com/file/iYvJGF5rF8tIO62Fx48eSV3BOekh0m
https://monosnap.com/file/9Q5VnfINPLJAAX9XxWqDFNK6SWHxUn
#Remove border radius of product images and then ROUNDED becomes just an OPTION.
https://monosnap.com/direct/8MmwFZs2VmMv4JYgyGmAYlirXDBjhL
Add code option:
https://monosnap.com/file/RL0C32MTc2neqzvRtZV8txzX4sH20w
{
"type": "range",
"id": "media_radius",
"min": 0,
"max": 64,
"step": 1,
"label": "Media Radius",
"default": 20
},
Add CSS code:
https://monosnap.com/direct/lHLouBfzrp1aKwa5DitCNzWnuxPmGF
<style>
#mainContent .card__media {
border-radius:{{settings.media_radius|append:'px'}}
}
</style>
#Code hover open menu theme Shine
<script>
window.addEventListener("load", () => {
document.querySelectorAll("sht-menu-header details").forEach(e => {
e.addEventListener("mouseover", () => {
e.setAttribute("open", true)
e.setAttribute("class", "is-open")
});
e.addEventListener("mouseout", () => {
console.log(e)
e.removeAttribute("open")
e.removeAttribute("class")
});
})
})
</script>
#Code hover open menu theme Electron + Blum
<script>
window.addEventListener("load", () => {
let currentOpenMenu = null;
document.querySelectorAll("sht-menu-header details").forEach(menu => {
menu.addEventListener("mouseenter", () => {
if (currentOpenMenu && currentOpenMenu !== menu) {
currentOpenMenu.removeAttribute("open");
currentOpenMenu.removeAttribute("class");
}
menu.setAttribute("open", true);
menu.setAttribute("class", "is-open");
currentOpenMenu = menu;
});
});
const mainSection = document.querySelector("main");
mainSection.addEventListener("mouseenter", () => {
if (currentOpenMenu) {
currentOpenMenu.removeAttribute("open");
currentOpenMenu.removeAttribute("class");
currentOpenMenu = null;
}
});
const mainSections = document.querySelector(".js-top-bar");
mainSections.addEventListener("mouseenter", () => {
if (currentOpenMenu) {
currentOpenMenu.removeAttribute("open");
currentOpenMenu.removeAttribute("class");
currentOpenMenu = null;
}
});
});
</script>
<style>
.menu-dropdown {
top: calc(100%) !important;
}
</style>
#Custom can click menu level 1 (after add code hover menu above) - Electro
- Change the HTML code to tag <a> for menu level 1 https://prnt.sc/ZSwCItsFR2l_
<a href="{{ link.url }}" class="d-block linktitle {{ link.current | default: '' | replace: 'true', 'menulink--active' }}">
<span class="d-block link__title">{{ link.title }}</span>
</a>
- Add this code script https://prnt.sc/a0eJDxBl8HdX
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.link__title').forEach(link => {
link.addEventListener('click', function(event) {
event.stopPropagation();
window.location.href = this.href;
});
});
});
</script>
Updated on: 03/06/2025
Thank you!