
Introduction to the course Build a highly converting Shopify store | Complete Guide.
What you can learn more this course and the overview of the whole course.
This course is designed for Shopify merchants. So if you don't have the store yet, in this video you'll get to know how to quickly register the Shopify account. In addition, we'll give all Udemy students the exclusive privilege with Shopify Deal: Pay Only $1 For Your First Month. Learn more http://www.pagef.ly/9e91
In this video, we're going to add PageFly to your Shopify Store and Access the Dashboard
Also, I'll add links to the necessary resources.
The overview of PageFly app navigation. In this video you'll learn PageFly concept and how it works with Shopify.
In this video we will be taking a look at which layout elements Harry’s About Us page consists of and arranging them in accordance with the design. Because this is the first tutorial in the series, we’ll make sure to give an explanation and clear demonstration of how to locate and drag-and-drop the elements into the page editor. Please follow along and repeat as necessary.
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:18 - Saving your page
⚡️ 00:30 - Changing background colour
⚡️ 01:05 - Changing and formatting heading text
⚡️ 02:20 - Adjusting box style (padding, margins)
⚡️ 03:58 - Saving images from web pages using inspect element
⚡️ 05:18 - Using an image as the background of a layout element
⚡️ 06:40 - Adjusting box style to contain background images
⚡️ 08:28 - Dragging to adjust width of columns in the page editor
⚡️ 09:30 - Uploading an image to an image element
⚡️ 09:50 - Adjusting the gutter & and disable max width
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:40 - Adjust content position (row)
⚡️ 02:50 - Deleting sections or elements
⚡️ 03:00 - duplicating completed sections
⚡️ 03:20 -Use flex display to reverse row layout (IMPORTANT)
⚡️ 07:20 - Adjusting and customizing the button element
⚡️ 08:10 - Adjust border (rounded edges)
⚡️ 08:55 - Save & Publish the page and preview
⚡️ 09:30 - Oops! We didn’t disable the password protection on our store. Laugh as I try to figure out how, then proceed to the next video to find out.
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:01 - Disabling password protection on your store
⚡️ 00:15 - Previewing and comparing the page
⚡️ 01:50 - Applying a URL link to a button element
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:15 - View your page on different devices
⚡️ 01:00 - Making adjustments to the mobile view
⚡️ 01:45 - Optimizing for mobile: align top to bottom instead of backgrounds (watch the rest of the video to practise)
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:10 - Overview of Harry’s Product Page
⚡️ 02:05 - Placing the necessary layout elements
⚡️ 02:35 - Duplicating sections
⚡️ 03:00 - Searching and Adding the Slideshow element
⚡️ 03:35 - Adding slides to the slideshow
⚡️ 04:05 - Adding the accordion (dropdown) element
⚡️ 05:05 - Making adjustments to the accordion element
⚡️ 05:30 - Adding the list element to the accordion
⚡️ 06:50 - Fitting a button to a block element
⚡️ 07:40 - Aligning block content using flex display
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:30 - Review of background image sections
⚡️ 02:20 - Adjusting and customizing the slideshow element
⚡️ 05:15 - Adding content to the accordion element
⚡️ 07:05 - adjusting separate text within a paragraph
⚡️ 08:30 review of button element customization
⚡️ 09:55 - Adjusting the hover appearance of the button
⚡️ 11:45 - Adjusting icons
⚡️ 15:00 - Adjusting margins
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:25 - Adjusting mobile slideshow height
⚡️ 1:10 - Optimizing for mobile, top to bottom instead of background, remainder of the video
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:20 - Le Sport Sac Collection page overview
⚡️ 02:30 - Use inspect element to identify original page elements
⚡️ 05:00 - Adding the tab element and customizing tabs
⚡️ 06:00 - Adding layout elements within tabs
⚡️ 07:00 - Adding content within tabs
⚡️ 09:30 - Duplicating columns and rows within tabs
⚡️ 10:15 - Adding triple column with images and buttons
⚡️ 14:15 - Adding links to images
⚡️ 14:40 - Preview the page
Watch as we make sure the page is responsive and beautiful on a much narrower screen. We will be doing this for every page we do so follow along and get in the habit!
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:01 - Overview of the page
⚡️ 02:00 - Adding and preparing the layout elements
⚡️ 04:10 - Duplicating finished columns in a section
⚡️ 06:00 - The divider element
⚡️ 07:50 - Adding the tab element
★ ★ ★ Outlines ★ ★ ★
⚡️ 01:00 - Image, heading, button and background for the title section
⚡️ 07:00 - Duplicating formatted columns
⚡️ 10:30 - Adjusting image element size
⚡️ 13:40 - Customize the divider element
⚡️ 15:05 - Review of row-reverse using flex display
⚡️ 16:10 - Dragging sections or elements to a new position on the page
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:45 - Adding or removing tabs from the tab element
⚡️ 01:30 - Adjusting individual tabs appearance
⚡️ 04:00 - Adding layout elements within the tabs
⚡️ 07:15 - Adding images in the columns within the tabs
⚡️ 07:40 - Duplicate rows within the tabs
⚡️ 11:45 - Preview the finished page
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:30 - Mobile Optimization adjustments
⚡️ 03:00 - IMPORTANT! Advanced “Hide on” feature to conceal certain information from mobile
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:20 - Overview of Harry’s homepage
⚡️ 01:00 - Adding video element
⚡️ 02:30 - Column duplications
⚡️ 06:30 - Adding the Shopify featured products element
★ ★ ★ Outlines ★ ★ ★
⚡️ 02:00 - Formatting and aligning the title section
⚡️ 05:30 - Aligning large images in the background
⚡️ 07:00 - duplicating columns in a section then moving them to another section
⚡️ 11:30 - Using stacked columns and matching background colours to images
⚡️ 13:00 - Using the Shopify Featured Product element
⚡️ 18:40 - Previewing the page
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:10 - stacking elements to optimize for mobile
⚡️ 03:30 - Adjusting font size for mobile
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:50 - Title section, background and heading
⚡️ 01:30 - Adding and adjusting layout elements
⚡️ 03:30 - adding list elements to column
⚡️ 07:30 - Adding slideshow element with multiple slides visible
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:30 - Title section, background and heading, font adjustment
⚡️ 1:00 - Adding content to layout elements and adjusting padding and margins
⚡️ 05:30 - Manipulating the list elements within a column (changing the list icon)
⚡️ 09:00 - adding the ⅓. ⅔ layout element
⚡️ 10:00 - adjusting margin of a column separately
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:01 - CONTINUED: adjusting margin of a column separately
⚡️ 02:00 - Duplicating and reversing a section
⚡️ 05:45 - IMPORTANT - Adding youtube element with image cover
⚡️ 11:00 - slideshow element
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:10 - Death Wish Coffee page Overview
⚡️ 01:00 - Title section with divider
⚡️ 02:40 - Adding and duplicating accordion sections
⚡️ 05:00 - Adding half-half column elements into section
⚡️ 06:40 - Adding MailChimp form element
★ ★ ★ Outlines ★ ★ ★
⚡️ 01:30 - adding content to title section
⚡️ 08:00 - Adjusting accordion elements
⚡️ 11:00 - Formatting image and button elements
⚡️ 17:30 - Formatting the MailChimp form
Watch as we make sure the page is responsive and beautiful on a much narrower screen. We will be doing this for every page we do so follow along and get in the habit!
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:40 - Realigning content for mobile
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:16 - Overview of Shopify’s contact page
⚡️ 01:02 - Adding layout elements
⚡️ 02:55 - Duplicating columns in a section
⚡️ 04:40 - Adding the Mailchimp form element
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:25 - Using WhatFont Chrome Extension review
⚡️ 00:50 - Putting words into text elements
⚡️ 3:00 - Putting images into image element
⚡️ 4:00 - Button hover settings review
⚡️ 9:00 - Adjusting buttons review
⚡️ 11:30 - Putting image and text into columns
⚡️ 15:00 - Adjusting the Mailchimp form
⚡️ 19:00 - Final adjustments and preview
★ ★ ★ Outlines ★ ★ ★
⚡️ 00:40 - Realigning and changing font size for mobile
⚡️ 01:35 - “Hide-on” feature review
Greetings e-tailers, and welcome to the course.
My name is Julian and I’ll be teaching you how to use the PageFly Advanced Shopify Page Builder to make sure your eCommerce site reaches its full potential.Have you ever seen an amazing online store and wished you could incorporate some of the more advanced elements into your own? This is a common occurrence. Sadly, without the proper coding skills, it can be difficult to make the Shopify storefront look and behave exactly how you want it to. So while the beauty of Shopify is in its ease-of-use, merchants can find themselves frustrated with the design limitations in the native theme editor.
Different themes have different features, sure. But many are built to cater to a specific industry or audience, with little to no control over any page other than the homepage. The key to success in eCommerce is to optimize every page by including features and elements that create a fluid user experience and contribute to an overall increase in conversion. You’ll need to be able to further customize your store in order to achieve this.
So first of all, congratulations! By enrolling in this course, you’ve just taken the first step toward harnessing full creative control over every page on your Shopify storefront. This series of tutorials is designed for Shopify eCommerce merchants that are looking for a way to have unbridled influence over the appearance and functionality of their store.
Your online shop is your pride and joy, so every page deserves your full attention! The PageFly Advanced Shopify Page Builder gives users access to feature-rich web design capabilities all within an intuitive drag-and-drop interface. You can build pages from scratch or take advantage of many cutting-edge templates to give your site the style and utility it needs.
Throughout this course, you’ll have the opportunity to follow along as we recreate some amazing web pages using PageFly. You’ll have access to supplementary articles explaining the theory, importance and functionality of each type of page, and you’ll also be given some practise assignments to test your new skills with follow-up solution videos to make sure you don’t experience any frustrations with PageFly.
We’ll demonstrate how to build pages from scratch, so by the end of the course you can treat the page editor as a blank canvas on which to begin designing your own masterpieces.
With that, let’s start building some amazing eCommerce pages!
Why you should enroll:
You have a desire to become a successful Shopify merchant
You're artistic and love web design but lack the advanced coding abilities
You want total control over your eCommerce site
You want an affordable solution to Shopify design limitations
You want access to great resources and an ongoing support base