Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

So I know we developers love coding everything from scratch. But I've made a Shopify app (Design Packs) that is a collection of sections and templates and I've started using it for my own development projects and it is bringing me joy.

As much as I love creating new and exciting things with code, I don't necessarily love coding variations on the same component over and over.

Since my app partner and I are both developers, we've created Design Packs in a way that is very developer friendly. We've created the ability to add section specific CSS that is scoped to each individual section.

I wanted to share my experience with creating custom themes based on designs given to me by an outside firm with Design Packs.

Video

Custom CSS

.dsgn-pck__small-heading {
	font-size: 32px;
	border-bottom: 1px solid;
	padding-bottom: 32px;
	text-align: center;
}

.dsgn-pck__text p:first-of-type {
	font-family: monospace;
	font-weight: 500;
	font-size: 16px;
	line-height: 122%;
	letter-spacing: 0.1em;
}

.dsgn-pck__text p:nth-of-type(2) {
	font-weight: 700;
	font-size: 64px;
	margin-bottom: 16px;
	margin-top: 16px;
}

.dsgn-pck__text p:nth-of-type(3) {
	font-size: 24px;
	border-bottom: 1px solid;
	padding-bottom: 48px;
	padding-right: 16px;
}

.dsgn-pck__text p:nth-of-type(4) {
	font-family: monospace;
	font-weight: 500;
	font-size: 16px;
}

.dsgn-pck__text p:nth-of-type(5) {
	font-family: 'muli';
	font-weight: 700;
	font-size: 64px;
	margin-bottom: 16px;
	margin-top: 16px;
}

.dsgn-pck__text p:nth-of-type(6) {
	font-weight: 100;
	font-size: 24px;
	border-bottom: 1px solid;
	padding-bottom: 48px;
	padding-right: 16px;
} 
	

Mobile Custom CSS

.dsgn-pck__heading {
	width: 80%;
	margin: 0 auto;
	margin-bottom: 32px;
}

.dsgn-pck__small-heading {
	font-size: 32px;
	padding-bottom: 20px;
}

.dsgn-pck__text p:nth-of-type(2) {
	font-weight: 700;
	font-size: 48px;
}

.dsgn-pck__text p:nth-of-type(3) {
	font-weight: 400;
	font-size: 16px;
	padding-bottom: 16px;
}


.dsgn-pck__text p:nth-of-type(5) {
	font-weight: 700;
	font-size: 48px;
}

.dsgn-pck__text p:nth-of-type(6) {
	font-weight: 400;
	font-size: 16px;
	padding-bottom: 16px;
}