How to make these swatches stretch horizontally across this tab instead of vertically?

vehevince
Tourist
16 0 1

As the title states, I'm trying to figure out how to make these swatches stretch horizontally instead of vertically across. Also if there's a way to make them clickable or when I hover over them, to make them larger. Thank you. 

 

Screenshot 2023-11-03 at 9.51.23 AM.png

Replies 19 (19)

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

Hi @vehevince 

Please share that page link 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

vehevince
Tourist
16 0 1

Did that link work?

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

Please give me password protected Screenshot_2.jpg

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

vehevince
Tourist
16 0 1

awdeeb

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

Please add this code to bottom of your base.css file in Online store > Themes > Edit code. 

.product__description-container .rte img { display: inline-block; }

Screenshot 2023-11-08 at 08.41.30.png

Also, they are images, not color swatches

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

vehevince
Tourist
16 0 1

Unfortunately that didn't work. Am I pasting the code in the wrong area? I'm in base.css

 

Screenshot 2023-11-08 at 8.57.24 AM.png

Screenshot 2023-11-08 at 8.57.36 AM.png

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

You added code in @media case, please move it very bottom of your file

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

vehevince
Tourist
16 0 1

Still the same results unfortunately. What am I doing wrong? Thanks for your help by the way. 

 

Screenshot 2023-11-08 at 9.14.57 AM.png

Screenshot 2023-11-08 at 9.15.14 AM.png

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

Go to your theme.liquid file and add this code before </head> tag 

 

<style>
.product__tab .rte img { display: inline-block; }
</style>

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

vehevince
Tourist
16 0 1

Here? That didn't solve the issue and now that code is being displayed at the top of the page.

 

Screenshot 2023-11-08 at 9.25.14 AM.png

Screenshot 2023-11-08 at 9.25.50 AM.png

  

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

The code should be like this 

<style>
.product__tab .rte img { display: inline-block; }
</style>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

vehevince
Tourist
16 0 1

That worked! Thank you so much, I appreciate your help a lot and hope you have a nice day 🙂

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

You are very welcome

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

vehevince
Tourist
16 0 1

It's happening again! 

Screenshot 2023-11-16 at 10.18.30 AM.png

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

Please send me that page URL?

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

vehevince
Tourist
16 0 1

Hi sorry to bother you but have you found a solution yet?

Dan-From-Ryviu
Shopify Partner
6882 1296 1323

Hi, that page return 404 not found. 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now