Jump to content

Customize Product Block

Recommended Posts

Hi there

I have a problem that is making me go nuts lol. So I'm about to launch my first service product on my site. I have created a product page (unlinked).. Then on a regular site I placed a product block with my product. I did this because I couldnt design the product page as I wanted...
All good. However I really dislike the design of my product block that I insereted... Right now my site looks like this:

grafik.thumb.png.93c171b329f9214b73fcdc8e0e9dac12.png

 

But I really want the product to appear as on my product page, which is like this:

grafik.thumb.png.72ac31b424c43486ca0274abc85ed78d.png

 

Is there a code I could use?

THANKS

Link to comment
  • Replies 10
  • Created
  • Last Reply
11 hours ago, Sandadelsol said:

Yes I can but the page shouldnt be visible yet because it still needs adjustment. Does ist have to be open? This is the link,: https://www.mindfulyou.ch/coming-home

404 page. Can you check url again?

image.thumb.png.acbda41a48b1168cdf09dae330473cf8.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
13 minutes ago, Sandadelsol said:

ok, try again, same url!

You can inscrease product column width first? then add this to Coming Home Page Settings > Advanced > Header

<style>
  @media screen and (min-width:641px) {
    div#block-yui_3_17_2_1_1586686622490_11602 .product-block {
      display: flex;
  	}
    div#block-yui_3_17_2_1_1586686622490_11602 .image-container {
   	 margin-right: 20px;
	}
  }
</style>

image.thumb.png.504a9c64f2511bcfbb8bcef0fcec697a.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
53 minutes ago, tuanphan said:

You can inscrease product column width first? then add this to Coming Home Page Settings > Advanced > Header


<style>
  @media screen and (min-width:641px) {
    div#block-yui_3_17_2_1_1586686622490_11602 .product-block {
      display: flex;
  	}
    div#block-yui_3_17_2_1_1586686622490_11602 .image-container {
   	 margin-right: 20px;
	}
  }
</style>

image.thumb.png.504a9c64f2511bcfbb8bcef0fcec697a.png

Tuanphan thank you so so much!! And one last question: When I go on my product page my header picture is not showing at all although I have inserted one in the settingss..
This is the url: https://www.mindfulyou.ch/coming-home-product/coming-home-retreat

Link to comment
1 hour ago, Sandadelsol said:

Tuanphan thank you so so much!! And one last question: When I go on my product page my header picture is not showing at all although I have inserted one in the settingss..
This is the url: https://www.mindfulyou.ch/coming-home-product/coming-home-retreat

Which header picture? Can you take screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
17 hours ago, Sandadelsol said:

hello :)?

I am not a Squarespace employee, the answer here is to help the community, so I can only answer when I have free time.

Saved your question. I will check soon.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.