Product name moving up and down on collection pages on page load (Dawn Theme)

Solved

Product name moving up and down on collection pages on page load (Dawn Theme)

bellevo
Explorer
88 0 23

Hey, I noticed a weird bug on my website yesterday. Every time I open a collection page the product names move up and down, I have tried to find a solution to this but nothing, I know there are a lot of talented people here so if anyone knows how to fix this issue I would really appreciate it. Thank you in advance!

My store: https://bellevodesign.com/collections/duvet-covers-sets

the issue: Screenshot 2024-07-13 151622.pngScreenshot 2024-07-13 151610.png

From the pictures you can see the difference, but the easiest way to see the issue in action is to load a collection page.

Accepted Solutions (2)
BSS-TekLabs
Shopify Partner
2322 688 809

This is an accepted solution.

You can try pasting this code snippet to make it only hidden in collection pages

 

.card-wrapper.product-card-wrapper variant-swatch-king {
  display: none;
}

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSS-TekLabs
Shopify Partner
2322 688 809

This is an accepted solution.

You can follow these steps

1. Open Online Store > Theme > Edit Code

2. Find and open the theme.liquid file

3. Paste the code snippet below before the closing head tag and hit save

 

<style>
  .card-wrapper.product-card-wrapper variant-swatch-king {
    display: none;
  }
</style>

 

BSSTekLabs_0-1720877162440.png

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 7 (7)

BSS-TekLabs
Shopify Partner
2322 688 809

Hi @bellevo,

You can follow these steps to fix that bug

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

variant-swatch-king {
  display: none;
}

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
bellevo
Explorer
88 0 23

Hey, that removes it but it also removes the swatches from my product page so thats not an option, thank you though!

BSS-TekLabs
Shopify Partner
2322 688 809

This is an accepted solution.

You can try pasting this code snippet to make it only hidden in collection pages

 

.card-wrapper.product-card-wrapper variant-swatch-king {
  display: none;
}

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
bellevo
Explorer
88 0 23

Perfect that fixed it on desktop view, is there a way that I can also do it for mobile?

BSS-TekLabs
Shopify Partner
2322 688 809

This is an accepted solution.

You can follow these steps

1. Open Online Store > Theme > Edit Code

2. Find and open the theme.liquid file

3. Paste the code snippet below before the closing head tag and hit save

 

<style>
  .card-wrapper.product-card-wrapper variant-swatch-king {
    display: none;
  }
</style>

 

BSSTekLabs_0-1720877162440.png

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
bellevo
Explorer
88 0 23

This works, thank you once again for your help! Have a great day!

BSS-TekLabs
Shopify Partner
2322 688 809

You're welcome!
And if you're looking to add custom free gift functionality to your store, you should definitely check out our app, Salepify! It's designed to enhance your sales strategy with features like tiered discounts, cart rewards, and seamless integration with Shopify! 🎁🚀

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now