How can I customize my product and collection tabs for discounts?

Store Design
, , , ,
1

Hi there, I am really want have my collection list/product tab to look something along the lines of the image attached.

Especially the quick add on the product itself and the collection tabs (ie 10% off, 30% off, 50% off)

Currently it looks like this: www.scooterbarn.com.au

Any help is extremely appreciated!

Collection.png
Collection.png2308×1192 424 KB

2

Hi @MattyCeravolo ,

Thank you for posting here. I would be happy to help you.

Please add the below code to the very bottom of the ‘base.css’ file of your theme. It’s under the ‘Asset’ folder.

.list-product-tabs {
	justify-content: start !important;
	margin-top: 20px !important;
	margin-bottom: 30px !important;
	width: fit-content;
	border: 2px solid #13AE8B !important;
	padding: 5px 25px !important;
	border-radius: 50px;
}
.tab-links.active {
	background: #0CAD89 !important;
	color: white !important;
}
.product-tab-block .list-product-tabs li .tab-links {
	padding: 0px 15px !important;
	display: block;
	transition: none;
	width: 100%;
	line-height: 30px !important;
}

Screenshot_1330.png
Screenshot_1330.png1701×970 183 KB

3

That’s absolute AMAZING. Thank you so much.

Is there a way to make it smaller and able to customise the colours when hover or click on the tab.

See this, for example: https://alphaleteathletics.com/pages/shop-women

4

Made it smaller. But changing color is not possible without getting access to the store. Need to apply some condition using shopify liquid.

.product-tab-block .list-product-tabs li .tab-links {
	padding: 0px 10px !important;
	display: block;
	transition: none;
	width: 100%;
	line-height: 25px !important;
	font-size: 11px;
	font-weight: bold !important;
	text-transform: uppercase !important;
}
.tab-links.active {
	background: #0CAD89 !important;
	color: white !important;
}
.product-tab-block .list-product-tabs li .tab-links {
	padding: 0px 15px !important;
	display: block;
	transition: none;
	width: 100%;
	line-height: 30px !important;
}
5

I would be more than happy to give you access to my Store, as I would also love to see if it’s possible to change my product cards to hook something like this:

IMG_0993.jpeg
IMG_0993.jpeg1290×1275 107 KB

6

hello @MattyCeravolo , it seems you figured it out, could you please spare the time to give me the process how to do this too

7

I have solved it.

You don’t need to use any App.