How can I add a product image slider to my Dawn theme store?

Store Design
1

Can anyone help me to have a product image slider. My store theme is Dawn.

1 Like
2

@Abtiw4474

can you please share store url?

3

welcome to shopify community.

please share your store URL and if your store is password protected then please share your password also.

Thank you .

4

alldesignera.com

1 Like
5

@Abtiw4474

thanks for URL if you have able to code try this code

https://codepen.io/Turqueso/pen/rNNzpwb

if not familiar to code don’t change the theme default you have to ask the theme support team, Shopify Expert or me

6

Where should i put this code??

7

@KetanKumar

1 Like
8

@Abtiw4474

its change product file css and js code all code changes on backend

9

@Abtiw4474 This has been a question I’ve seen so many others in the community ask since the Dawn theme has launched. So far this has been the closest solution I’ve seen. Hope this is able to help point you in the right direction

This guide was provided by user @shadowsfall118

I have achieved adding a slider to the product page images by using the slick slider.

Notes:

  • This requires adding code and not editing any of the existing.
  • The click to enlarge still works from the existing code.
  • Works on mobile

There is 4 files to edit:

  1. main-product.liquid
  2. section-main-product.css
  3. header.liquid
  4. footer.liquid

Step 1: For main-product.liquid add the following and comment / remove the “” start and end tags. Add the below code before the tag we removed or commented out.


{%- for media in product.media -%}


{%- unless 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: true %}

    • {%- endunless -%}


    {%- endfor -%}

    Step 2: For section-main-product.css add the following to the bottom of the file



    .slider {
    width: 80%;
    margin-left:auto;
    margin-right:auto;
    }



    .slick-slide {
    margin: 0px 20px;
    }



    .slick-slide img {
    width: 100%;
    }



    .slick-prev:before,
    .slick-next:before {
    color: black;
    }




    .slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
    }

    .slick-active {
    opacity: .5;
    }



    .slick-current {
    opacity: 1;
    }

    Step 3: For header.liquid add the following just after {%- endif -%} on line 9

    Step 4: For footer.liquid add the following to the end of the file
    10

    How would you go about implementing something like this? Im familiar with coding html/css and js but i just don’t understand how I would make it work for a shopify since they use the liquid templating language?

    11

    @made4Uo I was just testing my website after adding both the product slider and the collection slider. I noticed that for one of my products, the image sizes are different. I only have 3 images, so there is no slider. This has made the other images to display on top of the main image. Attaching the screenshot. Could you please let me know how/where I can edit the code so that the image list placement adjusts per the largest image size?

    PosanaShop_0-1633225937904.png
    PosanaShop_0-1633225937904.png1355×765 308 KB

    12

    Your image height is more than 100%. I will take a look if I can change the image observer to initialize

    13

    @ KetanKumar I used your code but didn’t work for me and also I didn’t see any error in the console.

    1 Like
    14

    @Sajeel

    yes please share store url

    15

    @Sajeel

    something is wrong code please check again

    16

    @KetanKumar here is the code

    {%- assign first_3d_model = product.media | where: “media_type”, “model” | first -%}

    {% assign current_variant = product.selected_or_first_available_variant %}
    {% assign featured_media = current_variant.featured_media | default: product.featured_media %}

    {% assign stacked = false %}
    {% if section.settings.media_layout == “stacked” %}{% assign stacked = true %}{% endif %}
    {%- assign first_media = true -%}

    {%- assign enable_image_zoom = section.settings.enable_image_zoom -%} {% assign height = 850 %} {% assign width = 575 %} {%- assign first_3d_model = product.media | where: "media_type", "model" | first -%} {% comment %} Display product images {% endcomment %} {%- for media in product.media -%} {%- assign featured = false -%} {%- if media == featured_media -%} {%- assign featured = true -%} {%- endif -%}

    {%- capture thumbnail_alt -%}
    {%- if media.media_type == ‘video’ or media.media_type == ‘external_video’ -%}
    {{ ‘products.product.video_thumbnail_alt’ | t: imageAlt: media.alt | escape }}
    {%- elsif media.media_type == ‘model’ -%}
    {{ ‘products.product.model_thumbnail_alt’ | t: imageAlt: media.alt | escape }}
    {%- else -%}
    {{ ‘products.product.gallery_thumbnail_alt’ | t: imageAlt: media.alt | escape }}
    {%- endif -%}
    {%- endcapture -%}

    {%- include 'media' with media, enable_image_zoom: enable_image_zoom, stacked: stacked, featured: featured, width: width, height: height -%}

    {% comment %}
    Display a “View in your space” button (multi) for the first visible media and each individual model.
    Stacked layout only.
    {% endcomment %}
    {% if stacked %}
    {%- assign xr_id = false -%}
    {%- if first_media and first_3d_model -%}
    {%- assign xr_id = first_3d_model.id -%}
    {%- elsif media.media_type == ‘model’ -%}
    {%- assign xr_id = media.id -%}
    {%- endif -%}

    {%- if xr_id -%}
    {%- include ‘xr-button’ with model_id: xr_id, multi: true -%}
    {%- endif -%}
    {%- assign first_media = false -%}
    {% endif %}

    {%- endfor -%}

    {% comment %}
    Display a “View in your space” button (single).
    Stacked/Thumbnails layout (mobile)
    Thumbnail layout only (desktop)
    {% endcomment %}
    {%- if first_3d_model -%}
    {%- include ‘xr-button’ with model_id: first_3d_model.id, multi: false -%}
    {%- endif -%}

    {% unless stacked %}

    {% endunless %}
    {% if section.settings.product_vendor_enable %}

    {{ product.vendor }}

    {% endif %}

    {% comment %}

    {{ product.title }}

    {%endcomment%}
    {% assign current_variant = product.selected_or_first_available_variant %}
    {{ current_variant.barcode }}

    {% comment %} Optionally show the 'compare at' or original price of the product. {% endcomment %} {% include 'product-price', variant: current_variant %}

    {%- if cart.taxes_included or shop.shipping_policy.body != blank -%}

    {%- if cart.taxes_included -%} {{ 'products.general.include_taxes' | t }} {%- endif -%} {%- if shop.shipping_policy.body != blank -%} {{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%}
    {%- endif -%}

    {% capture “form_classes” %}
    product-single__form{% if product.has_only_default_variant %} product-single__form–no-variants{% endif %}
    {%- endcapture %}

    {% capture “form_id” %}AddToCartForm–{{ section.id }}{%- endcapture %}

    {% form ‘product’, product, class:form_classes, id:form_id, data-product-form: ‘’ %}
    {{ form | payment_terms }}
    {% unless product.has_only_default_variant %}
    {% for option in product.options_with_values %}

    {{ option.name | escape }} {% if section.settings.product_selector == 'radio' %} {% assign option_index = forloop.index %} {% for value in option.values %} {% assign variant_label_state = true %} {% if product.options.size == 1 %} {% unless product.variants[forloop.index0].available %} {% assign variant_label_state = false %} {% endunless %} {% endif %} {{ value | escape }} {% endfor %} {% else %} {% endif %}
    {% endfor %} {% endunless %}

    {% if section.settings.quantity_enabled %}

    {{ 'products.product.quantity' | t }}
    {% endif %}
    {% if current_variant.available %} {{ 'products.product.add_to_cart' | t }} {% else %} {{ 'products.product.sold_out' | t }} {% endif %} {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %}
    {% endform %}
    {{ product.description }}

    {% if section.settings.social_sharing_products %}
    {% include ‘social-sharing’, share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
    {% endif %}

    {% unless product == empty %} {% endunless %}
    17

    @KetanKumar yes maybe there is a mistake in pasting the code but the console is not showing any error

    18

    @PosanaShop

    Please update your code. Transform you Dawn Theme in Debut theme product page for free.

    Enjoy this features:
    Product slider working.
    Zoom feature working.
    Variant buttons connected to the large image and the product slider.
    Resize your thumbnail images.
    No more massive images in the product page.

    Check the code here for free. No app needed. Preview the video

    19

    Hi,

    I just made a vertical carousel for the update theme version of Dawn theme. No app or external library needed. Check the video for more info

    20

    Hi I solved it following this video: https://www.youtube.com/watch?v=YQUhEsHV-hQ