BLOG

Collection Page redirect base on country code

{%- for collection in collections -%} {%- if request.path == "/collections/accessories" and localization.country.iso_code == 'IN' -%} <script>window.location.href = "http://stackoverflow.com";</script> {%- endif -%} {%- endfor -%} <script> $(document).ready(function(){ $.getJSON("https://ipinfo.io", function(data) { console.log(data.country); if(data.country == "IN"){ window.location.href = "http://stackoverflow.com"; }else if(data.country == "RO"){ window.location.href = "https://www.google.com"; }...

Countdown timer collection page

<style> .hide_block { display: none !important; } .show_block { display: block !important; } .btn-coupon { width: 330px; display: block; margin: 0; margin-bottom: 15px; background: #5ce1e6; color: #fff; border-color: #5ce1e6; padding: var(--padding_btn_qv_add_to_cart) !important ; margin-right:12px; } #str_timer>span { border-bottom: 1px solid #b3b3b3; margin-right: 10px; font-size: 16px;...

Shopify Hydrogen app installation in local

Installation Steps: Step1>  # Using `yarn` yarn create @shopify/hydrogen OR # Using `npx` npx @shopify/create-hydrogen   Step2>yarn install   Step3>yarn dev   Step4> On the main folder find (hydrogen.config.js)   Find following code : shopify: {     storeDomain: 'Store-name.myshopify.com',     storefrontToken: 'Add your Private app Storefront access...

Slick Marquee text slick slider with hover pause functionality

{%- capture topInfoBar -%} <div class="top-bar {% if section.settings.topbarmobile %}small--hide{% endif %}"> <div class="marquee-text page-width{% if section.settings.fullwidth %} fullwidth{% endif %}" id="carousel-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="carousel"> <div class="flex carousel top-info-bar" data-slick='{"slidesToShow": {{ section.settings.grid }},"slidesToScroll": 1, {%- if settings.rtl -%}"rtl": true,{%- endif -%} "infinite":...

Custom store front using react

Steps:1.npx create-react-app shopifyreact2.git clone https://github.com/Shopify/storefront-api-examples3.cd storefront-api-examples4.cd react-js-buy5.yarn install6.Update access token and Domainsrc/index.jsconst config = new Config({ storefrontAccessToken: 'your-storefront-access-token', domain: 'your-shop-name.myshopify.com',});

Drop-down all product list and submit button to go selected product

  Demo store: https://simple-business-plan-templates.myshopify.com/ Front end Password: baseum Section code: <div class="back-banner" style="background-image:url('{{section.settings.background-img | img_url:'master'}}')"> <div class="fx"> <div class="fx-lf"> <div class="left-part"> <h2 class="dropdown-heading">{{section.settings.titleleft }}</h2> <div class="product-form__input product-form__input--dropdown"> <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}"> {{ option.name }} </label> <div class="select"> <select id="Option-{{ section.id }}-{{ forloop.index0 }}" class="select__select">...

Shopify variant image swatches 2.0

  If you want use Meta field then follow below link: https://www.bluish.io/shopify/color-swatches-dawn-theme Else follow for the custom code {%- when 'variant_picker' -%} {%- unless product.has_only_default_variant -%} {%- if block.settings.picker_type == 'button' -%} <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}> {%- for...