Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding an image to custom product form


PhoebeT42

Question

10 answers to this question

Recommended Posts

  • 1

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  /*
  
    begin product form image add
    
    Version     : 0.1d0
    
    SS Version  : 7.1
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    [data-form-id="5f8f0e40d03aaf4e9a88476d"]::before
    
      {
      
        background-image : url( https://images.squarespace-cdn.com/content/v1/5e27638ae410453315a6e06d/1603938096141-627PII0Z3UEWX8XOFPDO/TypesetForTwo-ChristmasYall+back1.jpg );
        background-position : center;
        background-repeat : no-repeat;
        background-size: contain;
        content : '';
        display : block;
        height : 300px;
        margin-bottom : 24px;
        
        }
        
    /* end product form image add */
    
  </style>

This code is specific to the poster's need.

You'll want to replace the example background image url with your image url. Also you may want to change the height value.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

When you say custom product form, is this a form that is added to a product through the product editor interface?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

This worked perfectly! Thank you so much! 

One other question. Is it possible to have different images on different forms. 

For example, I added an image to the form for my vertical cards but I need a different image for my horizontal cards on that respective form. Is that possible?  Even if I create its own form how do I point the image each to the specific form?  

Link to comment
  • 0

It may be possible. If you altered the code by duplicating the code and changing the data-form-id value to the appropriate value for the new form then you could associate a new image with that form.

Basically the current code associates one image with one form.

Without a specific example of a product with this alternate form it is hard to be more specific. It would also help to know the URL of the image you want at the the top of the form.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

Thanks again for your response, I really appreciate your time. 

Here's the URL for to the page with the new form: https://www.typesetfortwo.com/christmas-collection/p/blessings

Here's the URL for the image for the new form: 

https://   images.squarespace-cdn.com/content/v1/5e27638ae410453315a6e06d/a9fbbff1-52fe-48ff-9dfe-2e9af78799f3/Christmas2021-BACK-Layout-HORI.jpgChristmas2021-BACK-Layout-HORI.jpg

Edited by PhoebeT42
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...