Featured Products Slider Show

Suresh_Kumar_24
Shopify Partner
8 0 0

Screenshot at Dec 20 12-10-41.png          Screenshot at Dec 20 12-11-47.png
I need in the featured Product image slider in home page.
How can I achieve the first image funcationality to show image in featured product section.
Can any body share the code Please.

Replies 6 (6)

iffikhan30
Shopify Partner
237 35 43

Hello @Suresh_Kumar_24 ,

 

If you are using dawn theme, there is by default option enable swipe on mobile , just active.

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp

devmont-digital
Shopify Partner
55 11 12

Hi @Suresh_Kumar_24

Your concern regarding the carousel, you want to enable the carousel featurred product section that shows by default with a single image (Product featured Image).

We have developed this feature by customizing the existing code, We are happy to share the updated code and the steps you need to follow while merging in code.

You need to update Two files:

  1. featured-product.liquid
  2. product-thumbnail.liquid

featured-product.liquid

  1. Add CDNs of the carousel at the top of the file.
  2. Replace code of div that has class GalleryViewer-{{ section.id }}
  3. Add Some Styling Before JSON Schema.
  4. Add carousel script Before JSON Schema.

CDNs:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css" rel="stylesheet">

 

Style

 

.hide-on-all{
		display:none !important;
	}
	.featured-product .product__media-item:not(:first-child){
		display:block;
	}
	.slide-arrow{
		background: black;
		color: #fff;
		border-radius: 100px;
		z-index: 1;
		font-size: 20px;
		padding: 15px 13px;
		display: flex;
		align-items: center;
		cursor: pointer;
		border: 1px solid #000;
	}
	.slide-arrow svg g{
		fill: #fff;
		stroke: #fff;
	}

	button.slide-arrow.prev-arrow.arrows-button.slick-arrow {
		position: absolute;
		top: 50%;
		right: 20px;
	}
	button.slide-arrow.next-arrow.arrows-button.slick-arrow {
		position: absolute;
		bottom: 45%;
		left:20px;
		rotate: 180deg;
	}
	.slide-arrow:hover {
		background: #fff;
		color: #000;
		border: 1px solid #fff;
	}
	.slide-arrow:hover svg g{
		fill: #000;
		stroke: #000;
	}

 

Replace Code
From this

 

<div
            id="GalleryViewer-{{ section.id }}"
            class="product__media-list{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
          >
            {%- if section.settings.product != blank -%}
              {%- if product.selected_or_first_available_variant.featured_media != null -%}
                {%- assign media = product.selected_or_first_available_variant.featured_media -%}
                <div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
                  {% render 'product-thumbnail',
                    media: media,
                    position: 'featured',
                    loop: section.settings.enable_video_looping,
                    modal_id: section.id,
                    xr_button: false,
                    media_width: media_width,
                    media_fit: section.settings.media_fit,
                    constrain_to_viewport: section.settings.constrain_to_viewport
                  %}
                </div>
              {%- endif -%}
              {%- liquid
                assign media_to_render = product.featured_media.id
                for variant in product.variants
                  assign media_to_render = media_to_render | append: variant.featured_media.id | append: ' '
                endfor
              -%}
              {%- for media in product.media -%}
                {%- if media_to_render contains media.id
                  and media.id != product.selected_or_first_available_variant.featured_media.id
                -%}
                  <div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
                    {% render 'product-thumbnail',
                      media: media,
                      position: forloop.index,
                      loop: section.settings.enable_video_looping,
                      modal_id: section.id,
                      xr_button: false,
                      media_width: media_width,
                      media_fit: section.settings.media_fit,
                      constrain_to_viewport: section.settings.constrain_to_viewport
                    %}
                  </div>
                {%- endif -%}
              {%- endfor -%}
            {%- else -%}
              <div class="product__media-item">
                <div
                  class="product-media-container global-media-settings gradient{% if section.settings.constrain_to_viewport %} constrain-height{% endif %}"
                  style="--ratio: 1.0; --preview-ratio: 1.0;"
                >
                  {{ 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              </div>
            {%- endif -%}
          </div>

 

To this

 

<div id="GalleryViewer-{{ section.id }}"
         class="product__media-list{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %} one-time">
        {%- if section.settings.product != blank -%}
            {%- for media in product.media -%}
                <div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
                    {% render 'product-thumbnail',
                    media: media,
                    position: forloop.index,
                    loop: section.settings.enable_video_looping,
                    modal_id: section.id,
                    xr_button: false,
                    media_width: media_width,
                    media_fit: section.settings.media_fit,
                    constrain_to_viewport: section.settings.constrain_to_viewport
                    %}
                </div>
            {%- endfor -%}
        {%- else -%}
            <div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
                {% render 'product-thumbnail',
                media: media,
                position: forloop.index,
                loop: section.settings.enable_video_looping,
                modal_id: section.id,
                xr_button: false,
                media_width: media_width,
                media_fit: section.settings.media_fit,
                constrain_to_viewport: section.settings.constrain_to_viewport
                %}
            </div>
        {%- endif -%}
    </div>

 

 Carousel script

 

$('.one-time').slick({
	infinite: true,
	speed: 300,
	slidesToShow: 1,
	adaptiveHeight: true,
	arrows: true,
	prevArrow: '<button class="slide-arrow prev-arrow arrows-button"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" id="arrow"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M1 7h16M11 1l6 6-6 6"></path></g></svg></button>',
	nextArrow: '<button class="slide-arrow next-arrow arrows-button"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" id="arrow"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M1 7h16M11 1l6 6-6 6"></path></g></svg> </button>'
});

 

 Now Update: product-thumbnail.liquid

  1. Search <modal-opener
  2. Copy and paste the below code before <modal-opener> Tag

 

{% if template == 'index' %}
 {%- render 'loading-spinner' -%}
    <div class="product__media media media--transparent">
      {{ media.preview_image | image_url: width: 1946 | image_tag:
        class: image_class,
        loading: lazy,
        sizes: sizes,
        widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
      }}
    </div>
    {%- endif -%}

 

This is the live link of our dev store, where we have implemented this code.

https://teamhr-store.myshopify.com/

PW: Hello

Test-Product.png

 

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at info@devmontdigital.io
Suresh_Kumar_24
Shopify Partner
8 0 0

where to write the Carousel script

 

Suresh_Kumar_24
Shopify Partner
8 0 0

Screenshot at Dec 21 10-20-42.png
Please check this showing me one above the image

 

Suresh_Kumar_24
Shopify Partner
8 0 0

Screenshot at Dec 21 11-11-50.png
Now this working properly but the variant miss match I select the black but show the white one How can fix this?? Please tell how can show the proper variant image with product so no code miss match.

 

devmont-digital
Shopify Partner
55 11 12

Hi @Suresh_Kumar_24, The issue you are facing related to the slider while changing variation options. We just fixed it and we are happy to share the updated code with you. You can also check on our dev store.

 

Steps:

  1. Just remove all previous code, that you integrated form our last reply.
  2. You need to update Two files.
    • featured-product.liquid
    • product-variant-picker.liquid

 

featured-product.liquid

  • Add CDNs of the carousel at the top of the file.
  • Replace code of div that has class GalleryViewer-{{ section.id }}
  • Add Some Styling Before JSON Schema.
  • Add carousel script Before JSON Schema.

CDNs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css" rel="stylesheet">

Style

.hide-on-all{
  display:none !important;
}
.featured-product .product__media-item:not(:first-child){
  display:block;
}
.slide-arrow{
  background: black;
  color: #fff;
  border-radius: 100px;
  z-index: 1;
  font-size: 20px;
  padding: 15px 13px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #000;
}
.slide-arrow svg g{
  fill: #fff;
  stroke: #fff;
}
button.slide-arrow.prev-arrow.arrows-button.slick-arrow {
  position: absolute;
  top: 50%;
  right: 20px;
}
button.slide-arrow.next-arrow.arrows-button.slick-arrow {
  position: absolute;
  bottom: 45%;
  left:20px;
  rotate: 180deg;
}
.slide-arrow:hover {
  background: #fff;
  color: #000;
  border: 1px solid #fff;
}
.slide-arrow:hover svg g{
  fill: #000;
  stroke: #000;
}

Replace code of div that has class GalleryViewer-{{ section.id }}

<div
id="GalleryViewer-{{ section.id }}"
class="product__media-list{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %} one-time"
>
{%- if section.settings.product != blank -%}
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign media = product.selected_or_first_available_variant.featured_media -%}
<div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
  {% render 'product-thumbnail',
  media: media,
  position: 'featured',
  loop: section.settings.enable_video_looping,
  modal_id: section.id,
  xr_button: false,
  media_width: media_width,
  media_fit: section.settings.media_fit,
  constrain_to_viewport: section.settings.constrain_to_viewport
  %}
</div>
{%- endif -%}
{%- liquid
assign media_to_render = product.featured_media.id
for variant in product.variants
assign media_to_render = media_to_render | append: variant.featured_media.id | append: ' '
endfor
-%}
{% assign vidLoop = 0 %}
{%- for media in product.media -%}
{%- if media_to_render contains media.id
and media.id != product.selected_or_first_available_variant.featured_media.id
-%}
{% assign vid = product.variants[vidLoop].id %}
<div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}" data-variant-id="{{ vid }}">
  {% render 'product-thumbnail',
  media: media,
  position: forloop.index,
  loop: section.settings.enable_video_looping,
  modal_id: section.id,
  xr_button: false,
  media_width: media_width,
  media_fit: section.settings.media_fit,
  constrain_to_viewport: section.settings.constrain_to_viewport
  %}
</div>
{% assign vidLoop = vidLoop | plus: 1 %}
{%- endif -%}
{%- endfor -%}
{%- else -%}
<div class="product__media-item">
  <div
  class="product-media-container global-media-settings gradient{% if section.settings.constrain_to_viewport %} constrain-height{% endif %}"
  style="--ratio: 1.0; --preview-ratio: 1.0;"
  >
  {{ 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{%- endif -%}
</div>

Carousel script

$('.one-time').slick({
  infinite: false,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true,
  arrows: true,
  prevArrow: '<button class="slide-arrow prev-arrow arrows-button"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" id="arrow"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M1 7h16M11 1l6 6-6 6"></path></g></svg></button>',
  nextArrow: '<button class="slide-arrow next-arrow arrows-button"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" id="arrow"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M1 7h16M11 1l6 6-6 6"></path></g></svg> </button>'
});
$('.reset-slider').click(function(){
  $('.slick-slider').slick('slickGoTo', 0);
});

Now Update: product-variant-picker.liquid

  • Search a HTML Tag <variant-radios
  • Add a class in variant-radios tag. (class:reset-slider)

This is the live link of our dev store, where we have implemented this code.

https://teamhr-store.myshopify.com/

PW: Hello

Attachments:

 

reply-two.PNG

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at info@devmontdigital.io