Can I show two Featured Products side by side on desktop and mobile on homepage?

Can I show two Featured Products side by side on desktop and mobile on homepage?

lushpupco
Tourist
12 0 5

I'd like to feature two products side by side on my homepage but I've only got the option to stack one on top of the other or show the two products using Collections. Ideally, I'd use two Featured Product sections side by side, allowing the customer to quick add and buy now.

 

My site is https://www.lushpupco.com/

Replies 6 (6)

DaisyVo
Shopify Partner
2475 316 364

Hi @lushpupco 

 

Please add the product in your store and then show me, I will customize it for you to make it one line

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
lushpupco
Tourist
12 0 5

Hi Daisy,

 

I already have a Featured Product on my home page, is this suitable?

 

Thanks, Hayley

DaisyVo
Shopify Partner
2475 316 364

Hi @lushpupco 

 

You just added 1, please add 2 products and I will make the second ones in the same line with the first

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
lushpupco
Tourist
12 0 5

Thanks Daisy. I've now added a second Featured Product to the homepage, directly under the first Featured Product.

DaisyVo
Shopify Partner
2475 316 364

Hi @lushpupco 

 

It seems that you have done it already, do you need any further help? 

DaisyVo_0-1735893381440.png

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

websensepro
Shopify Partner
1790 203 247

Hi @lushpupco 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

main#MainContent section:nth-child(4) {
    width: 50% !important;
    display: inline-block;
}
main#MainContent section:nth-child(5) {
    width: 50% !important;
    display: inline-block;
}

.featured-product:not(.product--no-media)>.product__info-wrapper {
        padding: 0 2rem;
    }
}

 

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP