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

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
9537 1918 1954

Hi @vehevince 

Please share that page link 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

vehevince
Tourist
16 0 1

Did that link work?

Dan-From-Ryviu
Shopify Partner
9537 1918 1954

Please give me password protected Screenshot_2.jpg

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

vehevince
Tourist
16 0 1

awdeeb

Dan-From-Ryviu
Shopify Partner
9537 1918 1954

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 and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
9537 1918 1954

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

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
9537 1918 1954

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

 

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

 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
9537 1918 1954

The code should be like this 

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

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
9537 1918 1954

You are very welcome

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
9537 1918 1954

Please send me that page URL?

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
9537 1918 1954

Hi, that page return 404 not found. 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.