Intro to Shopify HTML & CSS for Beginners by Building Trust Badges

Get the code & cheat sheet - https://edcodes.gumroad.com/l/trust-b...

This tutorial will introduce you to HTML & CSS for Shopify, through the example of building trust badges / payment icons.

Even if you don't need trust badges on your store, this is a great way to learn basic Shopify coding skills.
In Shopify 2.0 we now have the custom liquid block, and custom liquid section. We also have the custom CSS field in every Shopify section.

This means store owners can do a lot to customize their store with some basic coding skills.

If you don't want to learn code, just grab the cheat sheet - https://edcodes.gumroad.com/l/trust-b...

🛠 CODE SHOP
https://edcodes.gumroad.com/
Pre-built sections & features for Shopify 2.0 themes, often replacing the need for apps. Copy and paste the code into your theme.

👉 RELATED VIDEOS
CSS for Shopify:    • Shopify CSS Intro - How to Overwrite Theme...  
PNG vs JPG:    • When To Use JPG vs PNG (For Websites)  

📢 STAY UPDATED

Want to see my latest tips, tutorials, and code add-ons? Youtube won’t always show you. Subscribe to get emails directly from me: https://ed.codes/newsletter

👨🏼‍💻 WHO AM I?

Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
I'm a professional web developer, but my goal is to make Shopify easy with simple and straight-to-the-point videos.

Visit my website: https://ed.codes

Join "Shopify DIY" on Discord
Chat with me and other store owners and developers:
  / discord  

👍 MY FAVOURITE APPS & THEMES

Pagefly (Page Builder): https://pagefly.link/vASPAeBp
Design Packs (add new sections): https://bit.ly/DesignPacks-edc

Themes by Out Of The Sandbox (Use code 'FAST10' for 10% off): https://outofthesandbox.com/?rfsn=594...

These are affiliate links. If you upgrade to a paid plan, I will get a few bucks at no extra cost to you.

⏭ CHAPTERS

00:00 Intro
00:48 Code & Cheat Sheet
01:23 Set up Codepen
02:32 Structure Overview
03:23 Writing the HTML
05:52 Adding images
06:48 Intro to CSS
08:36 Writing CSS
13:09 Move into Shopify
14:00 Avoiding conflicts with Shopify
16:38 Fonts
19:44 Final tweaks & Using Chrome Inspector
22:38 Margin vs Padding
23:23 Commenting your code
25:12 More Columns
26:13 Payment icons adjustments
28:03 Background circles
30:03 Max width container
31:30 Outro

#Shopify #Shopifycoding #htmlcss