Hi everyone,
I just joined Shopify a few days ago with my yoga studio to get our merch and vintage clothing collection up online since we're closed and typically only do in-studio sales.
We are currently using MindBodyOnline for our scheduling and retail sales pos. Knowing this, I built a shop page on our website where the "buy" buttons would link out to our MindBody retail store -- I found out (after designing my page) that the product links are only available with a plan upgrade costing $120 USD more... so, needless to say, we decided to go with a better (and cheaper) option -- Shopify.
I've used the buy button code to embed the shop on our website and have implemented a few minor tweaks (encased in a div box, border-radius for images, transparency in cart widget, and maybe a couple of other things)
Original design (what I want it to look like, more or less): www.bodylanguageck.com/shop
Shopify Buy Button Design (what I'm working with): www.bodylanguageck.com/shopify
Here is what I need help with:
- Instead of one large box around all of the items, could I get each individual item into its own box? with 10px padding or so?
- If the above is not doable, is it possible to scale down the size of my products so that the box is 100% without the products pushing right to the edge (it's currently 103% to allow for padding, but is not centered) -- in other words, can I scale down the size of the shop or the individual elements? I have managed previously to scale the photos but not the drop-down menus, etc
- On mobile screens, I've made the the original design (/shop) show two items side by side. Is this possible for shopify buy button as well, or does it have to be a single column stack?
- I guess what I am really looking for is a look that is more similar to my original design, but makes use of the shopify platform, cart, etc.
Buy Button + some tweaks
<center><br><br><div class="boxBorder2">
<div id='collection-component-1588015476193'></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: 'body-language-studio.myshopify.com',
storefrontAccessToken: 'df03a57cc4c2bc0c9329374bd7a94f10',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: '184213307523',
node: document.getElementById('collection-component-1588015476193'),
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",
"width": "calc(25% - 20px)"
}
},
"title": {
"color": "#0fa3b3"
},
"button": {
":hover": {
"background-color": "#654264"
},
"background-color": "#70496f",
":focus": {
"background-color": "#654264"
},
"border-radius": "25px",
"padding-left": "12px",
"padding-right": "12px"
},
"price": {
"color": "#f7f7f7"
},
"img": {
"border-radius": "5px",
"margin-top": "10px"
},
"compareAt": {
"color": "#f7f7f7"
},
"unitPrice": {
"color": "#f7f7f7"
}
},
"text": {
"button": "+ add"
}
},
"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": {
":hover": {
"background-color": "#654264"
},
"background-color": "#70496f",
":focus": {
"background-color": "#654264"
},
"border-radius": "25px",
"padding-left": "12px",
"padding-right": "12px"
}
},
"text": {
"button": "+ add"
}
},
"option": {
"styles": {
"label": {
"font-family": "Arial, sans-serif",
"color": "#f7f7f7"
},
"select": {
"font-family": "Arial, sans-serif"
}
}
},
"cart": {
"styles": {
"button": {
":hover": {
"background-color": "#654264"
},
"background-color": "#70496f",
":focus": {
"background-color": "#654264"
},
"border-radius": "25px",
},
"title": {
"color": "#979797"
},
"header": {
"color": "#979797"
},
"lineItems": {
"color": "#979797"
},
"subtotalText": {
"color": "#979797"
},
"subtotal": {
"color": "#979797"
},
"notice": {
"color": "#979797"
},
"currency": {
"color": "#979797"
},
"close": {
"color": "#979797",
":hover": {
"color": "#979797"
}
},
"empty": {
"color": "#979797"
},
"noteDescription": {
"color": "#979797"
},
"discountText": {
"color": "#979797"
},
"discountIcon": {
"fill": "#979797"
},
"discountAmount": {
"color": "#979797"
},
"cart": {
"background-color": "rgba(36, 36, 36, 0.8)"
},
"footer": {
"background-color": "rgba(36, 36, 36, 0.8)"
}
},
"text": {
"total": "Subtotal",
"notice": "Shipping is added at checkout. Vintage wears may be imperfect.",
"button": "Checkout"
},
"contents": {
"note": true
}
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#70496f",
":hover": {
"background-color": "#654264"
},
":focus": {
"background-color": "#654264"
}
}
}
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#979797"
},
"title": {
"color": "#979797"
},
"price": {
"color": "#979797"
},
"fullPrice": {
"color": "#979797"
},
"discount": {
"color": "#979797"
},
"discountIcon": {
"fill": "#979797"
},
"quantity": {
"color": "#979797"
},
"quantityIncrement": {
"color": "#979797",
"border-color": "#979797"
},
"quantityDecrement": {
"color": "#979797",
"border-color": "#979797"
},
"quantityInput": {
"color": "#979797",
"border-color": "#979797"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
</div></center>
All custom CSS in case there is conflict (I created boxBorder2 here to try and fit the full scale shop into it, but it isn't aligning correctly and doesn't translate well on mobile)
.boxBorder {
border: 0px solid #000000;
padding: 10px;
background: #3d3c3c;
border-radius: 5px;
margin: 0px 0px 0px 0px;
width: 80%
}
.boxBorder2 {
border: 0px solid #000000;
padding: 10px, 10px, 10px, 10px;
background: #3d3c3c;
border-radius: 5px;
margin-left: 0px;
width: 103%
}
.button {
background-color: #70496F;
border: none;
border-radius: 25px;
color: white;
padding: 6px 18px;
text-align: center;
font-size: 14px;
cursor: pointer;
margin-left: 25px;
}
.button:hover {
background-color: #644163;
}
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
height: auto;
border: solid 0px black;
}
.dot {
cursor: pointer;
height: 6px;
width: 16px;
margin: 0 2px;
background-color: #717171;
border-radius: 30%;
display: inline-block;
transition: background-color .4s ease
}
.active,
.dot:hover {
background-color: #999
}
Thank you!!
