Custom Cart Icon Not Showing
I am using the Refresh theme. When I save my edited code for a cart SVG icon (for icon-cart and icon-cart-empty) the icon disappears completely.
Custom cart icon should be to the right of the account icon.
Hii i have an issue please help me , i have slideshow section which support both video & image format but perhaps its does not have a option to upload video & images for mobile devices. I want you to optimized it for mobile devices also , so that i'll able to upload video & images for mobile & desktop seperately . I'll be very thankful to you . Below is the code :
My webiste link: https://mansaroverfurnishings.com/
{% comment %}
© Sections Pro. You are free to use this section in your store. You may not redistribute this section in another Shopify app.
{% endcomment %}
<style>
{{ section.settings.text_font | font_face }}
{% assign short_id = section.id | slice: -3, 3 %}
@keyframes slpProgressBar {
0% { width: 0; }
100% { width: 100%; }
}
#sp-slideshow-{{ section.id }}.sp-slideshow-wrap p,
#sp-slideshow-{{ section.id }}.sp-slideshow-wrap a {
font-size: {{ section.settings.text_size }}px;
font-family: {{ section.settings.text_font.family }}, {{ section.settings.text_font.fallback_families }};
font-weight: {{ section.settings.text_font.weight }};
line-height: 1.15;
}
#sp-slideshow-{{ section.id }}.sp-slideshow-wrap {
background-image: {{ section.settings.background_color }};
width: 100%;
}
#sp-slideshow-{{ section.id }} .sp-slideshow {
position: relative;
margin: 0 auto;
max-width: {{ section.settings.max_width }}px;
padding: {{ section.settings.padding_top }}px {{ section.settings.padding_right }}px {{ section.settings.padding_bottom }}px {{ section.settings.padding_left }}px;
}
#sp-slideshow-{{ section.id }} .sp-slideshow .sp-slideshow-grid {
position: relative;
margin: 0 auto;
padding: 0;
display: block;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-col {
margin: 0;
padding: 0;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-carousel {
display: grid;
grid-auto-columns: 100%;
grid-auto-flow: column;
width: 100%;
overflow-x: scroll;
scroll-snap-type: x mandatory;
border-radius: {{ section.settings.media_radius }}px;
{% if section.settings.media_shadow %}box-shadow: 0 0 5px 0 rgba(0,0,0,0.20);{% endif %}
margin: 0;
padding: 0;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-carousel::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
#sp-slideshow-{{ section.id }} .sp-slideshow-carousel .sp-slideshow-slide {
scroll-snap-align: start;
position: relative;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-slide {
position: relative;
width: 100%;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-content video {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: {{ section.settings.media_aspect_ratio }};
display: block;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-content img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: {{ section.settings.media_aspect_ratio }};
display: block;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-slide-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
background: {{ section.settings.caption_background_color }};
}
#sp-slideshow-{{ section.id }} .sp-slideshow-slide-text p {
color: {{ section.settings.text_color }};
font-weight: normal;
margin: 0;
padding: 10px 20px;
text-align: center;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-slide-text p a,
#sp-slideshow-{{ section.id }} .sp-slideshow-slide-text p a:visited {
font-weight: bold;
text-decoration: underline;
color: {{ section.settings.text_color }};
}
#sp-slideshow-{{ section.id }} .sp-slideshow-snap-links {
display: block;
width: 100%;
padding: 10px;
margin: 0;
text-align: center;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-snap-links a {
display: inline-block;
background-color: {{ section.settings.indicator_color }};
width: 12px;
height: 12px;
border-radius: 50%;
text-indent: -9999px;
padding: 0;
margin: 0 2.5px;
cursor: pointer;
opacity: 0.25;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-snap-links a:hover {
{{ section.settings.indicator_color }};
opacity:1;
}
#sp-slideshow-{{ section.id }} .sp-slideshow-snap-links a[active] {
{{ section.settings.indicator_color }};
opacity:1;
}
#sp-slideshow-{{ section.id }}[autoplaying] #sp-slideshow-snap-links-{{ section.id }} a[active] {
background: {{ section.settings.progress_background_color }};
opacity: 1;
width: 25px;
transition: all .5s;
border-radius: 10px;
overflow: hidden;
}
#sp-slideshow-{{ section.id }}[autoplaying] #sp-slideshow-snap-links-{{ section.id }} a[active]>span {
display: block;
background: {{ section.settings.progress_foreground_color }};
height: 100%;
animation: slpProgressBar {{ section.settings.autoplay_time }}ms ease-in-out;
animation-fill-mode: both;
}
</style>
<div id="sp-slideshow-{{ section.id }}" class="sp-slideshow-wrap">
<div class="sp-slideshow ">
<div class="sp-slideshow-grid">
<div class="sp-slideshow-col">
<div id="sp-slideshow-carousel-{{ section.id }}" class="sp-slideshow-carousel">
{% for block in section.blocks %}
<div class="sp-slideshow-slide" data-index="{{ forloop.index | minus: 1 }}">
<div class="sp-slideshow-content">
{% if block.type == 'video' %}
{{
block.settings.video
| video_tag:
image_size: '1100x',
playsinline: block.settings.video_inline,
autoplay: block.settings.video_autoplay,
loop: block.settings.video_loop,
controls: block.settings.video_controls,
muted: block.settings.video_muted
}}
{% endif %}
{% if block.type == 'image' %}
{% if block.settings.image %}
<img loading="lazy"
src="{{ block.settings.image | image_url: width: 600 }}"
srcset="{{ block.settings.image| image_url: width: 600 }} 600w,
{{ block.settings.image | image_url: width: 800 }} 800w,
{{ block.settings.image | image_url: width: 1000 }} 1000w,
{{ block.settings.image | image_url: width: 1100 }} 1100w">
{% endif %}
{% endif %}
</div>
<div class="sp-slideshow-slide-text">
<p>
{{ block.settings.slide_text }}
<a href="{{block.settings.cta_link}}">{{ block.settings.cta_text }}</a>
</p>
</div>
</div>
{% endfor %}
</div>
<!-- /.sp-slideshow-carousel -->
<div id="sp-slideshow-snap-links-{{ section.id }}" class="sp-slideshow-snap-links">
{% for block in section.blocks %}
<a data-index="{{ forloop.index | minus: 1 }}"><span></span></a>
{% endfor %}
</div>
</div>
<!-- /.sp-slideshow-col -->
</div>
<!-- /.sp-slideshow-container -->
</div>
<!-- /.sp-slideshow -->
</div>
<!-- /.sp-slideshow-wrap -->
<script>
// create new Sections Pro slideshow
class SpSlideShow_{{ short_id }} {
constructor(section, carousel, enable_autoplay, autoplay_time, slides, links) {
console.log(`[spslideshow] setup`);
this.section = section;
this.carousel = carousel;
this.slides = slides;
this.links = links;
this.index = 0;
this.interval = null;
this.observer = null;
this.direction = 'up';
this.autoplay_time = autoplay_time;
this.autoplay_is_setup = false;
// enable autoplay
if(enable_autoplay) {
console.log(`[spslideshow] enable auotplay`);
this.setupAutoplayObserver();
this.setupClearEvents();
}
// setup links and observer
this.setupLinks();
this.setupObserver();
}
// don't start autoplay until the slideshow is visible
setupAutoplayObserver() {
var context = this;
// use intersection observer to render dots
this.observer = new IntersectionObserver(function(entries, observer) {
// Loop over the entries
entries.forEach(entry => {
// If the element is visible
if (entry.isIntersecting) {
if(context.autoplay_is_setup == false) {
context.setupAutoplay();
context.autoplay_is_setup = true;
}
}
});
}, {
threshold: 0.5
});
for (var i = 0; i < this.slides.length; i++) {
this.observer.observe(this.carousel);
}
}
// setup autoplay
setupAutoplay() {
var autoplay_time = this.autoplay_time;
console.log(`[spslideshow] setup autoplay time = ${autoplay_time}`);
var context = this;
context.section.setAttribute('autoplaying', '');
this.interval = setInterval(function() {
// handle next
if(context.direction == 'up') context.index++;
else context.index--;
// rewind
if(context.index == context.slides.length) {
context.direction = 'down';
context.index--;
}
else if(context.index < 0) {
context.direction = 'up';
context.index++;
}
// get slide
var slide = context.slides[context.index];
if(slide) {
context.carousel.scroll({
behavior: 'smooth',
left: slide.offsetLeft
});
}
else {
clearInterval(context.interval);
}
}, autoplay_time);
}
// setup events
setupClearEvents() {
var context = this;
this.carousel.addEventListener('mousedown', (e) => {
context.clearInterval();
});
this.carousel.addEventListener('touchstart', (e) => {
context.clearInterval();
});
}
// cancel the interval timer
clearInterval() {
if(this.interval) clearInterval(this.interval);
this.section.removeAttribute('autoplaying');
}
// setup navigation links
setupLinks() {
var context = this;
for(var x=0; x<this.links.length; x++) {
// handle click of links
this.links[x].addEventListener('click', (e) => {
// clear interval
context.clearInterval();
var index = parseInt(e.target.getAttribute(`data-index`));
var slide = null;
for(x=0; x<context.slides.length; x++) {
var i = parseInt(context.slides[x].getAttribute('data-index')) || 0;
if(i==index) slide = context.slides[x];
}
if(slide) {
context.carousel.scroll({
behavior: 'smooth',
left: slide.offsetLeft
});
}
e.preventDefault();
});
}
}
// set active link
setActiveLink(index) {
for(var y=0; y<this.links.length; y++) this.links[y].removeAttribute('active');
// set all active
for(var y=0; y<this.links.length; y++) {
if(this.links[y].hasAttribute('data-index')) {
var i = parseInt(this.links[y].getAttribute('data-index'));
if(i == index) this.links[y].setAttribute('active', '');
}
}
}
// setup observer
setupObserver() {
var context = this;
// use intersection observer to render dots
this.observer = new IntersectionObserver(function(entries, observer) {
// Loop over the entries
entries.forEach(entry => {
// If the element is visible
if (entry.isIntersecting) {
var index = parseInt(entry.target.getAttribute('data-index')) || 0;
context.setActiveLink(index);
}
});
}, {
root: context.carousel, threshold: 0.5
});
for (var i = 0; i < this.slides.length; i++) {
this.observer.observe(this.slides[i]);
}
}
}
// end SpSlideShow class
var section_{{ short_id }} = document.querySelector('#sp-slideshow-{{ section.id }}');
var carousel_{{ short_id }} = document.querySelector(`#sp-slideshow-carousel-{{ section.id }}`);
var slides_{{ short_id }} = section_{{ short_id }}.querySelectorAll('.sp-slideshow-slide');
var links_{{ short_id }} = section_{{ short_id }}.querySelectorAll('.sp-slideshow-snap-links a');
new SpSlideShow_{{ short_id }}(section_{{ short_id }}, carousel_{{ short_id }}, {{ section.settings.enable_autoplay }}, {{ section.settings.autoplay_time }}, slides_{{ short_id }}, links_{{ short_id }});
</script>
{% schema %}
{
"name": "
SP - Slideshow",
"settings": [
{
"type": "header",
"content": "Text",
"info": "Set the text size for your widget"
},
{
"type": "font_picker",
"id": "text_font",
"label": "Text Font",
"default": "helvetica_n4"
},
{
"type": "range",
"id": "text_size",
"min": 10,
"max": 50,
"step": 1,
"unit": "px",
"label": "Text Size",
"default": 15
},
{
"type": "header",
"content": "Colors",
"info": "Set colors for the section."
},
{
"type": "color",
"id": "text_color",
"default": "#111",
"label": "Text Color"
},
{
"type": "color_background",
"id": "background_color",
"default": "transparent",
"label": "Background Color"
},
{
"type": "color_background",
"id": "caption_background_color",
"default": "linear-gradient(177deg, rgba(255, 255, 255, .5) 3%, rgba(255, 255, 255, .85) 100%)",
"label": "Caption Background Color"
},
{
"type": "color_background",
"id": "progress_background_color",
"default": "linear-gradient(177deg, rgba(17, 17, 17, .25) 3%, rgba(17, 17, 17, 0.25) 100%)",
"label": "Progress Background Color"
},
{
"type": "color_background",
"id": "progress_foreground_color",
"default": "linear-gradient(177deg, rgba(17, 17, 17, 1) 3%, rgba(17, 17, 17, 1) 100%)",
"label": "Progress Foreground Color"
},
{
"type": "color",
"id": "indicator_color",
"default": "#111",
"label": "Indicator Color"
},
{
"type": "header",
"content": "Dimensions",
"info": "Set the section dimensions in pixels."
},
{
"type": "number",
"id": "max_width",
"default": 1000,
"label": "Max Width of Section"
},
{
"type": "number",
"id": "padding_top",
"default": 25,
"label": "Padding Top"
},
{
"type": "number",
"id": "padding_bottom",
"default": 25,
"label": "Padding Bottom"
},
{
"type": "number",
"id": "padding_left",
"default": 10,
"label": "Padding Left"
},
{
"type": "number",
"id": "padding_right",
"default": 10,
"label": "Padding Right"
},
{
"type": "header",
"content": "Slideshow",
"info": "Set settings for your slideshow"
},
{
"type": "range",
"id": "media_radius",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Round Borders on Media",
"default": 5
},
{
"type": "checkbox",
"id": "media_shadow",
"default": true,
"label": "Subtle Shadow on Media"
},
{
"type": "select",
"id": "media_aspect_ratio",
"default": "4 / 3",
"label": "Media Aspect Ratio",
"options": [
{
"value": "21 / 9",
"label": "21:9"
},
{
"value": "16 / 9",
"label": "16:9"
},
{
"value": "4 / 3",
"label": "4:3"
},
{
"value": "1 / 1",
"label": "1:1"
}
],
"default": "4 / 3"
},
{
"type": "checkbox",
"id": "enable_autoplay",
"default": true,
"label": "Enable Autoplay?"
},
{
"type": "select",
"id": "autoplay_time",
"label": "Autoplay Time",
"options": [
{
"value": "10000",
"label": "Slowest (10s)"
},
{
"value": "7500",
"label": "Slower (7.5s)"
},
{
"value": "5000",
"label": "Normal (5s)"
},
{
"value": "3000",
"label": "Faster (3s)"
},
{
"value": "2000",
"label": "Fastest (2s)"
}
],
"default": "5000"
}
],
"blocks": [
{
"name": "Image",
"type": "image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "inline_richtext",
"id": "slide_text",
"label": "Caption",
"default": "Use this field to caption your slide"
},
{
"type": "text",
"id": "cta_text",
"label": "Call to Action Text",
"default": "Lets go"
},
{
"type": "url",
"id": "cta_link",
"label": "Call to Action Link"
}
]
},
{
"name": "Video",
"type": "video",
"settings": [
{
"type": "video",
"id": "video",
"label": "Video"
},
{
"type": "inline_richtext",
"id": "slide_text",
"label": "Caption",
"default": "Use this field to caption your slide"
},
{
"type": "text",
"id": "cta_text",
"label": "Call to Action Text",
"default": "Lets go →"
},
{
"type": "url",
"id": "cta_link",
"label": "Call to Action Link"
},
{
"type": "checkbox",
"id": "video_inline",
"label": "Play Inline",
"default": true
},
{
"type": "checkbox",
"id": "video_autoplay",
"label": "Autoplay",
"default": true
},
{
"type": "checkbox",
"id": "video_loop",
"label": "Loop Video",
"default": true
},
{
"type": "checkbox",
"id": "video_controls",
"label": "Show Video Controls",
"default": false
},
{
"type": "checkbox",
"id": "video_muted",
"label": "Mute Video",
"default": true
}
]
}
],
"presets": [
{
"name": "
SP - Slideshow",
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
Hi @MidwestPatriot , There is an issue in the CSS property in the style of your SVG. To fix the issue Follow the below steps and it will display your cart icon.
1. Add the below images to your asset folder in the code editor.
2. Replace the below code in your "icon-cart-empty.liquid" and "icon-cart.liquid"
icon-cart-empty.liquid
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="6717px" height="5145px" class="icon icon-cart-empty" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<image href="{{ 'icon-cart-empty.png' | asset_url }}" width="40" height="40" image-rendering="optimizeQuality"/>
</svg>
icon-cart.liquid
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="6255px" height="6403px" class="icon icon-cart" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<image href="{{ 'icon-cart.png' | asset_url }}" width="40" height="40" image-rendering="optimizeQuality"/>
</svg>
Community Blog Articles
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024