How can I make a section button into a Buy button? HELP

SarahHall
Tourist
5 0 1

Hi everyone,

I'm building my first store and I'm not sure how I can make a section button into a Buy button in my product page.

So, I create and customize a particular section, let's say an "Image with text" section. Said section comes with a "Button" that allows me to customize the "Button label" and "Button link". So how can I make this button actionable?

Meaning, how can I make it so that when a customer clicks said section button it either sends the customer to the top of the product page (where the "color" and "quantity" selections boxes are), or pops up a banner asking for color and quantity to add to cart?

See attachment for context.

Screenshot 2021-10-24 165849.png

I want it to look something like this (where every button in each section allows the customer to quickly add to cart): 

Any help is appreciated as I'm not knowledgeable with code.

Replies 3 (3)
dmwwebartisan
Shopify Partner
9826 2238 3078

@SarahHall 

Please put product page url in "button link input box " 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
SarahHall
Tourist
5 0 1

Thank you for your reply.

However, is this the only solution? I've done that as a temporary solution but that doesn't really work as intended as it only refreshes the page and does not add nothing to the cart.

Is there any way of making these section buttons work as buy buttons?

SarahHall
Tourist
5 0 1

@dmwwebartisan alternatively, is there any way I could replace the button imbedded in the section "image with text" with a shopify's "Buy Button"?

Here's the code for my "Buy Button":

<center>
<div id='product-component-1635093454264'></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: 'bubble-gun-shop-com.myshopify.com',
storefrontAccessToken: '756b30855a8b1ff7ba46a81d77e3cf78',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '6808178262050',
node: document.getElementById('product-component-1635093454264'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
},
"border-radius": "0px"
},
"quantityInput": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
}
},
"buttonDestination": "checkout",
"contents": {
"img": false,
"button": false,
"buttonWithQuantity": true,
"title": false,
"price": false
},
"text": {
"button": "Buy it now"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
},
"border-radius": "0px"
},
"quantityInput": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
}
},
"text": {
"button": "Add to cart"
}
},
"option": {
"styles": {
"label": {
"font-family": "Arial, sans-serif"
},
"select": {
"font-family": "Arial, sans-serif"
}
},
"googleFonts": [
"PT Sans"
]
},
"cart": {
"styles": {
"button": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
},
"border-radius": "0px"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#000000",
":hover": {
"background-color": "#000000"
},
":focus": {
"background-color": "#000000"
}
},
"count": {
"font-size": "14px"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
</center>