hii im not able to see buy now button text on my website, Please check
Hi @manan123 . In your base.css file, you will find this code:
.button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: var(--buttons-radius-outset);
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
}
Replace this code with the code below:
.button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: var(--buttons-radius-outset);
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
}
Let us know if this works or not.
not working
@manan123 we can’t see your buy now button anymore.
please check now
@manan123 . We don’t think the code is updated. It is still the same.
You can update the following code in your base.css file:
.button::before, .shopify-challenge__button::before, .customer button::before, .shopify-payment-button__button--unbranded::before, .shopify-payment-button [role="button"]::before, .cart__dynamic-checkout-buttons [role="button"]::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: var(--buttons-radius-outset);
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity));
}
Just remove “.shopify-payment-button__button–unbranded::before, .shopify-payment-button [role=“button”]::before,” this from the above code.
Here is the output:
thankss so much
Hii , i added a video using custom liquid , i want to make it bigger only for mobile device .Please help me with code
My website url ; https://mansaroverfurnishings.com/
Here’s the code -
video { width: 100%; display: block; margin: 0 auto; } .desktop-video { display: none; } .mobile-video { display: block; } /* Bildschirmgrößen über 992 Pixel */ @media (min-width: 992px) { .desktop-video { display: block; } .mobile-video { display: none; } }Please help me
HI @manan123
Update your style code
i want only for mobile device it also increase size on desktop
Hii, please help me my slider arrows are not working anymore in all featured collections, please help me with code
Website link-- https://mansaroverfurnishings.com/
Below are the screenshots:
Hii, please help me my slider arrows are not working anymore in all featured collections, please help me with code
Website link-- https://mansaroverfurnishings.com/
Below are the screenshots:
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 :
CODE :
{{ 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; }{{ block.settings.slide_text }} {{ block.settings.cta_text }}
{% 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 %}
{% comment %}
© Sections Pro. You are free to use this section in your store. You may not redistribute this section in another Shopify app.
{% endcomment %}
{{ block.settings.slide_text }} {{ block.settings.cta_text }}
{% 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 %}





