BLACK SCREEN BEFORE PRODUCT IMAGE LOADS ON MOBILE

ypcollective · ‎04-04-2024

On mobile only, when a collection page is loading, or any page that has product images, the images start with a black screen before they load. I have tried many things such as lazy loading etc.

I want there to be no black screen before the image loads, how do I change this or remove this! it lasta for around a second before the correct image pops up.

For reference, ypcollective.com on the mobile version to replicate this issue!

THANKS

Dan-From-Ryviu · ‎04-04-2024

Hi @ypcollective

Please go to your Online Store > Themes > Edit code > open base.css file, find this part of the code in image below, change the color in background.

Best Regards,

Dan from Ryviu

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎04-04-2024

Please change from background: #000; to background: transparent;

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎04-04-2024

So the issue caused by your internet.

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎04-04-2024

Please add this code to theme.liquid file, after <head>

<style>
.product-form__buttons {
    display: flex;
    flex-direction: column;
    position: relative;
}
.product-form__buttons a.product-form__submit {
    order: 3;
    margin-top: 1rem;
}
.product-form__buttons .shopify-payment-button {
    order: 2
}
.product-form__buttons .shopify-payment-button__more-options {
    position: absolute;
    bottom: -2.5rem;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎04-04-2024

You can update that code to this

<button style="background: #000; color: #fff;"
id = "ProductSubmitButton-{{ section_id }}"
type="submit"
name="add"
class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
disabled
{% endif %}
>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎04-04-2024

Hi @ypcollective

Please go to your Online Store > Themes > Edit code > open base.css file, find this part of the code in image below, change the color in background.

Best Regards,

Dan from Ryviu

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

Thank you! now is there a way to completely remove this temporary buffer when the images are loading?

Dan-From-Ryviu · ‎04-04-2024

Please change from background: #000; to background: transparent;

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

Thank you so much! There is another problem that now occurred, and it never happened until i changed the background color.

Dan-From-Ryviu · ‎04-04-2024

Whats happen?

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

as you can see here , on mobile the images now sometimes show this question mark block.

Most importantly, is it possible that the entire page and all the images on it load before it lets me see the images? because there is always now just a waiting period until the images load with a white screen now instead of black.

ypcollective · ‎04-04-2024

i fixed this question mark thing, just need help with the second part

Dan-From-Ryviu · ‎04-04-2024

Please disable the lazy loading of images of your store

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

Lazy loading is already off however that did not fix the issue.

Dan-From-Ryviu · ‎04-04-2024

So the issue caused by your internet.

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

would you mind answering more questions? I need help re-ordering my buy buttons, in buy-buttons.liquid

Dan-From-Ryviu · ‎04-04-2024

What is your question?

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

I want to switch the places of the 2nd and 3rd buy buttons on my PDP. Example: https://ypcollective.com/products/zipper-change-wristlet-wallet-pouch-sky-blueypcoll

Dan-From-Ryviu · ‎04-04-2024

Like this?

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

yes!

Dan-From-Ryviu · ‎04-04-2024

Please add this code to theme.liquid file, after <head>

<style>
.product-form__buttons {
    display: flex;
    flex-direction: column;
    position: relative;
}
.product-form__buttons a.product-form__submit {
    order: 3;
    margin-top: 1rem;
}
.product-form__buttons .shopify-payment-button {
    order: 2
}
.product-form__buttons .shopify-payment-button__more-options {
    position: absolute;
    bottom: -2.5rem;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

Wow! thank you so much. You are really helping me get through these issues. Couldnt have asked for anything better!

I also need to change the add to cart button to be black. I found this code but dont know how to change the button to black.

Dan-From-Ryviu · ‎04-04-2024

You can update that code to this

<button style="background: #000; color: #fff;"
id = "ProductSubmitButton-{{ section_id }}"
type="submit"
name="add"
class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
disabled
{% endif %}
>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

Youre the best! Shall I give you a break now? I have more questions😘

Dan-From-Ryviu · ‎04-04-2024

Dont worry. Give me your questions

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

QUESTION 1

On the PDP page, there is a label that says "ALL SALES FINAL". it is in the main-product.liquid

</div>
{%- endif -%}
{% endunless %}
<p><strong><u>ALL SALES FINAL.</u></strong></p>
{%- when 'inventory' -%}
{%- if product.available == true -%}
<p
class="product__inventory no-js-hidden{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
{{ block.shopify_attributes }}
id="Inventory-{{ section.id }}"
role="status"
>

How do i change the placement of this label so it is AFTER the description, not before. And how do i delete this without an error?

ypcollective · ‎04-04-2024

i know how to remove it, i just dont know how to change the placement so its after the description

Dan-From-Ryviu · ‎04-04-2024

In Online Store > Themes > Customize > Products > Default product, it allows you drag and drop block, just drag it after Description block.

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

no, this is embedded in the code

Dan-From-Ryviu · ‎04-04-2024

Ahh, please open main-product.liquid file, find {%- when 'description' -%}, add this code to this

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

I removed the all sales are final label, how do I make it a size label?

ypcollective · ‎04-04-2024

QUESTION 2: On the collection page, for example ypcollective.com/collections/chrome-hearts, if you go on mobile the name of the vendors are not aligned. I used justify code to justify the flex-end !important to align the prices at all times, however this messed up the alignment of the rest of the flex model, specificallty the flex start.

Dan-From-Ryviu · ‎04-04-2024

Could you explain more about your question?

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ypcollective · ‎04-04-2024

ALL SALES ARE FINAL shows up on every product that is listed, automatically. It cannot be edited unless through the code. Instead of having it say all sales are final, i rather it just be diaplaying the size of the item

ypcollective · ‎04-04-2024

you are so helpful. thank you

ypcollective · ‎04-04-2024

QUESTION 3:

Images get cut off on mobile,

BLACK SCREEN BEFORE PRODUCT IMAGE LOADS ON MOBILE

BLACK SCREEN BEFORE PRODUCT IMAGE LOADS ON MOBILE

Community Blog Articles