Shopify themes, liquid, logos, and UX
Im redoing a store in shopify. The old one which isnt 2.0 has the following code inside the product.liquid file. On the product page it puts two buttons, Credit Card and WIre Transfer. THen if you press the wire transfer button it puts a button below with a button for wire transfer guide that links to a page. When you clikc credit card again it removes the wire transfer button. Wondering where to put this in the new store.
the new store is shopify 2.0 using the shella theme.
The old site has this following information in its theme.liquid
the contents of a wiretransfer.js file
and there is a file called custom.min
both are attached
how can i move this into my new product page which is shopify 2.0? I use a variation of the shella theme
here is a link to what shows for buttons on the old site
the product page from the new site is here
different products but same idea you can see the buttons are missing.
the old site product.liquid has this in it
function card() {
document.querySelector('.product-page-info__button-add-to-cart').classList.remove('hidden');
document.querySelector('.product-page-info__dynamic-checkout').classList.remove('hidden');
document.querySelector('#WireTransferGuideButton').classList.remove('hidden');
document.querySelector('#wire-transfer-guide').classList.add('hidden');
document.querySelector('.product-page-info__quantity').classList.remove('hidden');
document.querySelector('.price').textContent=oldPrice;
}
function wireTransfer() {
document.querySelector('.product-page-info__button-add-to-cart').classList.add('hidden');
document.querySelector('.product-page-info__dynamic-checkout').classList.add('hidden');
document.querySelector('#WireTransferGuideButton').classList.add('hidden');
document.querySelector('#wire-transfer-guide').classList.remove('hidden');
document.querySelector('.product-page-info__quantity').classList.add('hidden');
document.querySelector('.price').textContent= newPrice;
}
</script>
so again im trying to see how to move these fields and scripts to the new page. thank you!
the java file...contents above
the custom.min file has this in it
/*CSS BY OMRUS*/
.brand-box {margin:50px 0px!important;}
.about-box {margin:50px 0px!important;}
.template-collection p.affirm-as-low-as{margin-bottom:0px;}
#shipping h3{margin-bottom:10px;}
a#wire-transfer-guide, .cc-wt{margin-bottom:15px;}
.hidden{display:none;}
.disclaimer-text{text-align:center;font-size:10px;}
.product-search__price{display:none;}
#shopify-section-1587592699924 .product-collection__title h4{ text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 2.6em;}
/*Media Queries*/
@media only screen and ( max-width:550px ){
#shopify-section-1587668501255 .promobox, #shopify-section-1618253028b71ed439 .promobox {margin-bottom:50px;}
#shopify-section-1587673676527 .promobox__text-3{padding: 0px 20%;}
#shopify-section-1587673676527 {margin-top:50px;}
#WireTransferGuideButton p{text-align:center;}
#card{margin-bottom: 10px;}
.menu__level-02 .menu__item--has-children>a, .menu__level-02 .menu__item a{text-transform:capitalize!important;}
}
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024