https://youtu.be/W_b8L2g66hU Adding a video slider to your Shopify store can significantly boost engagement, showcase product demos, and increase conversions. Whether you want to highlight customer testimonials, promotional videos, or product tutorials, a…
https://youtu.be/4iMIatR0FVw A well-designed pricing table can significantly boost conversions for your Shopify store, whether you're selling subscriptions, digital products, or tiered services. In this guide, you'll learn how to create a professional pricing…
URLs with query parameters (e.g., ?utm_source=facebook&variant=123) can make your Shopify store look messy, affect tracking accuracy, and even cause duplicate content issues in SEO. In this guide, you’ll learn how to automatically…
https://youtu.be/2TsIzTNYohQ @media only screen and (min-width:900px) { .product--small .thumbnail-list.slider--tablet-up li.thumbnail-list__item.slider__slide { transform: rotate(-90deg); width: calc(20% - .8rem); } .grid__item.product__media-wrapper slider-component.thumbnail-slider { position: absolute; top: 0; transform: rotate(90deg); width: 602px; /*…
https://youtu.be/btkve_UkTXI {%- style -%} .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; } @media…
1. Create new snippet 'progress-bar' and paste attached code. <style> .custom-progress-bar { text-align: center; transition: all 1000ms linear; height: 93px; } .custom-progress-bar.cart-shipping__wrapper { padding: 15px; max-width: 700px; width: 90%; margin:…
https://youtu.be/5x1e_yssW0U 1. Create new section 'video-slider' and paste attached code. {%- style -%} .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px; } .video-slider .testimonial__image { height:…
1. Go to Edit code -> header.liquid and paste below code at the top: {% if template.name == 'index' %} <style> .header-wrapper { position: absolute; width: 100%; background: transparent; color:…
1. Create a new section before-after and paste below code. {% assign unique_id = 'ba_slider_' | append: section.id %} <main class="ba_main {{ unique_id }}"> <div class="container before_after"> <div class="image-container"> <div…
{% if template.name == 'index' %} <style> .header-wrapper { position: absolute; width: 100%; background: transparent; color: white; } .header-wrapper .list-menu span, details[open]>.header__menu-item, .header-wrapper summary svg, .header-wrapper a svg, .header-wrapper h1.header__heading…