Get the code & cheat sheet - [ Ссылка ]
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 - [ Ссылка ]
🛠 CODE SHOP
[ Ссылка ]
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: [ Ссылка ]
- PNG vs JPG: [ Ссылка ]
📢 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: [ Ссылка ]
👨🏼💻 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: [ Ссылка ]
Join "Shopify DIY" on Discord
Chat with me and other store owners and developers:
[ Ссылка ]
👍 MY FAVOURITE APPS & THEMES
Pagefly (Page Builder): [ Ссылка ]
Design Packs (add new sections): [ Ссылка ]
Themes by Out Of The Sandbox (Use code 'FAST10' for 10% off): [ Ссылка ]
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
