How can I display the first image in a featured product slider?

[Suresh_Kumar_24]

         
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.

[iffikhan30]

Hello @Suresh_Kumar_24 ,

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

[devmont-digital]

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

[Suresh_Kumar_24]

where to write the Carousel script

[Suresh_Kumar_24]

Please check this showing me one above the image

[Suresh_Kumar_24]

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]

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: