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

Suresh_Kumar_24 · December 20, 2023, 6:49am

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 · December 20, 2023, 1:25pm

Hello @Suresh_Kumar_24 ,

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

devmont-digital · December 20, 2023, 3:39pm

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:

featured-product.liquid
product-thumbnail.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:

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


            {%- 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 -%}
                

                  {% 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
                  %}
                

              {%- 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
                -%}
                  
                    {% 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
                    %}
                  

                {%- endif -%}
              {%- endfor -%}
            {%- else -%}
              
                

                  {{ 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
                

              

            {%- endif -%}

To this


        {%- if section.settings.product != blank -%}
            {%- for media in product.media -%}
                

                    {% 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
                    %}
                

            {%- endfor -%}
        {%- else -%}
            
                {% 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
                %}
            

        {%- endif -%}

Carousel script

$('.one-time').slick({
	infinite: true,
	speed: 300,
	slidesToShow: 1,
	adaptiveHeight: true,
	arrows: true,
	prevArrow: '',
	nextArrow: ''
});

Now Update: product-thumbnail.liquid

Search <modal-opener
Copy and paste the below code before Tag

{% if template == 'index' %}
 {%- render 'loading-spinner' -%}
    
      {{ 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'
      }}
    

    {%- 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 · December 21, 2023, 4:49am

where to write the Carousel script

Suresh_Kumar_24 · December 21, 2023, 4:52am

Please check this showing me one above the image

Suresh_Kumar_24 · December 21, 2023, 5:44am

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 · December 22, 2023, 12:40pm

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:

Just remove all previous code, that you integrated form our last reply.
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

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 }}


{%- 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 -%}

  {% 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
  %}

{%- 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 %}

  {% 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
  %}

{% assign vidLoop = vidLoop | plus: 1 %}
{%- endif -%}
{%- endfor -%}
{%- else -%}

  

  {{ 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}

{%- endif -%}

Carousel script

$('.one-time').slick({
  infinite: false,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true,
  arrows: true,
  prevArrow: '',
  nextArrow: ''
});
$('.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|1325x754](upload://kqwz2D1Fh7gC8zZlivj6M0sLGYM.png)

Topic		Replies	Views
Home Page Single Product Carousel Help Store Design design	11	81	December 7, 2024
Variant images comes first rather than featured image Store Design	8	82	March 22, 2024
Dawn 11.0.0 Product page showing featured image twice and removed variant image Store Design design , customizations , shopify-themes , troubleshooting , product-page	0	8	August 25, 2023
Show Featured Product Image Instead of Selected Variant Image, Dawn Theme, v8.0.0 Store Design design , customizations , shopify-themes	42	388	August 5, 2024
How To Show Featured Image First In Featured Product in Home Page Instead Of First Selected Variant Shopify Discussion shop-performance	11	92	September 25, 2023

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

Related topics