Supply Theme: Positioning Compare to Price and Removing White Space

Highlighted
Excursionist
24 1 4

Hello all,

I would appreciate any help with this issue, whether it's custom coding or changing some options.

I have attached an 'annotated' picture, but if you would like to visit the store for yourself, the link is adorethepaw.myshopify.com and the password is 'kriets'.

Firstly, I would like to move the box that says 'Save £5.99 (50%)' to under the price, as the red arrow shows.

Also, I would like to remove as much white space as possible, whilst it still looks neat, as indicated by the green lines.

Any help from the geniuses on the Shopify Community Forums would be greatly appreciated!

Thanks in advance,

Anthony

 

support.PNG

0 Likes
Highlighted

Hello,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

 

@media screen and (min-width: 769px){
.inline-list.product-meta>li:nth-child(2) {
    display: table-row;
}
hr#variantBreak {
    margin: 0px;
}
button.shopify-payment-button__more-options._2ogcW-Q9I-rgsSkNbRiJzA.shopify-payment-button__button--hidden {
    margin-top: 0px;
}
hr.product-template-hr {
    margin-bottom: 5px;
    margin-top: 20px;
}
.product-description.rte {
    margin-bottom: 0px;
}
}

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
24 1 4

Hello @oscprofessional,

This is exactly what I'm looking for, however, there is a problem; the changes do not appear on mobile.

This is crucial for me, as I will use mobile-based traffic to get sales.

Is there any way to fix it on mobile as well?

Thanks

0 Likes
Highlighted

Replace above code with

.inline-list.product-meta>li:nth-child(2) {
    display: table-row;
}
hr#variantBreak {
    margin: 0px;
}
button.shopify-payment-button__more-options._2ogcW-Q9I-rgsSkNbRiJzA.shopify-payment-button__button--hidden {
    margin-top: 0px;
}
hr.product-template-hr {
    margin-bottom: 5px;
    margin-top: 20px;
}
.product-description.rte {
    margin-bottom: 0px;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
24 1 4

I really appreciate the help @oscprofessional.

Can I ask you another question? 

How do I centre all of the elements on the product page, only for mobile?

Any help with this would be appreciated too!

0 Likes
Highlighted

Add this css

@media only screen and (max-width: 768px){
#shopify-section-product-template .grid-item.large--three-fifths {
    text-align: center;
}
.inline-list.product-meta > li:nth-child(2) {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
.CountDown__CountDownContainer-sc-1h24pt2-0.gvFUgq.cbCountdownContainer {
    align-items: center;
}
.CountDown__Text-sc-1h24pt2-1.iBjjnA.cbCountdownContainerText {
    text-align: center;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
24 1 4

Hi @oscprofessional

Apologies for asking for so many questions, but any help would be appreciated.  I have attached a photo at the bottom for reference!

How can I remove the filter by, sort by boxes?

Also, is there a way to show the crossed-out price next to the selling price?

Finally, is there a way to move all the elements up, as highlighted by the yellow and blue lines?

support2.PNG

0 Likes
Highlighted

Add this css

#shopify-section-collection-template .section-header--right .form-horizontal {
    display: none;
}
#shopify-section-collection-template .section-header--right #toggleFilters {
    display: none;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
24 1 4

Hmmmm. That hasn't worked! Is there another way to remove the filter by section on the collection page?

0 Likes