- 125
- 76 423
Betsy Lugo Creative
United States
Приєднався 7 лют 2023
We love Shopify & Canva! Here you'll find tips, tools, and resources for business owners who are just starting out.
Hola and welcome, so thrilled you are here.
Get your freebie "Shopify Launch Checklist", go download it my friend 👉🏽 betsylugo.com/shopify-checklist/
Hola and welcome, so thrilled you are here.
Get your freebie "Shopify Launch Checklist", go download it my friend 👉🏽 betsylugo.com/shopify-checklist/
How to Prepare Images for Shopify
Avoid common Shopify image mistakes, learn how to optimize image sizes and reduce file sizes without sacrificing quality. Tips for finding stock photos that fit your brand. Also, how to use file naming and Alt text for SEO.
Created specifically for DIY ecommerce entrepreneurs, this video helps you sidestep typical image mistakes that can harm your store's performance and visual appeal. Boost your site speed and improve user experience with these easy-to-follow image preparation tips.
Resource:
www.shopify.com/blog/image-sizes
Hire me if you want to outsource, it will be my pleasure!
Tutorials to watch next:
👉🏽 Create Professional Product Image with Placeit ua-cam.com/video/7wNb91SVKDo/v-deo.html
👉🏽 How to Change the Image Banner Overlay Color in Shopify ua-cam.com/video/2SFmozIuauE/v-deo.html
👉🏽 Different Image for Desktop and Mobile ua-cam.com/video/4_mGdtsrtoQ/v-deo.html
📑 Get access to my Shopify Pre-Launch Checklist list at betsylugo.com/shopify-checklist/
🔔 Thanks for watching and be sure to subscribe for more awesomeness!
⚞⚞⚞⚞⚞☕️ ABOUT ☕️⚟⚟⚟⚟⚟
Learn how to design & customize your Shopify website. Subscribe to be notified when a new video is released. I pledge to keep the tutorials simple, short, and helpful!
I’m a self-taught web designer, super-nerd, and a Shopify partner. Owner of Betsy Lugo Creative ☕ I drink an insane amounts of coffee, so if you want to say thanks for a helpful video, Buy Me a Coffee! www.buymeacoffee.com/bl.creative .
👉🏽LET'S CONNECT
Say hi on Insta betsy_oficial
Follow me on Pinterest www.pinterest.com/BL_Creative/
Work with me www.betsylugo.com
Join Commerce Connection - A monthly newsletter sharing Shopify news and updates, ecommerce trends, freebies and more! betsylugo.com/monthly-newsletter/
👉🏽 My UA-cam Gear
Mic Stand amzn.to/45jY8IO
Rode Posmic amzn.to/4cdMVf1
Rode Lavalier Mic amzn.to/45pvJkG
Camera Desk Mount amzn.to/3Rp6ER7
Camera Lens Filter amzn.to/4aHQwkk
Elgato Green Screen amzn.to/4aYjE6T
LCD Light Panel amzn.to/3Lj1jHk
👉🏽 TOOLS & SYSTEMS I LOVE
Protect your business bit.ly/BLC-Policies
Custom Shopify sections bit.ly/BLC-Sections
My preferred themes bit.ly/BLC-Themes
Want more? Check out my resources page betsylugo.com/resources/
The term "Shopify" is a trademark of Shopify Inc. and the term "Canva" is a trademark of Canva Inc. This video was not approved or endorsed by them. I just really love their platforms ♥
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
#shopifyimages #shopifytutorialforbeginners
Created specifically for DIY ecommerce entrepreneurs, this video helps you sidestep typical image mistakes that can harm your store's performance and visual appeal. Boost your site speed and improve user experience with these easy-to-follow image preparation tips.
Resource:
www.shopify.com/blog/image-sizes
Hire me if you want to outsource, it will be my pleasure!
Tutorials to watch next:
👉🏽 Create Professional Product Image with Placeit ua-cam.com/video/7wNb91SVKDo/v-deo.html
👉🏽 How to Change the Image Banner Overlay Color in Shopify ua-cam.com/video/2SFmozIuauE/v-deo.html
👉🏽 Different Image for Desktop and Mobile ua-cam.com/video/4_mGdtsrtoQ/v-deo.html
📑 Get access to my Shopify Pre-Launch Checklist list at betsylugo.com/shopify-checklist/
🔔 Thanks for watching and be sure to subscribe for more awesomeness!
⚞⚞⚞⚞⚞☕️ ABOUT ☕️⚟⚟⚟⚟⚟
Learn how to design & customize your Shopify website. Subscribe to be notified when a new video is released. I pledge to keep the tutorials simple, short, and helpful!
I’m a self-taught web designer, super-nerd, and a Shopify partner. Owner of Betsy Lugo Creative ☕ I drink an insane amounts of coffee, so if you want to say thanks for a helpful video, Buy Me a Coffee! www.buymeacoffee.com/bl.creative .
👉🏽LET'S CONNECT
Say hi on Insta betsy_oficial
Follow me on Pinterest www.pinterest.com/BL_Creative/
Work with me www.betsylugo.com
Join Commerce Connection - A monthly newsletter sharing Shopify news and updates, ecommerce trends, freebies and more! betsylugo.com/monthly-newsletter/
👉🏽 My UA-cam Gear
Mic Stand amzn.to/45jY8IO
Rode Posmic amzn.to/4cdMVf1
Rode Lavalier Mic amzn.to/45pvJkG
Camera Desk Mount amzn.to/3Rp6ER7
Camera Lens Filter amzn.to/4aHQwkk
Elgato Green Screen amzn.to/4aYjE6T
LCD Light Panel amzn.to/3Lj1jHk
👉🏽 TOOLS & SYSTEMS I LOVE
Protect your business bit.ly/BLC-Policies
Custom Shopify sections bit.ly/BLC-Sections
My preferred themes bit.ly/BLC-Themes
Want more? Check out my resources page betsylugo.com/resources/
The term "Shopify" is a trademark of Shopify Inc. and the term "Canva" is a trademark of Canva Inc. This video was not approved or endorsed by them. I just really love their platforms ♥
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
#shopifyimages #shopifytutorialforbeginners
Переглядів: 103
Відео
Change the Text Color of a Specific Menu Item | Shopify
Переглядів 6334 місяці тому
Change the color of 1 menu item on mobile and desktop. In this step-by-step tutorial, we'll guide you through the process of changing the color of 1 menu item in the header and footer in your Shopify store. Enhance your user experience, or bring attention to a key aspect of your shop. In this video, you will learn how to change the text color of a specific menu item: 00:00 Set-up 03:00 Main men...
How to Add a Custom Cursor to Shopify (2 Easy Methods)
Переглядів 8385 місяців тому
Create a One-of-a-Kind Shopify Store with a Custom Cursor for FREE! In this video, I'll show you two easy methods to achieve this: using a user-friendly app or by manually inserting a code snippet. I'll guide you through the process step-by-step. I'll be using the amazing @qwiqodeshopifysections custom cursor to demonstrate how effortlessly you can transform your store's appearance. Key benefit...
How YouTube Has Changed MY LIFE In 1 Year | My Journey
Переглядів 395 місяців тому
In this video, I share how UA-cam has changed my life in just 1 year. From new opportunities to personal growth, my journey on UA-cam has been life-changing. I still can't believe I’m doing this, I am so grateful for all :). Thank you my friends for all of your support and for being part of the community! My Blog: betsylugo.com/blog For business enquiries: hello@betsylugo.com 15 MIN CALL TO DIS...
3 Click-Worthy Button Hover Effects | Shopify
Переглядів 4856 місяців тому
Boost user engagement! I'll walk you thru 3 button hover effects you can easily add to your Shopify store. NO CODING EXPERIENCE NEEDED! Follow along and learn how to use the included code snippets (CSS) in your Theme Editor's Custom CSS. In this video, you'll learn: - 3 eye-catching button hover effects: Transform your buttons and grab attention! - Bonus! 3 additional CSS tweaks. Timestamps ⌚️ ...
2 Ways to Discount Gift Cards (Sales vs Automatic Discounts) | Shopify 2024
Переглядів 3286 місяців тому
Looking to boost sales with discounted gift cards on Shopify? This video shows you two effective methods: Sales: Learn how to create temporary sales that display the discounted price directly on the product page with a "Sale" badge Automatic Discounts: Learn how to set up automatic discounts applied at checkout. This step-by-step tutorial will guide you through both approaches, so you can choos...
5 Canva Apps Every Ecommerce Solopreneur Needs
Переглядів 3116 місяців тому
Creating high-quality content for your ecommerce business can be overwhelming! Canva is fun and easy to use, but did you know it has hidden gems? In this video, we unveil 5 powerful Canva apps that will take your content creation fun and productive. 📑 Get access to the Free Canva Keyboard Shortcut Keys PDF Guide: betsylugo.com/canva-shortcuts/ 📑 Blog Post: The Essential Guide to E-commerce Webs...
How to Customize Your Shopify Announcement Bar | 2024 Tutorial
Переглядів 9297 місяців тому
This video is your one-stop guide to customizing the Announcement Bar in Shopify. We'll walk you through everything you need to know, including: How to edit the announcement text to grab your customers' attention, Increasing the padding for a cleaner, more spacious look, and how to add a background image to make your announcements truly standout. By the end of this video, you'll be a Shopify An...
Shopify Navigation Menu Easy Text Color & Size Change
Переглядів 8227 місяців тому
Watch this quick guide to customizing your navigation menu using the Dawn Shopify theme, but you can use this on any of the free Shopify themes. We'll cover methods for themes with and without the Color Scheme option. If your theme has Color Schemes, you can use that! Otherwise, we'll show you how to use the Theme Customizer with simple CSS to change the color and text size of your navigation m...
How to Change Your Header Menu Font Case in Shopify
Переглядів 4417 місяців тому
Need to change your header menu? This Shopify tutorial will show you how to change your header menu font case to uppercase, lowercase, or even proper case - all with simple CSS code! We'll walk you through step-by-step, including two ways to apply the code to your theme, and how to find the code for your specific theme. By the end of this video, you'll be able to give your store a more personal...
2 Ways To Change The Default Font Sizes in Shopify
Переглядів 7058 місяців тому
What to change the default font size for your entire Shopify website? In this step-by-step tutorial, I'll walk you through 2 different ways that you can customize the size of the text in your store. Both are easy and not coding knowledge is necessary. Just follow along! Timestamps ⌚️ 00:00 Option 1: Change the default font size from the customizer 01:17 Option 2: Change the default font size fr...
Stop Wasting Time Searching! Organize Your Canva for Ecom in 4 Steps
Переглядів 2358 місяців тому
Ecommerce owners wear a million hats, and keeping your Canva account organized can feel impossible! Stop wasting time searching for designs. This video will show you my 4-step method to get your Canva cleaned up and organized. PLUS bonus tips to stay on top of it all. Spending less time on design and more time on growing your business! Watch now and get ready to take back control of your Canva....
How to Add Borders to Individual Blocks | Beginners Tutorial
Переглядів 4568 місяців тому
Learn how to easily add borders to your elements and blocks in your Shopify website with this step-by-step tutorial! In just a few seconds, you can customize your online store and make it stand out with stylish borders. Watch now to master this simple Shopify border tutorial with easy copy and paste CSS Code. 🚀 Get all the codes from this video PLUS more CSS to try over on my blog 👉🏽 betsylugo....
EASY Shopify Tutorial - Add Borders to Any Section in Seconds!
Переглядів 1,5 тис.8 місяців тому
Learn how to easily add borders to your Shopify website with this step-by-step tutorial! In just a few seconds, you can customize your online store and make it stand out with stylish borders. Watch now to master this simple Shopify border tutorial with easy copy and paste CSS Code. 🚀 Get all the codes, PLUS more CSS to try over on my blog 👉🏽 betsylugo.com/add-section-borders-to-shopify/ /*secti...
Hide Sections in Desktop and Mobile
Переглядів 5318 місяців тому
This guide empowers you to take control of your Shopify website's appearance with some simple CSS. Learn how to: - Hide desktop sections to streamline your mobile experience. -Create mobile-specific sections to deliver a tailored experience for mobile users. This approach is perfect for themes like Dawn that lack built-in mobile section editing functionalities. Let’s jump right in! Code used: @...
How To Create Custom Button Styles In Shopify | Easy CSS
Переглядів 1,7 тис.9 місяців тому
How To Create Custom Button Styles In Shopify | Easy CSS
Secrets to Perfect Alignment and Spacing in Canva
Переглядів 1,1 тис.9 місяців тому
Secrets to Perfect Alignment and Spacing in Canva
How to Change the Image Banner Font Sizes | Shopify
Переглядів 6769 місяців тому
How to Change the Image Banner Font Sizes | Shopify
How to Change the Image Banner Overlay Color in Shopify
Переглядів 7089 місяців тому
How to Change the Image Banner Overlay Color in Shopify
Shopify Store Hero Banner Tutorial for Beginners
Переглядів 1 тис.10 місяців тому
Shopify Store Hero Banner Tutorial for Beginners
How to Make a Shopify Banner in Canva for Beginners
Переглядів 57910 місяців тому
How to Make a Shopify Banner in Canva for Beginners
5 Mistakes to Avoid When Setting Up Your Shopify Store
Переглядів 10310 місяців тому
5 Mistakes to Avoid When Setting Up Your Shopify Store
Learn How to Easily Design Repeating Patterns in Canva
Переглядів 3,8 тис.10 місяців тому
Learn How to Easily Design Repeating Patterns in Canva
Adding Background Images to The Checkout Page
Переглядів 29411 місяців тому
Adding Background Images to The Checkout Page
Change the Button and Badge Text in Shopify
Переглядів 67811 місяців тому
Change the Button and Badge Text in Shopify
How to Setup e-Gift Cards on Shopify- Complete Tutorial
Переглядів 2,7 тис.11 місяців тому
How to Setup e-Gift Cards on Shopify- Complete Tutorial
3 Canva Text Effects for Beginners
Переглядів 9 тис.11 місяців тому
3 Canva Text Effects for Beginners
The Basics of Branding: For New Business Owners
Переглядів 18711 місяців тому
The Basics of Branding: For New Business Owners
How to Remove Policy Links from Checkout Page in Shopify
Переглядів 2,2 тис.Рік тому
How to Remove Policy Links from Checkout Page in Shopify
Hello i have tried both option neither is working any ideas?
Hello Thanks for your I have question how you make the logo photo on the left and all other menus beside it without damage the alignment I am trying but the alignment for footer coming very bad
Amazing! Keep doing videos like this
ma'am could you make a tutorial on how i could have a second logo on the header top left btw
make a video on how i could have a second logo on the top left of the header please
Thank you so much, best tutorial ever, changing the second image url is key, nobody in tons of tutorial says that, even shopify assistance dont' specify this.
🙌🏽 that’s my goal!
Thanks so much
You’re welcome, thanks for watching!
This was exactly what I was looking for! Thank you very much!
First option did not work for me, I have an Australian shopify site, if that makes any difference?
Sorry it’s not working for you. It shouldn’t make a difference the country your in. What version of the theme are you using?
Amazing work! Your channel has been a big help! If you have multiple gift cards can you post multiple links under the "img src" section within the gift card css?
Thank you so much! So happy to help here in my corner of YT :). I haven't had that request before, I am sure it can be done with the help of a developer or with an app. If you go to the Shopify App Store type in Gift Card in the search bar and you will have several options of apps.
@@BL_Creative Thank you very much Betsy! i will take a look at the store and see what i can find i appreciate your reply and information :)
That was helpful
"Hi, thanks for your video! I installed this theme but in the slideshow, I can't change the hover background color of the button, how should I do it?"
Hi, thanks for the question. You could try these code below but I would advise to use the Inspect tool to ensure that you are targeting the correct class or ID. .slideshow__button:hover { background-color: #hex-color; color: #hex-color; } or .slideshow-button-selector { background-color: #hex-color; color:#hex-color; } Let me know if these not work and I can create a video for it.🙌
Hi Betsy, I’m trying to add a swipe effect to the "SHOP ALL" button on my image banner. I want the button to have a white background with black text initially, and when hovered over, it should swipe to a transparent background with white text and a white border. I’m having some trouble implementing this-could you guide me on how to achieve this effect? Thanks so much!
Hi @Cruzfr to make a color transparent you can to use the RGBA color instead of the HEX color. For example a white transparent would be rgba (255, 255, 255, 0) where the last digit of 0 represents the complete transparency instead of #FFFFFF. You can replace the 0 with .05 for 50% transparency, and 1 is complete opaque. Hope that helps!
Worked for me, How do i get the colured menu band to go right across the whole page?
I'm sorry, not sure I understand the question. Are you asking, how to make the header menu color extend the entire length of the website? If so, that is done via the Theme customizer. If you still find that its not the full width the you need to inspect and change the theme's default width size.
This helps so much
I have a question, I did the step as you instructed and I had a customer purchase a card. They bought a $50 gift card for $45 dollars. When I checked their balance, it shows $45 and not $50 dollars. What did I do wrong? The denomination shows $50. Thanks in advance!
Humm, I can’t say what could be wrong without seeing the backend. Reach out to Shopify support first for immediate assistance. They are great, and will help you fix the customers balance and assist with checking the set up of the sale on the GC.
THANK YOU SO MUCH this was so easy it took 2 minutes thank you thank you 🙏🏻
You’re welcome! 🙌🏽
You’re welcome! 🙌🏽
Thank you SO much! This was so helpful!!!
thank you! you explained it perfectly!
🙌 My pleasure! So happy it helped you.
Hey Betsy! Is there a way you can change the “Swipe Color Effect” to go up and down, instead of going left to right? Thanks so much! ☺️
Thank you for the question. Replace these 2 lines of code: #1 Replace: background: linear-gradient(to left, #000 50%, #fff 50%) right !important; with: background: linear-gradient(to bottom, #000 50%, #fff 50%) bottom !important; #2 Replace: background-position: left !important; with: background-position: top !important; Don't forget to change the #hex colors, and let me know if it worked for you 🙌
Hey Betsy! Thanks so much for getting back to me - I really appreciate you taking the time to help! Unfortunately, the issue is still sticking around. ☹️ After editing/replacing the code like you suggested, the button had a split-color to it. Half of the button was blue (#084875) and half white (#ffffff), even before hovering. When hovering over it now, the transition doesn’t seem to work fully - the only thing that changes is the button text color. The background stays split in half, blue and white, just like before. I’ll include the exact code I pasted in the custom CSS section below in case it helps: .button { background: linear-gradient(to bottom, #ffffff 50%, #084875 50%) bottom !important; background-size: 200% !important; transition: 0.5s ease-out; color: #084875; } .button:hover { background-position: top !important; transition: 0.5s ease-out !important; color: #ffffff; } Thanks again for your help - you’re awesome for putting out such GREAT content and taking the time to respond to your viewers! Hope to hear from you soon 💛
I'm happy to help. I just applied this code to the Studio theme 15.2 which is also a free theme and I used this code. Give it a try 🤞: .button { background: linear-gradient(to bottom, #ffffff 50%, #084875 50%) bottom !important; background-size: 100% 200% !important; transition: 0.5s ease-out !important; color: #fff; } .button:hover { background-position: top !important; transition: 0.5s ease-out !important; opacity: 1 !important; color: #084875; }
@@BL_Creative Hey Betsy! Thank you so much for sharing the code - it worked PERFECTLY! I really appreciate your help and generosity! 💕
hey betsy how can i apply it on aurora theme?
Yes, you can apply these effects in any theme. You just need to use the inspect tool to target the buttons for the specific theme. You can always reach out to me via my services page if you need further assistance.
did not work on dawn 15.2.0
Hi, the code is working on the Dawn 15.2. Ensure you are just coping and pasting the code and not the comment, as it is not the correct format, we have character limitations here on YT. The correct format would be /*Change nav text size and color*/ if you wish to include it. 🙌
This was a great tutorial, thanks!
You're very welcome!
Thank you! It really worked on the 2.0 Shopify Theme
Glad it helped!
this didn't work for me, I copied and pasted from description is there something else I need to do? (i'm using studio theme)
Hi, I just testing the code in the Studio 15.2 and it works. Try this code: /*Change nav text size and color*/ .header__menu-item, .menu-drawer__menu-item { font-size: 18px; text-transform: uppercase; color: green; } /*change color to everything in the header*/ .header-wrapper * { color: red; } Sometime copy and pasting a code from the YT description doesn't work and you have to type it in. Hope this helps!
Thank youuuu❤
My pleasure! Happy to help.
Hi Betsy! Thank you for this video. I tried to add the 'Recipient Information From' and this wasn't available in my Buy Buttons, as well as I can not see the the Gift Card option inside Settings. Theme i am using currently is 'Taste OPT'. Any was to solve this? Thank you so much!
Unfortunately it could be that the theme doesn't have the feature "Recipient Info" yet. You could reach out to Shopify for assistance they are great, or you can also review the theme's documentation.
Unfortunately that didn't work for me. I wanted my body font on product pages smaller. It condensed the ENTIRE page.
Hi, thanks for the comment. This tutorial is to change the font for the entire site. If you want to change the font to specific sections or pages you have the target that area specifically. Thanks for helping video idea!
Im trying to figure out how to change the menu drop down thing in the mobile version
Let me know what you are trying to change.
Thank you so much! This is the only clear explanation of what I was looking for.
You're very welcome!
Thank you!!!! This was just what I needed!
Yay!
You helped us so much!! I'll contact you soon to work together!!!
Looking forward to it!
Great video thanks!
You're welcome!
UPDATE: BRANDING HAS BEEN RELOCATED. Go to Settings > General > Brand assets 🙌
I've been working on this for days and nothing worked until this video! Thank you so much.
thank you very much for creating the kind of content here. its so so helpful!
You're so welcome!
That worked perfectly after searching and trying so many things. Thank you!
Thank you!!!! 🥰
u can use this code in the panel header in css code, and this is work) ty
A great guide! How can I make full width on mobile? I tried to use the code you cmt for it, just works for computer but didn't work for mobile. Thank you
Thank you so for the questions. I can not cover all themes and all versions in a video, so what I could suggest is to replace .announcement-bar with .utility-bar and see if that works for you. Otherwise you need to use the inspect tool to target your specific announcement bar. and/or target the @media.
dawn 15.2.0 ... works perfect! big thx
THANK YOU!
Hi Betty, on mobile, I lose the bottom line of the submenu. Any ideas how to fix? Thank you
Hmm. No not sure, so sorry.
This code does not work the same anymore and is essentially not useful for a professional site. When adding the code, the button appears like it does in the video. When switching to mobile, the button covers everything on the top of the page (it is supposed to be placed within the nav menu like the video shows.) The second code doesn't work correctly as the button background disappears and it does not move.
Thanks for the feedback!
im using the 2.0 refresh theme and there isnt a brand option under settings.
Branding has been relocated. Go to Settings > General > Brand assets
Thanks, after reading your method, I finally found a way to modify the conflicting text and background colors on my website. Thanks again!😀
Thank You! How do we reduce left and right spacing of the footer??
What do you mean? You want the entire footer to be narrower?
This also changes the colour of the filter buttons on the website, how can that be fixed?
I'm sorry, not sure since the Dawn them doesn't have any built-in filter buttons, it just offer drop downs. Feel free to reach out and I can help you make any customization you need.
Fantastic tutorial. You helped me out so much. Appreciate ya!
You're welcome 🙌🏽
Great tutorial.
Thank you so much!