Buy Button add the word 'from' to price

Solved
bennyp1
Tourist
6 0 2

Hi there,

I am using the Shopify Buy Button, and I would like to be able to simply add the word 'from' to the prices displayed on the collection page.

At present it only shows one price.

Any help would be much appreciated.

0 Likes

Hi @bennyp1, could you attach link to your website, and let me know please which theme are you using? 

 
0 Likes
bennyp1
Tourist
6 0 2

Hi Stan

It's https://www.benpeersphoto.com/shop

I'm just using the Buy Button sales channel so there's no theme as far as I'm aware.

Thanks

0 Likes

Got it, could you send code of integrated button which you added to your Squarespace store?

it's added as Iframe, so i'm not sure that it's possible there, but i hope that it is : )

 

0 Likes
StephenK
Shopify Partner
54 3 24

You can probably use the advanced styling templates:-

http://shopify.github.io/buy-button-js/advanced/#custom-styling

The example on that link shows how to add "New Low Price" before the price, you can swap that for "From"

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
bennyp1
Tourist
6 0 2

Here is the code:

<div id='collection-component-1599826506890'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src=scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'ben-peers-photo.myshopify.com',
storefrontAccessToken: '51ac039b2caffccccdf7100ff36d9822',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: '224941899927',
node: document.getElementById('collection-component-1599826506890'),
moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(33.33333% - 30px)",
"margin-left": "30px",
"margin-bottom": "50px",
"width": "calc(33.33333% - 30px)"
},
"img": {
"height": "calc(100% - 15px)",
"position": "absolute",
"left": "0",
"right": "0",
"top": "0"
},
"imgWrapper": {
"padding-top": "calc(75% + 15px)",
"position": "relative",
"height": "0"
}
},
"button": {
"font-weight": "bold",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
}
},
"buttonDestination": "modal",
"contents": {
"options": false
},
"text": {
"button": "Size options"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-30px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-weight": "bold",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
}
},
"text": {
"button": "Add to cart"
}
},
"cart": {
"styles": {
"button": {
"font-weight": "bold",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {
"styles": {
"toggle": {
"font-weight": "bold",
"background-color": "#000000",
":hover": {
"background-color": "#000000"
},
":focus": {
"background-color": "#000000"
}
}
}
}
},
});
});
}
})();
/*]]>*/
</script>

0 Likes
StephenK
Shopify Partner
54 3 24

This is an accepted solution.

<div id='collection-component-1599826506890'></div>
<script type="text/javascript">
/*<![CDATA[*/
    (function() {
        var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
        if (window.ShopifyBuy) {
            if (window.ShopifyBuy.UI) {
                ShopifyBuyInit();
            } else {
                loadScript();
            }
        } else {
            loadScript();
        }

        function loadScript() {
            var script = document.createElement('script');
            script.async = true;
            script.src=scriptURL;
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
            script.onload = ShopifyBuyInit;
        }

        function ShopifyBuyInit() {
            var client = ShopifyBuy.buildClient({
                domain: 'ben-peers-photo.myshopify.com',
                storefrontAccessToken: '51ac039b2caffccccdf7100ff36d9822',
            });
            ShopifyBuy.UI.onReady(client).then(function(ui) {
                ui.createComponent('collection', {
                    id: '224941899927',
                    node: document.getElementById('collection-component-1599826506890'),
                    moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
                    options: {
                        "product": {
                            "templates": {
                              "price": '<p class="{{data.classes.product.price}}">From {{data.selectedVariant.price}}</p>'
                            },
                            "styles": {
                                "product": {
                                    "@media (min-width: 601px)": {
                                        "max-width": "calc(33.33333% - 30px)",
                                        "margin-left": "30px",
                                        "margin-bottom": "50px",
                                        "width": "calc(33.33333% - 30px)"
                                    },
                                    "img": {
                                        "height": "calc(100% - 15px)",
                                        "position": "absolute",
                                        "left": "0",
                                        "right": "0",
                                        "top": "0"
                                    },
                                    "imgWrapper": {
                                        "padding-top": "calc(75% + 15px)",
                                        "position": "relative",
                                        "height": "0"
                                    }
                                },
                                "button": {
                                    "font-weight": "bold",
                                    ":hover": {
                                        "background-color": "#000000"
                                    },
                                    "background-color": "#000000",
                                    ":focus": {
                                        "background-color": "#000000"
                                    }
                                }
                            },
                            "buttonDestination": "modal",
                            "contents": {
                                "options": false
                            },
                            "text": {
                                "button": "Size options"
                            }
                        },
                        "productSet": {
                            "styles": {
                                "products": {
                                    "@media (min-width: 601px)": {
                                        "margin-left": "-30px"
                                    }
                                }
                            }
                        },
                        "modalProduct": {
                            "contents": {
                                "img": false,
                                "imgWithCarousel": true
                            },
                            "styles": {
                                "product": {
                                    "@media (min-width: 601px)": {
                                        "max-width": "100%",
                                        "margin-left": "0px",
                                        "margin-bottom": "0px"
                                    }
                                },
                                "button": {
                                    "font-weight": "bold",
                                    ":hover": {
                                        "background-color": "#000000"
                                    },
                                    "background-color": "#000000",
                                    ":focus": {
                                        "background-color": "#000000"
                                    }
                                }
                            },
                            "text": {
                                "button": "Add to cart"
                            }
                        },
                        "cart": {
                            "styles": {
                                "button": {
                                    "font-weight": "bold",
                                    ":hover": {
                                        "background-color": "#000000"
                                    },
                                    "background-color": "#000000",
                                    ":focus": {
                                        "background-color": "#000000"
                                    }
                                }
                            },
                            "text": {
                                "total": "Subtotal",
                                "button": "Checkout"
                            }
                        },
                        "toggle": {
                            "styles": {
                                "toggle": {
                                    "font-weight": "bold",
                                    "background-color": "#000000",
                                    ":hover": {
                                        "background-color": "#000000"
                                    },
                                    ":focus": {
                                        "background-color": "#000000"
                                    }
                                }
                            }
                        }
                    },
                });
            });
        }
    })();
/*]]>*/
</script>

So the piece that's been added is this in the products object within the options object

"templates": {
  "price": '<p class="{{data.classes.product.price}}">From {{data.selectedVariant.price}}</p>'
},

 

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
bennyp1
Tourist
6 0 2

Fantastic, thank you so much @StephenK @Stan_Uvidest !

bennyp1
Tourist
6 0 2

One more thing, I seem to have now lost the currency symbol from the price now, @StephenK ?

0 Likes
StephenK
Shopify Partner
54 3 24

In this bit of the code, you can add a £ or $ before the {{data.selectedVariant.price}}

"templates": {
  "price": '<p class="{{data.classes.product.price}}">From £{{data.selectedVariant.price}}</p>'
},

 There might be a way to show the currency code dynamically however I can't find that.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable