Essentially I have embedded buy buttons on a store page. Typically when products have variants the titles of these variants are just clothing size (S, M, L, XL, 2XL, etc) so the names of the variants are very short. I now have a product that has LONG variant names, and these longer names are stretching the width of the variant drop down. I instead need the width of the drop down with the LONG NAME variants, to be the exact same width as the drop down with the SHORT NAME variants. I can’t figure this out… it seems as if no matter what new width styles I add to the embedded code, the long names are forcing the dropdown to still stay long… Maybe I’m just not adding the new width styles to the correct area within the embedded code?
Here is a JS fiddle showing what’s happening – https://jsfiddle.net/t7bdv601/4/
And here is all of the code –
<body>
<div id="horizontalstorecontainer">
<div class="store-scrolling-wrapper">
<div class="clothingcard2">
<div class="productwrapperclothing">
<div class="animationwrapperclothing">
<a href="/test">
<img src="https://www.missingnewyork.com/images/glow-joker-hoodie-by-missing-store.jpg" alt="." class="clothing" />
</a>
</div>
<div class="itemandpricewrapperclothing">
<a href="/test">
<h1>LONG NAME VARIANTS</h1>
</a>
<h2>$ 20.00</h2>
</div>
</div>
<div id="bf3">
<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: 'missingnewyork.myshopify.com',
storefrontAccessToken: '8ad1e9d2d113621e1e9785f5a84b7330',
});
ShopifyBuy.UI.onReady(client).then(function(ui) {
ui.createComponent('product', {
id: '7011046490178',
node: document.getElementById('bf3'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "20px",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"padding-left": "0px",
"padding-right": "0px",
"width": "60%",
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
}
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"outOfStock": "SOLD OUT"
},
},
"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": "20px",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
}
},
"text": {
"button": "ADD TO CART"
}
},
"cart": {
"styles": {
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
"title": {
"color": "#ffffff"
},
"header": {
"color": "#ffffff"
},
"lineItems": {
"color": "#ffffff"
},
"subtotalText": {
"color": "#ffffff"
},
"subtotal": {
"color": "#ffffff"
},
"notice": {
"color": "#ffffff"
},
"currency": {
"color": "#ffffff"
},
"close": {
"color": "#ffffff",
":hover": {
"color": "#ffffff"
}
},
"empty": {
"color": "#ffffff"
},
"noteDescription": {
"color": "#ffffff"
},
"discountText": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"discountAmount": {
"color": "#ffffff"
},
"cart": {
"background-color": "#000000"
},
"footer": {
"background-color": "#000000"
}
},
"text": {
"title": "CART",
"empty": "YOUR CART IS EMPTY.",
"notice": "Shipping and taxes are added at checkout.",
}
},
"toggle": {
"styles": {
"toggle": {
"font-weight": "bold",
"background-color": "#ffffff",
":hover": {
"background-color": "#e6e6e6"
},
":focus": {
"background-color": "#e6e6e6"
}
},
"count": {
"color": "#000000",
":hover": {
"color": "#000000"
}
},
"iconPath": {
"fill": "#000000"
}
}
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#ffffff"
},
"title": {
"color": "#ffffff"
},
"price": {
"color": "#ffffff"
},
"fullPrice": {
"color": "#ffffff"
},
"discount": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"quantity": {
"color": "#ffffff"
},
"quantityIncrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityDecrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityInput": {
"color": "#ffffff",
"border-color": "#ffffff"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
</div>
</div>
<div class="clothingcard2">
<div class="productwrapperclothing">
<div class="animationwrapperclothing">
<a href="/test">
<img src="https://www.missingnewyork.com/images/glow-joker-hoodie-by-missing-store.jpg" alt="." class="clothing" />
</a>
</div>
<div class="itemandpricewrapperclothing">
<a href="/test">
<h1>SHORT NAME VARIANTS</h1>
</a>
<h2>$ 20.00</h2>
</div>
</div>
<div id="gjh">
<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: 'missingnewyork.myshopify.com',
storefrontAccessToken: '8ad1e9d2d113621e1e9785f5a84b7330',
});
ShopifyBuy.UI.onReady(client).then(function(ui) {
ui.createComponent('product', {
id: '6969282134082',
node: document.getElementById('gjh'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"option": {
"styles": {
"wrapper": {
"border": "0px",
"border-radius": "5px",
"position": "absolute",
"height": "42px",
"bottom": "0px",
"width": "100px",
"padding": "3px"
}
}
},
"product": {
"styles": {
"buttonWrapper": {
"margin-left": "40%"
},
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "0px"
}
},
"button": {
"padding-left": "0px",
"padding-right": "0px",
"width": "100%",
"right": "0",
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
},
"option": {
"display": "inline-block",
"width": "20px",
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"outOfStock": "SOLD OUT"
},
},
"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-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
}
},
"text": {
"button": "ADD TO CART"
}
},
"cart": {
"styles": {
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
"title": {
"color": "#ffffff"
},
"header": {
"color": "#ffffff"
},
"lineItems": {
"color": "#ffffff"
},
"subtotalText": {
"color": "#ffffff"
},
"subtotal": {
"color": "#ffffff"
},
"notice": {
"color": "#ffffff"
},
"currency": {
"color": "#ffffff"
},
"close": {
"color": "#ffffff",
":hover": {
"color": "#ffffff"
}
},
"empty": {
"color": "#ffffff"
},
"noteDescription": {
"color": "#ffffff"
},
"discountText": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"discountAmount": {
"color": "#ffffff"
},
"cart": {
"background-color": "#000000"
},
"footer": {
"background-color": "#000000"
}
},
"text": {
"title": "CART",
"empty": "YOUR CART IS EMPTY.",
"notice": "Shipping and taxes are added at checkout.",
}
},
"toggle": {
"styles": {
"toggle": {
"font-weight": "bold",
"background-color": "#ffffff",
":hover": {
"background-color": "#e6e6e6"
},
":focus": {
"background-color": "#e6e6e6"
}
},
"count": {
"color": "#000000",
":hover": {
"color": "#000000"
}
},
"iconPath": {
"fill": "#000000"
}
}
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#ffffff"
},
"title": {
"color": "#ffffff"
},
"price": {
"color": "#ffffff"
},
"fullPrice": {
"color": "#ffffff"
},
"discount": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"quantity": {
"color": "#ffffff"
},
"quantityIncrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityDecrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityInput": {
"color": "#ffffff",
"border-color": "#ffffff"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
</div>
</div>
</div>
</div>
</body>
And the CSS –
body {
background: black !important;
}
::-webkit-scrollbar {
height: .88vh;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: white;
}
::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
#horizontalstorecontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.store-scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
margin: 0 auto;
height: 100%;
width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.clothingcard2 {
display: inline-block;
position: relative;
height: 60%;
width: 35%;
top: 50.6%;
transform: translateY(-50%);
}
.clothingcard2 img {
height: 100%;
}
.productwrapperclothing {
top: 0;
width: 100%;
display: inline-block;
height: calc(100% - 42px);
}
#bf3,
#gjh {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.animationwrapperclothing {
height: calc(100% - 66.4px);
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
-o-perspective: 2000px;
perspective: 2000px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.clothing {
margin: 0 auto;
position: relative;
height: 100%;
width: auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
bottom: 0;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 1px solid transparent;
}
.animationwrapperclothing>a {
height: 100%;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.itemandpricewrapperclothing {
position: fixed;
width: 100%;
bottom: 42px;
margin: 0 auto;
right: 0;
left: 0;
}
.itemandpricewrapperclothing>a {
display: inline-block;
list-style: none;
text-decoration: none;
}
h1 {
font-family: neue-haas-grotesk-text, sans-serif;
color: white;
font-weight: 500;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 13px;
}
h2 {
font-family: neue-haas-grotesk-text, sans-serif;
color: #7e7e7e;
font-weight: 500;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 12px;
margin-top: -4px;
}
@media screen and (orientation: portrait) {
.clothingcard2 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-right: 0;
}
.clothingcard2 img {
max-width: 95%;
max-height: 100%;
height: auto;
width: auto;
}
.productwrapperclothing {
padding: 0;
}
}
Please note that I have changed the ‘max-width’ inside of the embedded code for the LONG NAME VARIANT product to something extremely small (just 20px) instead of what the SHORT NAME VARIANT width is set at (which is ‘calc(25% – 20px)’)…yet it is still not changing the width of the LONG NAME VARIANT dropdown at all… I don’t want it to be 20px anyway, I need it to be the exact same width as the SHORT NAME variant product, but I have just changed it to 20px to test trying to find where I can actually alter the width of the dropdown but I can’t seem to get it to be shorter at all…
And to clarify, I understand that the text would be getting cut off when the width of the LONG NAME VARIANT drop down is as short as the SHORT NAME VARIANT drop down… this is okay. I still need the LONG NAME VARIANT dropdown to be the same width as the SHORT NAME VARIANT dropdown but only before it is clicked on … and then after the dropdown is clicked on I need it to resize so that the text is NOT cut off.
EDIT – I really need these changes to be implemented directly in the embedded buy button, not in the CSS… Unless there is a way where the styles can be changed in the CSS without affecting all the other buy buttons on the webstore too. These new styles should only affect the product that has the LONG variant names. The styling for all of the other buy buttons on the page need to stay exactly the same as the SHORT variant name product on the JSFiddle (in the JSFiddle I only have 1 other product shown for simplicity, but on the actual store page there are 20+ other products).
2
Answers
I feel genuinely stupid. This was all I needed to add to the iframe to accomplish exactly what I needed -
I had thought the code for both the LONG name variant product and the SHORT name variant product were exactly the same, but they were not at all. I had accidentally copied over the wrong code for the LONG name variant product. This is why it wasn't acting correctly. Typing in shame right now.
I accomplished this in developer tools using Flexbox and tweaking a few styles. However, I don’t know how to implement the changes into your Shopify JavaScript. Here are the CSS rules that need to be modified: