Problems with Product Page Layout

Site URL: https://www.tgtfresh.com/fresh

I have several minor issues relating to the product pages on my site. Any help would be greatly appreciated!

1. I'm using the Shopify Buy Button on my site, and so far, other than a minor gap (more noticeable on mobile), it's been working great. Is there a way to reduce the space between the price and the button?

2. For some of my products (https://www.tgtfresh.com/fresh/p/-karasumi for example), I have 2 separate package sizes. Since my company operates exclusively in a primarily mandarin speaking country (Taiwan), the "from" in the price could be difficult to comprehend, and given the fact that I'm using the Shopify Buy Button, customers also won't see the price of the item they'd choose until they add them to cart. Is there a way to change the from text to $699 - $749, or to replace the from to the Mandarin equivalent? (Also, I've been able to change the "out of stock" to mandarin, but I'm yet to find a way to change the "sale". Is there a solution to that?)

3. We also sell some flash frozen fish, which have great emphasis on freshness, so they're caught daily, with daily price/stock fluctuations. Therefore, I was told to use a form instead for their sales, and so far, I've been able to add a button to the product page using the answer here: https://forum.squarespace.com/topic/18620-add-another-button-to-a-product-page/?do=findComment&comment=206499 , however, since only some of my products are sold through forms, I added the header injection code to "additional information" code blocks instead.  For some reasons that I can't understand, this resulted in 2 buttons on each of the pages this code was added to. Also, on mobile, the button appears between the product name and the price. Is there a way to only have one button, placed after the price for both desktop and mobile? (all of the products in this category: https://www.tgtfresh.com/fresh/limitedseafood)

Hi,

#1. Add to Design > Custom CSS

/* space above shopify button */
.ProductItem-product-price {
    margin-bottom: 0 !important;
}
section.product-details .code-block {
    padding-top: 0;
}
.product-mark {
    margin-bottom: 5px !important;
}

#2. Add to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $(".product-price").html(function() { 
          return $(this).html().replace("from", "new from text");  
    });
});
</script>

#3. You mean remove 1 button?

Add to Design > Custom CSS

/* remove 1 checkout button on Limitedsea food */
.sqs-add-to-cart-button-wrapper+a.checkoutbutton {
    display: none;
}

2 hours ago, tuanphan said:

Hi,

#1. Add to Design > Custom CSS

/* space above shopify button */
.ProductItem-product-price {
    margin-bottom: 0 !important;
}
section.product-details .code-block {
    padding-top: 0;
}
.product-mark {
    margin-bottom: 5px !important;
}

#2. Add to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $(".product-price").html(function() { 
          return $(this).html().replace("from", "new from text");  
    });
});
</script>

#3. You mean remove 1 button?

Add to Design > Custom CSS

/* remove 1 checkout button on Limitedsea food */
.sqs-add-to-cart-button-wrapper+a.checkoutbutton {
    display: none;
}

 

Thanks for the response, they work perfectly! I just have a couple more questions about the product pages:

1. Is there a way to change product prices to something like $699-749?

2. Is there a way to change the "SALE" to something else?

3. For the seafood forms, is there a way for me to add them by product category? (so every product in the /fresh/limitedseafood will have the button automatically)

4. The mobile buttons for the seafood forms is still bugged, being between the title and the price, is there a way to fix that?

5. Is there a way to move the seafood form button to after the price for both desktop and mobile, like the buy buttons?

Thanks for the help!

#1. Seeing

#2. Add to Design > Custom CSS

/* change SALE text */
.product-mark.sale {
    visibility: hidden;
    font-size: 0;
}
.product-mark.sale:before {
    visibility: visible;
    content: "New sale";
    font-size: 20px;
}

#3. Which code did you use to add button?

https://www.tgtfresh.com/fresh/limitedseafood

https://www.tgtfresh.com/fresh/p/-parrot-fish-chops-97j8r-pkp8a-pxhjd-jtdwx-d42nz-lzpbb-bfkt5-ye8mw-gk4fk

#4. Add to Design > Custom CSS

/* space between checkout button-price */
@media screen and (max-width:767px) {
.checkoutbutton {
    margin-bottom: 30px;
}
}

#5. Move this?

18 minutes ago, tuanphan said:

#1. Seeing

#2. Add to Design > Custom CSS

/* change SALE text */
.product-mark.sale {
    visibility: hidden;
    font-size: 0;
}
.product-mark.sale:before {
    visibility: visible;
    content: "New sale";
    font-size: 20px;
}

#3. Which code did you use to add button?

https://www.tgtfresh.com/fresh/limitedseafood

https://www.tgtfresh.com/fresh/p/-parrot-fish-chops-97j8r-pkp8a-pxhjd-jtdwx-d42nz-lzpbb-bfkt5-ye8mw-gk4fk

#4. Add to Design > Custom CSS

/* space between checkout button-price */
@media screen and (max-width:767px) {
.checkoutbutton {
    margin-bottom: 30px;
}
}

#5. Move this?

Thanks for the help! These work perfectly. For number 3, the code I used was copied from here: https://forum.squarespace.com/topic/18620-add-another-button-to-a-product-page/?do=findComment&comment=206499. For 4 and 5, could the button be after the price for both desktop and mobile?

On 10/29/2021 at 10:52 AM, L1NST3R said:

Thanks for the help! These work perfectly. For number 3, the code I used was copied from here: https://forum.squarespace.com/topic/18620-add-another-button-to-a-product-page/?do=findComment&comment=206499. For 4 and 5, could the button be after the price for both desktop and mobile?

 

#3. Try adding a tag with name: limitedseafood

for product belongs this category. Let me know when you're done this

As I checked, the category name does not appear in the code structure, so it is not possible to target the products. I would check to see if the tag is present, and maybe use the code to target products that belong to a certain tag.

56 minutes ago, tuanphan said:

#3. Try adding a tag with name: limitedseafood

for product belongs this category. Let me know when you're done this

As I checked, the category name does not appear in the code structure, so it is not possible to target the products. I would check to see if the tag is present, and maybe use the code to target products that belong to a certain tag.

Alright, I just added the tag "limitedseafood" to all of the applicable products

On 10/31/2021 at 10:08 AM, L1NST3R said:

Alright, I just added the tag "limitedseafood" to all of the applicable products

Edit this code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button-wrapper");        
   });
</script>

to this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".tag-limitedseafood .sqs-add-to-cart-button-wrapper");        
   });
</script>

18 hours ago, tuanphan said:

Edit this code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button-wrapper");        
   });
</script>

to this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".tag-limitedseafood .sqs-add-to-cart-button-wrapper");        
   });
</script>

 

Thanks, I did that and removed the "remove 1 checkout button on Limitedsea food" code, and now it's working perfectly.

For the number 1 from earlier, it's not as urgent now, as I've added the prices to the Shopify product variation names, so it'd be clearer for customers when adding to cart.

For number 4 and 5, is there a way for the form button to be above the description, and under the price?

Also, for the seafood, since we would be selling per weight unit, is there a way I can make a separate "from" text for the limitedseafood with ".tag-limitedseafood" too?

On 11/3/2021 at 9:35 AM, L1NST3R said:

Thanks, I did that and removed the "remove 1 checkout button on Limitedsea food" code, and now it's working perfectly.

For the number 1 from earlier, it's not as urgent now, as I've added the prices to the Shopify product variation names, so it'd be clearer for customers when adding to cart.

For number 4 and 5, is there a way for the form button to be above the description, and under the price?

Also, for the seafood, since we would be selling per weight unit, is there a way I can make a separate "from" text for the limitedseafood with ".tag-limitedseafood" too?

Button position

You mean button under image?

https://www.tgtfresh.com/fresh/p/-parrot-fish-chops-97j8r-pkp8a-pxhjd-jtdwx-d42nz-lzpbb-bfkt5-ye8mw-gk4fk

From text

Add new from text for tag-limitedseafood products?

On 11/6/2021 at 11:02 AM, tuanphan said:

Button position

You mean button under image?

https://www.tgtfresh.com/fresh/p/-parrot-fish-chops-97j8r-pkp8a-pxhjd-jtdwx-d42nz-lzpbb-bfkt5-ye8mw-gk4fk

From text

Add new from text for tag-limitedseafood products?

Thanks for the response! For the buttons on desktop and mobile, they're currently as the images below. Is there a way to move them to the positions that I've pointed at with the arrows?

For the price, since the limited seafood is different to others, we sell them by weight units, so while the others say "開始價格:" (starting price), it would be better for the limited seafood if it said "每兩開始價格“ (starting price every tael).

Also, showing the price range turned out to be more important than I've imagined, so, is there a way to make the price show the range like $749-899?

Thanks!

13 hours ago, tuanphan said:

With button under price, add to Design > Custom CSS

/* Button under price */
.ProductItem-details .ProductItem-details-checkout {
    display: flex !important;
}
.checkoutbutton {
    order: 2 !important;
}

To change from text for products belong tag limitedseafood, add this to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $(".tag-limitedseafood .product-price").html(function() { 
          return $(this).html().replace("開始價格", "new text");  
    });
});
</script>

With show price $$-$$

I can't help with this. You can find someone. Or post to some groups on Facebook

• Squarespace Customization Resource Group
• Squarsepace Community

Thanks for these, they're working exactly as I needed!