Enhance Shopify Products Page
Budget: $50 – $0 USD
An order page has been created at the web site
https://alphadalllcorp.com
using Shopify Buy Buttons and the page works well,
code attached.
To see the existing correctly working order.htm
navigate to the URL listed above and click
'Order' in the banner at the top of the page
Today another two products, called Exquiste 18 and
3 Tier, need to be added to the order.htm page.
But when a second row was added to the table on
the Order page two issues developed:
1. The background of the table cell, which on
the three cells that are correct has color
#A17A5C, is transparent. Since the
body of the order.htm page is dark brown
the text, which is black, can barely be seen.
2. The image of the 3 Tier chandelier is
overlapping the cell which contains
Chandelier Chic 24.
The two issues can be seen in attached filefor
marked order_260128.htm and at the
website by typing in
https://alphadalllcorp.com/or
The code for the Shopify Buy Buttons,
3 Tier Chandelier and Exquisite 18 are
copied herewith below.
The table which contains the Shopify Buy Buttons
begins at line 117. The table now has one
row and three cells. The goal is to
add a second row with two more
Shopify Buy Buttons for 3 Tier Chandelier and
Exquisite 18. The third cell in the second
row will be empty except for a spacer.gif
image.
Solving these two issues is the project
and adding the fifth Shopify Buy Button
is the project.
****** Shopify Buy Button for 3 Tier Chandelier ******
<div id='product-component-1769625573325'></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: 'bvicif-yw.myshopify.com',
storefrontAccessToken: 'c3500eb90670d8097a39ae1075fda59f',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '9067058954490',
node: document.getElementById('product-component-1769625573325'),
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"
}
}
},
"text": {
"button": "Add to cart"
}
},
"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"
}
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {}
},
});
});
}
})();
/*]]>*/
</script>
****** End of Shopify Buy Button for 3 Tier Chandelier ******
****** Shopify Buy Button for Exquisite 18 ******
<div id='product-component-1769625670134'></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: 'bvicif-yw.myshopify.com',
storefrontAccessToken: 'c3500eb90670d8097a39ae1075fda59f',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '9067052171514',
node: document.getElementById('product-component-1769625670134'),
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"
}
}
},
"text": {
"button": "Add to cart"
}
},
"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"
}
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {}
},
});
});
}
})();
/*]]>*/
</script>
****** End of Shopify Buy Button for Exquisite 18 ******
https://alphadalllcorp.com
using Shopify Buy Buttons and the page works well,
code attached.
To see the existing correctly working order.htm
navigate to the URL listed above and click
'Order' in the banner at the top of the page
Today another two products, called Exquiste 18 and
3 Tier, need to be added to the order.htm page.
But when a second row was added to the table on
the Order page two issues developed:
1. The background of the table cell, which on
the three cells that are correct has color
#A17A5C, is transparent. Since the
body of the order.htm page is dark brown
the text, which is black, can barely be seen.
2. The image of the 3 Tier chandelier is
overlapping the cell which contains
Chandelier Chic 24.
The two issues can be seen in attached filefor
marked order_260128.htm and at the
website by typing in
https://alphadalllcorp.com/or
The code for the Shopify Buy Buttons,
3 Tier Chandelier and Exquisite 18 are
copied herewith below.
The table which contains the Shopify Buy Buttons
begins at line 117. The table now has one
row and three cells. The goal is to
add a second row with two more
Shopify Buy Buttons for 3 Tier Chandelier and
Exquisite 18. The third cell in the second
row will be empty except for a spacer.gif
image.
Solving these two issues is the project
and adding the fifth Shopify Buy Button
is the project.
****** Shopify Buy Button for 3 Tier Chandelier ******
<div id='product-component-1769625573325'></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: 'bvicif-yw.myshopify.com',
storefrontAccessToken: 'c3500eb90670d8097a39ae1075fda59f',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '9067058954490',
node: document.getElementById('product-component-1769625573325'),
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"
}
}
},
"text": {
"button": "Add to cart"
}
},
"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"
}
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {}
},
});
});
}
})();
/*]]>*/
</script>
****** End of Shopify Buy Button for 3 Tier Chandelier ******
****** Shopify Buy Button for Exquisite 18 ******
<div id='product-component-1769625670134'></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: 'bvicif-yw.myshopify.com',
storefrontAccessToken: 'c3500eb90670d8097a39ae1075fda59f',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '9067052171514',
node: document.getElementById('product-component-1769625670134'),
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"
}
}
},
"text": {
"button": "Add to cart"
}
},
"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"
}
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {}
},
});
});
}
})();
/*]]>*/
</script>
****** End of Shopify Buy Button for Exquisite 18 ******