Copy And Paste Below Code
Follow Below Video For Step-by-step Implementations
1. Create a new section and name it "testimonials" and copy content of Section/multicolumn.liquid
2. Create a new css file in Assets and name it "section-testimonials" and copy css code from Assets/section-multicolumn.css
3. - Include section-testimonials.css into testimonial.liquid
- Add below CSS code in testimonials.liquid
_________________________________________________
<style>
.custom-testimonial-slider.multicolumn .title,
.custom-testimonial-slider.multicolumn .subtitle {
color: {{ section.settings.testimonial_title_color }}
}
.custom-testimonial-slider .multicolumn-card__info h3,
.custom-testimonial-slider .multicolumn-card__info p {
color: {{ section.settings.testimonials_text_color }};
}
.custom-testimonial-slider.multicolumn {
padding: 35px 0px;
background: {{ section.settings.testimonial_section_background }};
}
.custom-testimonial-slider .multicolumn-list__item {
background: {{ section.settings.testimonial_background }};
}
.custom-testimonial-slider .slider-buttons .slider-button.slider-button--next,
.custom-testimonial-slider .slider-buttons .slider-button.slider-button--prev {
background: {{ section.settings.arrow_bg_color }};
border-radius: 50%;
padding-left: 0;
padding-right: 0;
}
.custom-testimonial-slider .slider-buttons .slider-button.slider-button--next svg,
.custom-testimonial-slider .slider-buttons .slider-button.slider-button--prev svg {
color: {{ section.settings.arrow_color }};
}
.custom-testimonial-slider .slider.slider--mobile {
overflow-y: hidden;
column-gap: unset;
}
.custom-testimonial-slider .slider-buttons {
display: flex !important;
}
</style>
_________________________________________________
- Add a class "custom-testimonial-slider" in the parent div
- Go to ul tag and add class "slider--everywhere"
- Replace below codes with "Testimonials" labels in json setting:
t:sections.multicolumn.name
Multicolumn
t:sections.multicolumn.settings.title.label
t:sections.multicolumn.blocks.column.name
t:sections.multicolumn.presets.name
_________________________________________________
4. Remove below code which is "view more"
<div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
{%- if section.settings.button_label != blank -%}
<a
class="button button--primary"
{% if section.settings.button_link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ section.settings.button_link }}"
{% endif %}
>
{{ section.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
_________________________________________________
5. Add below code just inside the div tag of "multicolumn-card__info" remove below code and then replace with new code:
{%- if block.settings.link_label != blank -%}
<a
class="link animate-arrow"
{% if block.settings.link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.link }}"
{% endif %}
>
{{- block.settings.link_label | escape -}}
<span class="icon-wrap"> {% render 'icon-arrow' %}</span></a
>
{%- endif -%}
Replace with:
{%- if block.settings.link_label != blank -%}
<div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
<a
class="button button--primary"
{% if block.settings.link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.link }}"
{% endif %}
>
{{ block.settings.link_label | escape }}
</a>
</div>
{%- endif -%}
_________________________________________________
6. Go to "slider-buttons" and replace "medium-hide" with:
{% if section.blocks.size < 5%} large-up-hide{% endif %}{% if section.blocks.size <= 3%} medium-hide{% endif %}
_________________________________________________
7. - Paste below css code in the bottom of section-testimonials.css
/* latest CSS :: starts */
.grid--2-col-tablet.slider--everywhere .multicolumn-list__item {
margin-top: 0;
}
.multicolumn .slider--everywhere+.slider-buttons {
display: flex;
}
.slider.slider--mobile {
padding: 0;
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
.custom-testimonial-slider .slider-buttons {
position: absolute;
top: 50%;
justify-content: space-between;
width: 100%;
}
.custom-testimonial-slider .slider-buttons .slider-button.slider-button--next {
padding-left: 18px;
}
.custom-testimonial-slider .slider-buttons .slider-button.slider-button--prev {
padding-right: 18px;
}
.custom-testimonial-slider .slider-counter {
display: none;
}
.custom-testimonial-slider .slider-button .icon {
height: 1.6rem;
vertical-align: middle;
}
.custom-testimonial-slider .title-wrapper-with-link.center {
justify-content: center;
}
.custom-testimonial-slider .multicolumn-list__item {
box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
margin: 2px;
padding: 0 0 0px 0px;
}
@media only screen and (max-width: 800px) {
.custom-testimonial-slider .multicolumn-list__item {
margin: 10px !important;
padding-bottom: 10px !important;
width: calc(100% - 2rem);
}
.custom-testimonial-slider .grid__item:first-of-type {
padding-left: 5px;
}
.custom-testimonial-slider .grid__item:last-of-type {
padding-right: 5px;
}
}
/* latest CSS :: ends */
_________________________________________________
8. Add below json settings above the block:
{
"type": "color",
"id": "testimonial_section_background",
"label": "Section background",
"default": "#eaeaea"
},
{
"type": "color",
"id": "testimonial_background",
"label": "Testimonial background",
"default": "#fff"
},
{
"type": "color",
"id": "testimonial_title_color",
"label": "Title text color",
"default": "#000"
},
{
"type": "color",
"id": "testimonials_text_color",
"label": "Testimonials text color",
"default": "#000"
},
{
"type": "color",
"id": "arrow_color",
"label": "Arrow color",
"default": "#fff"
},
{
"type": "color",
"id": "arrow_bg_color",
"label": "Arrow background",
"default": "#000"
}
Complete Article on How to add Shopify dawn theme testimonials slider
In the digital age, building trust with your online customers is paramount. One effective way to establish credibility is by showcasing genuine testimonials from satisfied clients. If you’re using the Shopify DAWN theme, incorporating a testimonials slider can be a game-changer for your store. This feature not only adds authenticity but also provides potential buyers with social proof. In this guide, we’ll walk you through the process of seamlessly integrating a testimonials slider into your Shopify DAWN theme.
Step-by-step Implementation
Step 1: Access Your Shopify Admin
Begin by logging into your Shopify admin dashboard using your credentials. This is where you’ll manage and customize various aspects of your online store.
Step 2: Navigate to the Theme Customizer
Once logged in, click on “Online Store” and then select “Themes.” Locate and click on the “Customize” button for the DAWN theme. This action will launch the theme customization interface.
Step 3: Add a Testimonials Slider Section
In the theme customizer, find the “Sections” tab. Here, you can add different sections to your store’s homepage. Click on “Add section” and look for the option that enables you to incorporate a testimonials slider.
Step 4: Configure Slider Settings
After adding the testimonials slider section, you’ll be able to fine-tune its settings. Adjust the transition style, timing, and other visual elements to align with your store’s aesthetic. Explore any additional customization options provided by the DAWN theme.
Step 5: Gather Testimonials
Now, gather authentic testimonials from your customers. This could include their feedback on products, services, or their overall shopping experience. Ensure that these testimonials are genuine and provide value to potential buyers.
Step 6: Input Testimonials
Input the collected testimonials into the slider. You might have fields for the customer’s name, photo, feedback, and possibly a link to their social media profile or website. The DAWN theme should make this input process user-friendly.
Step 7: Customize Slide Appearance
To maintain a cohesive look, customize the appearance of the testimonial slides. Adjust text colors, font styles, and background colors to match your store’s branding.
Step 8: Preview and Publish
Before making your changes live, take advantage of the preview feature to see how the testimonials slider looks on your homepage. Once satisfied, click the “Publish” button to make the testimonials slider visible to your audience.
Step 9: Mobile Responsiveness
Test the testimonials slider’s performance on different devices, ensuring it looks and functions flawlessly on desktops, tablets, and smartphones.
Conclusion
By following these steps, you can seamlessly integrate a testimonials slider into your Shopify DAWN theme. This feature will not only enhance your store’s credibility but also provide potential customers with real-life feedback from satisfied clients. Remember to regularly update the testimonials to keep the content fresh and reflective of your excellent customer experiences. With the DAWN theme’s testimonials slider, you’ll establish a strong rapport with your audience and inspire confidence in their purchasing decisions.
Read more blogs on mrdigitals.com