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/yIoMZz6zA4c 1. Go to Sections -> main-collection-banner.liquid 2. Add this code below collection description code: <ul class="collections-list-scroll"> {% for collection in collections %} <li> <a href="{{ collection.url }}">{{ collection.title }}</a>…
1. Create a new section marquee and paste attached code <style> .section-{{ section.id }}.custom-marquee { display: flex; align-items: center; height: {{section.settings.marquee_height}}px; width: 100vw; max-width: 100%; overflow-x: hidden; background:{{section.settings.colorBackground}}; color:{{section.settings.colorText}}; }…
1. Go to Shopify dashboard -> themes -> Edit code 2. Create a new section whatsapp and paste below code. <style> .custom-whatsapp { position:fixed; width:60px; height:60px; bottom:40px; right:40px; background-color:#25d366; color:#FFF;…
1. Update Alt text of images in the gallery for each product. 2. Go to Snippets -> product-media-gallery.liquid paste below code in first li of ul and add class desktopview-showit…
https://youtu.be/u4SdHVL3nOA 1. Create a new section marquee and paste attached code <style> .section-{{ section.id }}.custom-marquee { display: flex; align-items: center; height: {{section.settings.marquee_height}}px; width: 100vw; max-width: 100%; overflow-x: hidden; background:{{section.settings.colorBackground}}; color:{{section.settings.colorText}};…
1. Create a new section 'before-after' and paste attached code {{ 'component-card.css' | asset_url | stylesheet_tag }} {{ 'component-slider.css' | asset_url | stylesheet_tag }} {% if section.settings.image_shape == 'blob' %}…
1. Create a new snippet 'progress-bar' and paste attached code <style> .custom-progress-bar { text-align: center; transition: all 1000ms linear; height: 93px; } /* Style the progress bar */ .custom-progress-bar.cart-shipping__wrapper {…