Hello everyone, I have a problem with banners in Shopify,
we have got like 5 banners we want to upload to the store.
All images have the same size and resolution (1800 x 1000) pixel (300) DPI, plus being optimized for the web using photoshop with export for web, I tried to change the quality on photoshop from 40 to 60. The result is the same, also tried to adjust height and width values in the theme preview hoping it will solve the problem. Still, it did not, all the images look perfect on online hosting websites, any desktop, and also in Shopify files Cdn preview, but when selecting them in theme things always look bad.
please help!
theme name and version:
Empire version 6.0.0
Link to preview website: Click Here!
Thanks for your response @KetanKumar , here is the code!
{% liquid
assign block_slide_image = block.settings.background_image
assign block_slide_image_mobile = block.settings.mobile_background_image
assign block_slide_title = block.settings.title | escape
assign block_subheading = block.settings.text | escape
assign block_button_label = block.settings.button_one_label | escape
assign block_button_link = block.settings.button_one_link
assign block_button_label_2 = block.settings.button_two_label | escape
assign block_button_link_2 = block.settings.button_two_link
assign block_image_position = block.settings.image_position
assign block_text_alignment = block.settings.text_alignment
assign block_text_color = block.settings.color
assign block_background_link = block.settings.link
assign block_crop_images = 'center'
if section.settings.slideshow_height == 'original'
assign block_crop_images = false
endif
if block.settings.show_overlay
assign block_overlay_color = block.settings.overlay_color
assign block_overlay_opacity = block.settings.overlay_opacity
endif
assign block_button_1_class = 'slideshow-slide__button--' | append: block.settings.button_one_style
assign block_button_2_class = 'slideshow-slide__button--' | append: block.settings.button_two_style
%}
{% comment %}Inject @pixelunion/pxs-slideshow/slideshow-slide begin{% endcomment %}
{%- comment -%}
@param block_index {Number}
The 0-based index of the current block
@param block_slide_image {Image}
The image for the background of the slide
@param block_slide_image_mobile {Image}
The mobile image for the background of the slide
@param block_slide_title {String}
This is the title of the slide and will be inside ## tags.
@param block_subheading {String}
This is the content of the slide, shown below the title.
@param block_button_label {String}
The label of the tag that will be below the subheading.
@param block_button_link {String}
The link that will be used as the href on the tag of the first link.
@param block_button_label_2 {String}
The label on the second link in the slide.
@param block_button_link_2 {String}
The link used for the href of the second link in the slide.
@param block_preheading {String}
This will appear above the heading in a
tag.
@param block_image_position {String}
Adds a position class to the slide's image in the format of slideshow-slide__image-wrapper--position-{ image_position }. Options should be center, top, bottom, left, or right.
@param block_text_alignment {String}
The value of this property will be appended a class on the slide's content in the format slideshow-slide__content--text-{ text_alignment }.
@param block_text_color
This will add a text color style to the slide as well as a CSS variable called --slide-text-color on the section that will change when the slide changes.
@param block_background_link {String}
If this is provided, the entire slide will be wrapped in an tag to allow the entire slide to be clickable.
@param block_overlay_color {Color}
If this is not transparent (and the overlay_opacity is greater than 0) and overlay element will be present on the slide with a background-color and opacity style added to it.
@param block_overlay_opacity {Number}
This is the opacity of the overlay, which is applied as an inline style.
@param block_overlay_style {String}
If this is provided and the overlay_opacity is greater than 0, a class will be added to the overlay element in the format slideshow-slide__overlay--{ overlay_style }.
@param block_crop_images {String}
The type of cropping to use of 'center', 'top', 'bottom', 'left', 'right', or false
@param block_class {String}
Any extra classes to be added to the slide
@param block_button_1_class
Any classes to be added to the first button on the slide
@param block_button_2_class
Any classes to be added to the second button on the slide
{%- endcomment -%}
{%- assign placeholder_number = block_index | modulo: 2 | plus: 1 -%}
{%- assign placeholder = 'lifestyle-' | append: placeholder_number -%}
{%- assign slide_number = block_index | plus: 1 -%}
{%- assign overlay_opacity = 0 -%}
{%- if block_overlay_opacity > 0 -%}
{%- assign overlay_opacity = block_overlay_opacity | times: 0.01 -%}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_slide_image != blank -%}
{%
render 'rimg',
img: block_slide_image,
class: 'slideshow-slide__image slideshow-slide__image--desktop',
size: '2000x',
crop: block_crop_images,
lazy: true,
canvas: true,
%}
{%- else -%}
{{ placeholder | placeholder_svg_tag: 'slideshow-slide__image slideshow-slide__placeholder' }}
{%- endif -%}
{%- if block_slide_image_mobile != blank -%}
{%
render 'rimg',
img: block_slide_image_mobile,
class: 'slideshow-slide__image slideshow-slide__image--mobile',
size: '800x',
crop: block_crop_images,
lazy: true,
canvas: true,
%}
{%- endif -%}
{%- if block_overlay_opacity != 0 and block_overlay_color != 'rgba(0,0,0,0)' -%}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_preheading != blank -%}
{{ block_preheading }}
{%- endif -%}
{%- if block_slide_title != blank -%}
##
{{ block_slide_title }}
{%- endif -%}
{%- if block_subheading != blank -%}
{{ block_subheading }}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_button_label != blank -%}
{% if block_button_link != blank %}
{{ block_button_label }}
{%- if block_button_link != blank -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{%- if block_button_label_2 != blank -%}
{% if block_button_link_2 != blank %}
{{ block_button_label_2 }}
{%- if block_button_link_2 != blank -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{% comment %}Inject @pixelunion/pxs-slideshow/slideshow-slide end{% endcomment %}
{% liquid
assign block_slide_image = block.settings.background_image
assign block_slide_image_mobile = block.settings.mobile_background_image
assign block_slide_title = block.settings.title | escape
assign block_subheading = block.settings.text | escape
assign block_button_label = block.settings.button_one_label | escape
assign block_button_link = block.settings.button_one_link
assign block_button_label_2 = block.settings.button_two_label | escape
assign block_button_link_2 = block.settings.button_two_link
assign block_image_position = block.settings.image_position
assign block_text_alignment = block.settings.text_alignment
assign block_text_color = block.settings.color
assign block_background_link = block.settings.link
assign block_crop_images = 'center'
if section.settings.slideshow_height == 'original'
assign block_crop_images = false
endif
if block.settings.show_overlay
assign block_overlay_color = block.settings.overlay_color
assign block_overlay_opacity = block.settings.overlay_opacity
endif
assign block_button_1_class = 'slideshow-slide__button--' | append: block.settings.button_one_style
assign block_button_2_class = 'slideshow-slide__button--' | append: block.settings.button_two_style
%}
{% comment %}Inject @pixelunion/pxs-slideshow/slideshow-slide begin{% endcomment %}
{%- comment -%}
@param block_index {Number}
The 0-based index of the current block
@param block_slide_image {Image}
The image for the background of the slide
@param block_slide_image_mobile {Image}
The mobile image for the background of the slide
@param block_slide_title {String}
This is the title of the slide and will be inside ## tags.
@param block_subheading {String}
This is the content of the slide, shown below the title.
@param block_button_label {String}
The label of the tag that will be below the subheading.
@param block_button_link {String}
The link that will be used as the href on the tag of the first link.
@param block_button_label_2 {String}
The label on the second link in the slide.
@param block_button_link_2 {String}
The link used for the href of the second link in the slide.
@param block_preheading {String}
This will appear above the heading in a
tag.
@param block_image_position {String}
Adds a position class to the slide's image in the format of slideshow-slide__image-wrapper--position-{ image_position }. Options should be center, top, bottom, left, or right.
@param block_text_alignment {String}
The value of this property will be appended a class on the slide's content in the format slideshow-slide__content--text-{ text_alignment }.
@param block_text_color
This will add a text color style to the slide as well as a CSS variable called --slide-text-color on the section that will change when the slide changes.
@param block_background_link {String}
If this is provided, the entire slide will be wrapped in an tag to allow the entire slide to be clickable.
@param block_overlay_color {Color}
If this is not transparent (and the overlay_opacity is greater than 0) and overlay element will be present on the slide with a background-color and opacity style added to it.
@param block_overlay_opacity {Number}
This is the opacity of the overlay, which is applied as an inline style.
@param block_overlay_style {String}
If this is provided and the overlay_opacity is greater than 0, a class will be added to the overlay element in the format slideshow-slide__overlay--{ overlay_style }.
@param block_crop_images {String}
The type of cropping to use of 'center', 'top', 'bottom', 'left', 'right', or false
@param block_class {String}
Any extra classes to be added to the slide
@param block_button_1_class
Any classes to be added to the first button on the slide
@param block_button_2_class
Any classes to be added to the second button on the slide
{%- endcomment -%}
{%- assign placeholder_number = block_index | modulo: 2 | plus: 1 -%}
{%- assign placeholder = 'lifestyle-' | append: placeholder_number -%}
{%- assign slide_number = block_index | plus: 1 -%}
{%- assign overlay_opacity = 0 -%}
{%- if block_overlay_opacity > 0 -%}
{%- assign overlay_opacity = block_overlay_opacity | times: 0.01 -%}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_slide_image != blank -%}
{%
render 'rimg',
img: block_slide_image,
class: 'slideshow-slide__image slideshow-slide__image--desktop',
size: 'master',
crop: block_crop_images,
lazy: true,
canvas: true,
%}
{%- else -%}
{{ placeholder | placeholder_svg_tag: 'slideshow-slide__image slideshow-slide__placeholder' }}
{%- endif -%}
{%- if block_slide_image_mobile != blank -%}
{%
render 'rimg',
img: block_slide_image_mobile,
class: 'slideshow-slide__image slideshow-slide__image--mobile',
size: 'master',
crop: block_crop_images,
lazy: true,
canvas: true,
%}
{%- endif -%}
{%- if block_overlay_opacity != 0 and block_overlay_color != 'rgba(0,0,0,0)' -%}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_preheading != blank -%}
{{ block_preheading }}
{%- endif -%}
{%- if block_slide_title != blank -%}
##
{{ block_slide_title }}
{%- endif -%}
{%- if block_subheading != blank -%}
{{ block_subheading }}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_button_label != blank -%}
{% if block_button_link != blank %}
{{ block_button_label }}
{%- if block_button_link != blank -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{%- if block_button_label_2 != blank -%}
{% if block_button_link_2 != blank %}
{{ block_button_label_2 }}
{%- if block_button_link_2 != blank -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{% comment %}Inject @pixelunion/pxs-slideshow/slideshow-slide end{% endcomment %}
Thanks for the code @KetanKumar , I paste it in my theme but still, the images lost a lot of quality,
you can check the 2 photos I provided down there so you can have a clear idea of the original quality I am talking about.
I don’t understand @KetanKumar , I need the same quality you send me in the link, how to show this on my website since the original photo when uploaded to Shopify was the same quality in the link.
Thanks for your response @KetanKumar , I didn’t find a section named “rimg” in my snippets file, since the only file that exists in this section is " slideshow-slide.liquid",
so I accessed " slideshow-slide.liquid" and searched for “rimg” and found this piece of code below
do you mean to send the previous code in the previous massage as a zip file?
if yes here is the code as a rar file in the attachments below @KetanKumar
How To Download Shopify Themes
Open your Shopify admin panel and click on Online Store and then go to Themes.
Click on the Actions button, and from the drop-down click on Download theme file.
Click on Send Email button on the pop-up box which will appear once you click download theme file.
