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

Adding a ‘footer’ on a specific page only.


Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://fancythatinglewood.com.au/shop/p/1fl9d753yk35s0jw1g3zu8c1g5nou0

Hello,

I am trying to add the Payment Methods available and the payment logos underneath each item page to show customers what’s available before adding to cart. 

the only way I found now was to add a section above the footer except it applies to all pages across the site when I only want it under all product pages, or at least in the shop section only. 

I’ve also added a section underneath the product but it will only apply to the selected page and not all product pages.

i attach screen shot of what I want it to look like, keeping in mind that what you see is in reality a footer section. 
Site passcode: FTI452

Best regards.

7750952B-D9A2-47AC-9709-465659EBFE98.png

Link to comment
22 hours ago, VJO said:

Site URL: https://fancythatinglewood.com.au/shop/p/1fl9d753yk35s0jw1g3zu8c1g5nou0

Hello,

I am trying to add the Payment Methods available and the payment logos underneath each item page to show customers what’s available before adding to cart. 

the only way I found now was to add a section above the footer except it applies to all pages across the site when I only want it under all product pages, or at least in the shop section only. 

I’ve also added a section underneath the product but it will only apply to the selected page and not all product pages.

i attach screen shot of what I want it to look like, keeping in mind that what you see is in reality a footer section. 
Site passcode: FTI452

Best regards.

7750952B-D9A2-47AC-9709-465659EBFE98.png

You can add this code to Design > Custom CSS

/* Add payment methods under products - individual products */
section.ProductItem-additional:after {
    content: "";
    display: block;
    background-image: url(https://images.squarespace-cdn.com/content/v1/60b73d7cd7fb3972cfe12899/1627289956687-MKHIXGGV6C6MBX90CAZ7/FBD7D2A2-D7A0-4379-B349-4D0792F7C29D.png?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
}
section.ProductItem-additional:before {
    content: "Payment Methods";
    display: block;
    text-align: center;
	font-family: baskerville-display-pt;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}

image.thumb.png.09af4683c7d78c23e8c5fc2ec7b37aa8.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
7 hours ago, tuanphan said:

You can add this code to Design > Custom CSS

/* Add payment methods under products - individual products */
section.ProductItem-additional:after {
    content: "";
    display: block;
    background-image: url(https://images.squarespace-cdn.com/content/v1/60b73d7cd7fb3972cfe12899/1627289956687-MKHIXGGV6C6MBX90CAZ7/FBD7D2A2-D7A0-4379-B349-4D0792F7C29D.png?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
}
section.ProductItem-additional:before {
    content: "Payment Methods";
    display: block;
    text-align: center;
	font-family: baskerville-display-pt;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}

image.thumb.png.09af4683c7d78c23e8c5fc2ec7b37aa8.png

Hi Tuan,

It says there is a syntax error with:

7 hours ago, tuanphan said:
section.ProductItem-additional:after {

(The very first line of code)

also I’m not sure what you are trying to show me on the screenshot you attached? 
‘Thanks,

VJO

Link to comment

Can you take a screenshot Custom CSS box?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
On 7/28/2021 at 5:06 PM, VJO said:

DAB85463-4466-4EA3-958C-7407A3898997.thumb.jpeg.ccacb150244c3f87db3d0423efad36b4.jpeg

Remove the text "CSS" in Line 75

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
On 7/30/2021 at 5:22 PM, tuanphan said:

Remove the text "CSS" in Line 75

Thanks Tuan, 

the image is displaying now. However it’s need to be fit to screen for both mobiles and desktop. What is the code I need to add for that? Thanks 

the answer probably lies in the footer code for images as when I had it in the footer originally the image would reduce and made fit to screen on mobiles or whatever the device was.

E7E1AB64-DC4E-4C35-B8C7-299F7F80D5F3.png

AD72547C-6D54-4964-8482-7D924E1ADBBD.png

Link to comment

Use this new code

/* Add payment methods under products - individual products */
section.ProductItem-additional:after {
    content: "";
    display: block;
    background-image: url(https://images.squarespace-cdn.com/content/v1/60b73d7cd7fb3972cfe12899/1627289956687-MKHIXGGV6C6MBX90CAZ7/FBD7D2A2-D7A0-4379-B349-4D0792F7C29D.png?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
}
section.ProductItem-additional:before {
    content: "Payment Methods";
    display: block;
    text-align: center;
	font-family: baskerville-display-pt;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}
@media screen and (max-width:991px) and (min-width:768px) {
section.ProductItem-additional:after {
    background-size: contain;
}
}
@media screen and (max-width:767px) {
section.ProductItem-additional:after {
    background-size: contain;
    height: 50px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

change background-size: contain; & adjust 200px

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

I meant adjust number 200 to another number & change background-size: cover to contain

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Lol sorry! I works really well now I’m happy and I didn’t have to change the 200px. It’s just not displaying under other products? Is it normal?

1 hour ago, tuanphan said:

I meant adjust number 200 to another number & change background-size: cover to contain

 

Link to comment
On 8/5/2021 at 2:32 PM, VJO said:

Lol sorry! I works really well now I’m happy and I didn’t have to change the 200px. It’s just not displaying under other products? Is it normal?

 

The code should appear on all products. Can you share link to some products where image doesn't show?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • Solution
23 hours ago, VJO said:

Edit product >> Add a spacer block or blank text block in Additional Info >> Save & check again

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
6 hours ago, tuanphan said:

Edit product >> Add a spacer block or blank text block in Additional Info >> Save & check again

Excellent thank you so much !!

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...