Hi,
Does anyone know how to fix the klayvio notify me when available link to a button? Mine is showing as a link and im unsure how to fix this into a button?
Preview link - https://1gfjzt53s8n7sjk8-47114649768.shopifypreview.com
You can add a code like this or similar to the CSS of your theme:
a.klaviyo-bis-trigger {
text-decoration: none;
color: #fff;
background-color: #ee3224;
padding: 20px;
display: block;
text-align: center;
font-size: 18px;
}
1 Like
Hi @Ksoldier ,
Please go to Actions > Edit code > Assets > custom.css file and paste this at the bottom of the file:
.klaviyo-bis-trigger {
color: #fff;
background-color: #e14335;
border: 1px solid #e14335;
padding: 0.875rem 0.3125rem;
text-decoration: none;
width: 100%;
display: block;
text-align: center;
}
Hope it helps!
1 Like
Hello @Ksoldier ,
It’s GemPages support team and glad to support you today.
I would like to give you the recommendation to support you so kindly follow the steps below:
- Go to Online Store > Theme > Edit code of your current theme
-
Open your theme.liquid theme file
-
Paste the below code before
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
1 Like
Hi @Ksoldier !
I hope you are doing good and welcome to the Shopify Community!
This is MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from India & Singapore).
Just add this css code on your bottom of the css file - .product-form–regular .klaviyo-bis-trigger {text-decoration: none; color: #fff; background-color: #ee3224; padding: 20px; display: block; text-align: center; font-size: 18px;}
Hope this helps!
1 Like
Hi,
Thank you that worked well. Do you also know how to make it show only when items are out of stock?
Currently it is showing even when the product is available for purchase. Thanks
Hi @Ksoldier ,
Please send me the link of the out-of-stock product, I will check it for you.
Hi,
Thank you for the help, i’ve linked it below
Preview link - https://fimd8xuzv5jwvzcq-47114649768.shopifypreview.com
Out of stock - 10303 Loop Coaster — Kidstuff
In stock - Bright Child Bath Crayons — Kidstuff
Hi @Ksoldier ,
Please send me the code of static-product.liquid file, I will check it.
Hi @Litos
Thanks for the help, please see below
{% schema %}
{
"name": "Product pages",
"class": "product--section",
"settings": [
{
"id": "layout",
"type": "select",
"label": "Layout",
"options": [
{
"value": "layout--two-col",
"label": "2 columns"
},
{
"value": "layout--three-col",
"label": "3 columns"
}
],
"default": "layout--three-col"
},
{
"type": "checkbox",
"id": "show_dcb",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "product_cart_redirect",
"label": "Enable cart redirection",
"info": "Automatically sends users to the Cart page after adding a product.",
"default": false
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media/product-media-types)"
},
{
"type": "select",
"id": "gallery_aspect_ratio",
"label": "Aspect ratio",
"options": [
{ "value": "natural", "label": "Natural" },
{ "value": "short", "label": "Short (4:3)" },
{ "value": "square", "label": "Square (1:1)" },
{ "value": "tall", "label": "Tall (2:3)" }
],
"default": "natural"
},
{
"type": "checkbox",
"id": "gallery_image_crop",
"label": "Enable image crop",
"info": "If disabled, white space will be applied around the image. Has no effect when media aspect ratio is set to natural.",
"default": false
},
{
"id": "gallery_thumbnail_position",
"type": "select",
"label": "Thumbnails position",
"options": [
{
"value": "below",
"label": "Below main image"
},
{
"value": "left",
"label": "Left of main image"
}
],
"default": "below"
},
{
"type": "checkbox",
"id": "gallery_video_autoplay",
"label": "Enable video autoplay",
"default": true
},
{
"type": "checkbox",
"id": "gallery_video_looping",
"label": "Enable video looping",
"default": true
},
{
"id": "gallery_hover_zoom",
"type": "select",
"label": "Roll-over image zoom",
"options": [
{
"value": "disabled",
"label": "Disabled"
},
{
"value": "separate",
"label": "Enabled (separate box)"
},
{
"value": "replace",
"label": "Enabled (replace main image)"
}
],
"info": "Only applies to desktop screen sizes.",
"default": "disabled"
},
{
"id": "gallery_click_to_zoom",
"type": "select",
"label": "Click to zoom image",
"options": [
{
"value": "disabled",
"label": "Disabled"
},
{
"value": "always",
"label": "Enabled"
},
{
"value": "desktop",
"label": "Enabled on desktop only"
},
{
"value": "mobile",
"label": "Enabled on mobile only"
}
],
"default": "always",
"info": "Changes to \"Tap to zoom\" on mobile."
},
{
"type": "paragraph",
"content": "For the best zoom results, make sure your images are larger than 1600px."
}
]
}
{% endschema %}
Hi @Ksoldier ,
Please change all code:
{% schema %}
{
"name": "Product pages",
"class": "product--section",
"settings": [
{
"id": "layout",
"type": "select",
"label": "Layout",
"options": [
{
"value": "layout--two-col",
"label": "2 columns"
},
{
"value": "layout--three-col",
"label": "3 columns"
}
],
"default": "layout--three-col"
},
{
"type": "checkbox",
"id": "show_dcb",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "product_cart_redirect",
"label": "Enable cart redirection",
"info": "Automatically sends users to the Cart page after adding a product.",
"default": false
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media/product-media-types)"
},
{
"type": "select",
"id": "gallery_aspect_ratio",
"label": "Aspect ratio",
"options": [
{ "value": "natural", "label": "Natural" },
{ "value": "short", "label": "Short (4:3)" },
{ "value": "square", "label": "Square (1:1)" },
{ "value": "tall", "label": "Tall (2:3)" }
],
"default": "natural"
},
{
"type": "checkbox",
"id": "gallery_image_crop",
"label": "Enable image crop",
"info": "If disabled, white space will be applied around the image. Has no effect when media aspect ratio is set to natural.",
"default": false
},
{
"id": "gallery_thumbnail_position",
"type": "select",
"label": "Thumbnails position",
"options": [
{
"value": "below",
"label": "Below main image"
},
{
"value": "left",
"label": "Left of main image"
}
],
"default": "below"
},
{
"type": "checkbox",
"id": "gallery_video_autoplay",
"label": "Enable video autoplay",
"default": true
},
{
"type": "checkbox",
"id": "gallery_video_looping",
"label": "Enable video looping",
"default": true
},
{
"id": "gallery_hover_zoom",
"type": "select",
"label": "Roll-over image zoom",
"options": [
{
"value": "disabled",
"label": "Disabled"
},
{
"value": "separate",
"label": "Enabled (separate box)"
},
{
"value": "replace",
"label": "Enabled (replace main image)"
}
],
"info": "Only applies to desktop screen sizes.",
"default": "disabled"
},
{
"id": "gallery_click_to_zoom",
"type": "select",
"label": "Click to zoom image",
"options": [
{
"value": "disabled",
"label": "Disabled"
},
{
"value": "always",
"label": "Enabled"
},
{
"value": "desktop",
"label": "Enabled on desktop only"
},
{
"value": "mobile",
"label": "Enabled on mobile only"
}
],
"default": "always",
"info": "Changes to \"Tap to zoom\" on mobile."
},
{
"type": "paragraph",
"content": "For the best zoom results, make sure your images are larger than 1600px."
}
]
}
{% endschema %}
Hope it helps!
1 Like
Thank you so much for the help!!
1 Like