I posted this question to the Shopify forums with no response, so I’m trying here.
I’m attempting to embed my Shopify products (preferably as collections) into a > custom themed WordPress. I’ve got a working version of the buy buttons and the
subsequent product embed working – but how on earth do I set about
customizing it completely?Basically, I want the product image, title, price, and “buy now”
button to redirect to the product’s WordPress Page. On that page, I
want a larger version of the product image along with the title,
description, variables (colour/quantity etc), and price calculated
through the variables.I’ve been staring at code for three days with no luck. Any help would
be enormously appreciated!
Here is the embed code generated by Shopify:
<div data-accent_color="767676" data-background_color="ffffff" data-button_background_color="7fb466" data-button_text_color="ffffff" data-cart_button_text="Cart" data-cart_title="Your cart" data-cart_total_text="Total" data-checkout_button_text="Checkout" data-discount_notice_text="Shipping and discount codes are added at checkout." data-embed_type="cart" data-empty_cart_text="Your cart is empty." data-shop="copyking-2.myshopify.com" data-sticky="true" data-text_color="000000"></div>
<div data-background_color="ffffff" data-button_background_color="7fb466" data-button_text_color="ffffff" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-buy_button_text="Buy now" data-collection_handle="frontpage" data-display_size="compact" data-embed_type="collection" data-has_image="true" data-next_page_button_text="Next page" data-product_handle="" data-product_modal="true" data-product_name="" data-product_title_color="000000" data-redirect_to="modal" data-shop="copyking-2.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"></script>');</script>
Unfortunately we don’t yet support that level of customization through the Buy Button channel. However, if you want to retrieve the product image, title and price from Shopify and link to another page on your site, you could use the JS Buy SDK. This will allow you to fetch the product information from a collection or list of products (or single product) to render into your own page.
You just have to edit the attribute
data-button_background_color, or you can use this Shopify app, it allow you customize the button color.