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

Vivian

Member
  • Posts

    3
  • Joined

  • Last visited

Posts posted by Vivian

  1. Thank you Paul for your response. 

    I have attached the picture of an item in the store which shows the price, description and, under description has 3 images that describes dietary information about the food item (this is only an example). The food item could have one, two, three or more of these dietary logos depending on the food. This is what I am trying to do, to be able to show more than one image (dietary logo) under product description on a product Detail. Is it possible?

    site URL: https://www.theflavorcorner.com/

    password: trialsite

    Thank you for your help. Vivian.

    example2.JPG

  2. On 2/16/2020 at 9:38 AM, paul2009 said:

    From what you've said, I imagine you want to add one of three images, depending on whether the product is "Our Design", "Their Design" or "Designed Together"? If that's the case you can use some Custom CSS to insert the image when the product has been tagged accordingly.

    As an example, add the following to Custom CSS:

    
    .tag-our-design .ProductItem-details-excerpt:after {
      display: block;
      content: "";
      height: 70px;
      margin-top: 34px;
      background: url('https://images.squarespace-cdn.com/content/v1/5ccddebe01232c130192285b/1579074857871-U5MIZU7NR3Z59UDYL28X/ke17ZwdGBToddI8pDm48kJ6-92ZYMJyrVVmd-zdJkg8UqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYy7Mythp_T-mtop-vrsUOmeInPi9iDjx9w8K4ZfjXt2dqkcHALc6hkUyAp1LlIHCDsU9ryXIIWQqlJZ-pEUzNdZCjLISwBs8eEdxAxTptZAUg/transparency-our-design.png?format=1000w');
      background-size: contain;
      background-repeat: no-repeat;
    }

    Then add a tag called "our-design" to one of the products. The image should then appear just below the product description, like this:

    1005990346_Screenshot2020-02-16at15_34_55.thumb.png.b4e9d09f8cbd18ba7c373a706e260aeb.png

    You can repeat this for the other two 'icons', changing the url of the image and the name of the tag.

    I hope this helps.

    -Paul

    Hi Paul,

    Thank you for your code. I tried it and it worked for the first image. When I add the code a second time and use another image it replaces the first one. It does not show it on the side. The first one does not show at all. Below is what I added in custom CSS. How can I get to display the images side by side. Thank you very much for your help. Vivian

    /* add image to product item */
    .tag-low-carb .ProductItem-details-excerpt:after {
      display: block;
      content: "";
      height: 40px;
      margin-top: 1px;
      margin-left: 1px;
      background: url(https://static1.squarespace.com/static/5edfe6229a31511d0d685cad/t/5ef2c376a364a75fff306ba2/1592968054159/Low+Carb.JPGhttps://static1.squarespace.com/static/5edfe6229a31511d0d685cad/t/5ef2c376a364a75fff306ba2/1592968054159/Low+Carb.JPG);
      background-size: contain;
      background-repeat: no-repeat;
    }
    .tag-gluten-free .ProductItem-details-excerpt:after {
      display: block;
      content: "";
      height: 40px;
      margin-top: 1px;
      margin-left: 100px;
      background: url(https://static1.squarespace.com/static/5edfe6229a31511d0d685cad/t/5ef2c41a2b1e9a74dc9155d8/1592968218994/Gluten+Free.JPGhttps://static1.squarespace.com/static/5edfe6229a31511d0d685cad/t/5ef2c41a2b1e9a74dc9155d8/1592968218994/Gluten+Free.JPG);
      background-size: contain;
      background-repeat: no-repeat;
    }

     

×
×
  • Create New...