Shopify themes, liquid, logos, and UX
Hello,
I currently have a code that works well for product pages without products that have variant options. However, when I add a variant picker to certain products, it interferes with my previous code.
No variant picker:
With variant picker:
To resolve this, I’ve written the following new CSS code specifically for product pages that include a variant picker, to make products pages with variant pickers look normal again:
<style>
#ProductInfo-template--22029799948614__main > ul:nth-child(12) > li:nth-child(2) > img, #ProductInfo-template--22029799948614__main > ul:nth-child(12) > li:nth-child(1) > img {
width: 15px;
height: 15px;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(10) {
background-color: #f5f5f5;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(10) > li > img {
width: 90px;
height: 38px;
margin-right: 5px;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(10) > li > span {
width: 330px;
font-size: 15px;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(10) > li {
margin-left: 0px;
border-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
padding-top: 5px;
padding-bottom: 5px;
border-color: #482e2e40;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(12) {
width: 430px;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(12) > li:nth-child(2) > span {
font-size: 13px;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(11) {
padding-top: 17px;
}
</style>
So what I need help with is how to do so it only applies to the product pages that have variant options enabled. But without the original code getting affected.
My product page: https://kidos.se/products/akpase-rondane-frost-mountain-grey
code: kidos24
Thanks in advance!
Yes?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024