How can I modify a Java product slider to show price comparison and center text?

[BELINN]

Hi I am using Brooklyn theme

URL-https://berlinnworld.myshopify.com/

password- 1234561

I have copied code of java product slider

It is working fine only two changes required

1. I want to add price comparison with the original price

like below

2. also align the text to center of image

Regards

[dmwwebartisan]

@BELINN

Please add the following code at the bottom of your assets/theme.scss.liquid file.

#shopify-section-162279148164825fdd .flickity-slider p {text-align: center;}
#shopify-section-162279148164825fdd.h4, h4 {text-align: center;}

Hope this works.

Thanks!

[BELINN]

@dmwwebartisan

alignment is centered now.

But I also want to add price comparison in the file

like below

Below is the Section- liquid code of this slider

Please suggest where to add price comparison code

{%- capture flickity_options -%}
{
“prevNextButtons”: true,
“pageDots”: false,
“contain”: true,
“cellAlign”: “left”,
“groupCells”: true,
“arrowShape”: {“x0”: 20, “x1”: 60, “y1”: 40, “x2”: 60, “y2”: 35, “x3”: 25}
}
{%- endcapture -%}

{% if section.settings.title != blank %}

{{ section.settings.title | escape }}

{% endif %}

{%- assign collection = collections[section.settings.collection] -%}
{%- assign product_limit = section.settings.product_count -%}

{% for product in collection.products limit: product_limit %}

{{ product.title }}

{{ product.price | money }}

{% endfor %}

.featured-collection-slider{ padding-left: 55px; padding-right: 55px; max-width: 1200px; margin: 0 auto; } .featured-collection-slider .carousel-cell{ width:33%; padding: 0 15px; display: block; } .flickity-button:disabled{ pointer-events: all!important; } @media screen and (max-width: 920px){ .featured-collection-slider{ padding-left: 15px; padding-right: 15px; } .featured-collection-slider .carousel-cell{ width:50%; } } @media screen and (max-width: 767px){ .featured-collection-slider .carousel-cell{ width:100%; } }

{% schema %}
{
“name”: “Collection Slider”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Featured Collection”
},
{
“type”: “collection”,
“id”: “collection”,
“label”: “Collection”
},
{
“type”: “range”,
“id”: “product_count”,
“min”: 4,
“max”: 16,
“label”: “Number of products to display”,
“default”: 4
}
],
“presets”: [
{
“category”: “Collection”,
“name”: “Collection Slider”,
“settings”: {}
}
]
}
{% endschema %}

@dmwwebartisan

[dmwwebartisan]

@BELINN

Please find this code

{{ product.price | money }}

after add this code

 {{ product.compare_at_price_min | money_without_trailing_zeros }} 

[BELINN]

@dmwwebartisan

It is showing price comparison now, but alignment is not correct

I want it like below

1. both Compare price and price with bigger fonts and in same line

2. Price with red color

Thanks in advance

@dmwwebartisan

[dmwwebartisan]

@BELINN

Please backup your file code and add this code

%- capture flickity_options -%}
{
"prevNextButtons": true,
"pageDots": false,
"contain": true,
"cellAlign": "left",
"groupCells": true,
"arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
}
{%- endcapture -%}

{% if section.settings.title != blank %}

## {{ section.settings.title | escape }}

{% endif %}

{%- assign collection = collections[section.settings.collection] -%}
{%- assign product_limit = section.settings.product_count -%}

{% for product in collection.products limit: product_limit %}

#### {{ product.title }}

  {{ product.compare_at_price_min | money_without_trailing_zeros }} 
 {{ product.price | money }}

{% endfor %}

{% schema %}
{
"name": "Collection Slider",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured Collection"
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "range",
"id": "product_count",
"min": 4,
"max": 16,
"label": "Number of products to display",
"default": 4
}
],
"presets": [
{
"category": "Collection",
"name": "Collection Slider",
"settings": {}
}
]
}
{% endschema %}

[BELINN]

@dmwwebartisan Only price text is not centered

Rest is Ok

Thanks in advance

@dmwwebartisan

[dmwwebartisan]

@BELINN

Please add the following code at the bottom of your assets/theme.scss.liquid file.

#shopify-section-162279148164825fdd .price-container {text-align: center;}

Thanks!

[dmwwebartisan]

@BELINN

If helpful then please Like and Accept Solution

[BELINN]

Thank You @dmwwebartisan

It Works Great!!!

Please check private message.

Regards

@dmwwebartisan