DIY Website Upgrades with Sydney
As you know, this website started as a hobby and quickly turned into a full-time operation. My website features my original creations, trending items, apparel, and decor. Along the way, I have learned tons about how to customize code on the 'back- end' to create our ever-evolving style. Freestyling with CSS, HTML, and JS has is a learning curve, but can be accomplished with time and lots of patience. So i've made it easy for you. Let's take a step outside our regular scheduled programming, scale it down and do some, well, programming.
Free Custom Shopify Code?!
Some have asked about custom work, and have offered to pay for my web design services. I am flattered, and will use this as an opportunity to follow the rules of Sydney's Collection. It's only fitting that we spread positivity by providing you with a free custom shopify section! It's very straightforward, and I look forward to adding more posts like this to my blogs.
Image Banner with Video
The custom shopify section i'm giving you is awesome! It allows you to add a looping video banner, title (H1), description, and buttons. The best part, the code automatically adjusts for mobile, desktop, and tablet views. This is a complete section, we're not going to edit existing sections and risk breaking something. If you have issues with this code, you can simply return to it later, there is no need to add the section, but it will be available when you're ready to use it. That said, as of June 1, 2024, this section is working just fine, and has been implemented since early 2023.
Customization Options
Once implemented, you will see that the section includes options for the Video Link, Title, Description, Cover Image (ignore this, no cover image is needed for the video, as it will start automatically). We can also adjust the text colour, and button colours. Choose the 'Custom CSS' area to add your own custom styles like font adjustment. ie.
H1 {font-size: 40px}
This will change the font size of your title.
Video Banner Custom Code
From your shopify admin select the theme that you wish to customize, click the three dots, and select 'Edit Code'. On the left side menu, select 'Sections' to open up the dropdown menu. Click 'Add a New Section'. A pop-up will show requesting a title, name the section 'custom-video-banner'. Do not use any spaces, use '-'. Keep the section as '.liquid'. Click next.
In the new section, there will be some default code, you can simply highlight and delete it all, the code im giving you replaces it. Here's the code, copy and paste it into the empty section, then click save:
| {%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%} {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% if block.type == 'video' %} <div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image | img_url: 'master' }}');{%- endif -%}"> {%- if block.settings.video_link != blank -%} <div class="fullscreen-video-wrap"> <video class="video-js" loop autoplay preload="none" muted playsinline poster="https:{{ block.settings.video_image | img_url: 'master' }}"> <source src="{{ block.settings.video_link }}" type="video/mp4"> </video> </div> {% endif %} <div class="videoBoxInfo"> {% if block.settings.title != blank %} <h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}"> {{ block.settings.title | escape }} </h1> {% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { color: {{ block.settings.color_text }}!important; } {%- endstyle -%} {% if block.settings.text != blank %} <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}"> {{ block.settings.text }} </div> {% endif %} {% if block.settings.button_link != blank and block.settings.button_label != blank %} <a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}"> {{ block.settings.button_label | escape }} </a> {% endif %} </div> </div> {% else %} <div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}"> <div class="imageBoxInfo"> {% if block.settings.title != blank %} <h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}"> {{ block.settings.title | escape }} </h1> {% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { color: {{ block.settings.color_text }}!important; } {%- endstyle -%} {% if block.settings.text != blank %} <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}"> {{ block.settings.text }} </div> {% endif %} {% if block.settings.button_link != blank and block.settings.button_label != blank %} <a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}"> {{ block.settings.button_label | escape }} </a> {% endif %} </div> </div> {% endif %} {%- endfor -%} {% else %} <div class="placeholderNoblocks"> This section doesn’t currently include any content. Add content to this section using the sidebar. </div> {%- endif -%} <style> .main-content .videoBackground { margin-top: -55px; } .videoBackground { position: relative; } .videoBackground .fullscreen-video-wrap { position: absolute; top: 0; left: 0; min-width: 100%; width: 100%; height: 100%; overflow: hidden; } .videoBackground .fullscreen-video-wrap .video-js { position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; width: 100%; height: 100%; object-fit: cover; } .videoBackground .fullscreen-video-wrap video { min-height: 100%; min-width: 100%; object-fit: cover; } .videoBackground .videoBox { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; padding: 100px 20px 80px; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 500px; max-height: 800px; height: calc(100vh - 165px); position: relative; } .videoBackground .imageBox { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; padding: 100px 20px 80px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; min-height: calc(100vh - 165px); height: auto; } .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo { z-index: 2; margin: auto; text-align: center; } .videoBackground .overlay { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; z-index: 1; } .videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: auto; text-decoration: none; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 2px; padding: 10px 30px; font-style: normal; font-weight: normal; letter-spacing: 0.06em; white-space: normal; font-size: 16px; margin-top: 20px; } .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle { color: #FFF; font-size: 65px; line-height: 40px; } .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription { max-width: 500px; margin: 0 auto; } .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p { font-size: 17px; line-height: 28px; } .videoBackground .placeholderNoblocks { text-align: center; max-width: 500px; margin: 0 auto; } @media screen and (max-width: 767px) { .main-content .videoBackground { margin-top: -35px; } .videoBackground .fullscreen-video-wrap { z-index: 3; } .videoBackground .videoBox { min-height: 300px; height: 100%; position: relative; padding: 0; } .videoBackground .fullscreen-video-wrap { position: relative; min-height: 300px; z-index: -2; } .videoBackground .videoBoxInfo { padding: 2px 20px; width: 100%; } </style> {% schema %} { "name": { "en": "Video Background" }, "class": "videoBackground", "max_blocks": 1, "blocks": [ { "type": "video", "name": "Video", "settings": [ { "type": "url", "id": "video_link", "label": { "en": "Video link" } }, { "type": "image_picker", "id": "video_image", "label": { "en": "Cover image" } }, { "type": "header", "content": { "en": "Text" } }, { "type": "text", "id": "title", "label": { "en": "Heading" }, "default": "Video slide" }, { "type": "richtext", "id": "text", "label": { "en": "Description" }, "default": { "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>" } }, { "type": "color", "id": "color_text", "label": { "en": "Text color" }, "default": "#ffffff" }, { "type": "text", "id": "button_label", "label": { "en": "Button label" } }, { "type": "url", "id": "button_link", "label": { "en": "Button link" } }, { "type": "color", "id": "color_btn_bg", "label": { "en": "Background button color" }, "default": "#ffffff" }, { "type": "color", "id": "color_btn_text", "label": { "en": "Button text color" }, "default": "#ffffff" } ] }, { "type": "image", "name": "Image", "settings": [ { "type": "color", "id": "color_bg", "label": { "en": "Background color (optional)" }, "default": "#16165b" }, { "type": "image_picker", "id": "image_bg", "label": { "en": "or use an image (required)" } }, { "type": "range", "id": "overlay_opacity", "label": { "en": "Overlay opacity" }, "min": 0, "max": 99, "step": 1, "unit": { "en": "%" }, "default": 0 }, { "type": "header", "content": { "en": "Text" } }, { "type": "text", "id": "title", "default": "Image slide", "label": { "en": "Heading" } }, { "type": "richtext", "id": "text", "label": { "en": "Description" }, "default": { "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>" } }, { "type": "color", "id": "color_text", "label": { "en": "Text color" }, "default": "#ffffff" }, { "type": "text", "id": "button_label", "label": { "en": "Button label" } }, { "type": "url", "id": "button_link", "label": { "en": "Button link" } }, { "type": "color", "id": "color_btn_bg", "label": { "en": "Background button color" }, "default": "#ffffff" }, { "type": "color", "id": "color_btn_text", "label": { "en": "Button text color" }, "default": "#ffffff" } ] } ], "presets": [ { "name": { "en": "Video Background" }, "category": { "en": "Main" }, "blocks": [ { "type": "video" } ] } ] } {% endschema %} |
Section Added!
Great job, part one of two is now complete. The last line should be line 854, you can test the code by adding your video link. The best way to do this is by uploading your video into your 'content' -> 'files' in the shopify admin. From there, you can simply copy the video link and paste it into this new section.
Add it to Your Theme
From the code editor, click the three dots, and select customize theme. On the left side menu, click 'add section' and select the the section titled 'Video Background'. You've added it to your theme, and can now place it wherever you like, and customize it as well. The video will play on a loop.
Adjusting for Mobile
We're almost there, but as you can see, the video is only showing correctly on the desktop size, and is incorrect on mobile. You can verify this by clicking the 'mobile view' option in your theme customizer. The section is almost complete, but the Title, and buttons are not showing. Let's add them!
In order to make this adjustment, we will simply add a small piece of code to our 'base.css'. Where is 'base.css'? Follow the same steps that we used to find the 'sections'. From your shopify admin select the theme that you wish to customize, click the three dots, and select 'Edit Code'. On the left side menu, select 'Assets' to open up the dropdown menu. Select 'base.css', this will open up the code. Scroll all the way to the bottom of the file and paste the following, then click save:
| @media screen and (max-width: 767px) {
.videoBackground .videoBox { padding: 100px 20px 80px !important; } .videoBackground .fullscreen-video-wrap { position: absolute !important; z-index: 1 !important; } .videoBackground .videoBoxInfo { padding: 10px !important; } } |
Code Complete
Well done. Now you can click 'preview' and check out your new custom video banner section, test the buttons, scroll around, and confirm it's working as promised. If using Google Chrome, right click on the browser, select 'inspect', and adjust the screen size to mobile, and watch the magic. The section will automatically change the section size for mobile viewers.
Why Am I Giving Away Free Code?
I am not affiliated with, or paid by Shopify, and have not promoted any brands in this blog but my very own. So why am I giving away free code? Why not?! I've said it before, and i'll say it again, I am here for one thing, and that is to use my platform to spread positivity, it's really that simple. You followed the steps, created the section, and finally clicked 'Publish', it worked, and you got that feeling. You exhaled, looked up and went 'YESSSS'... This my friend, is why I did it.
Any Questions?
Feel free to comment, or sent me a message at info@sydneyscolleciton.com.
Note: Some phones will not play the video if they are on 'low power mode' as it blocks the rendering of larger files.
A QuIck Note on CSS
Ever wonder why we always ask you to scroll all the way to the bottom of a .css section to add code? CSS stands for 'Cascading Style Sheet', and this allows the newest code (added to the very bottom) to be the primary code for the entered information. For example, if you added the same code twice, and adjusted information in the new code, it would take precedence, the newest code will be always implemented unless the element has already been targeted with '!important'. With this, be careful when adding '!important' to your code. '!important' forces the code to stay as the primary code for the selected element regardless of what is added next. We have targeted a specific section with this code, so were not worried about our '!important' overrides here. The more you know.
