Shopify themes, liquid, logos, and UX
I would like to try and move my compare at price to the right or left of my price on the same line just like it shows in my collections page as at the moment it seems to clash with my afterpay text and is sitting below the text.
https://www.livindreamz.com/collections/kids-cars/products/disney-captain-america-ride-on-car
Solved! Go to the solution
This is an accepted solution.
Hi @Maj79
I think you can use this code, just paste it to the bottom of the style.css.liquid file.
.product-details-content .product-details-price{
flex-direction: row!important;
flex-wrap: wrap!important;
}
.product-details-content .product-details-price #ProductPrice {
order: 1;
}
.product-details-content .product-details-price #ComparePrice {
order: 2;
margin-bottom: 10px;
}
.product-details-content .product-details-price .afterpay-paragraph {
order: 3;
}
If it works, please like and mark it as a solution :")😄
Footnote: The anatomy of a good product page.
This is an accepted solution.
Hi @Maj79
I think you can use this code, just paste it to the bottom of the style.css.liquid file.
.product-details-content .product-details-price{
flex-direction: row!important;
flex-wrap: wrap!important;
}
.product-details-content .product-details-price #ProductPrice {
order: 1;
}
.product-details-content .product-details-price #ComparePrice {
order: 2;
margin-bottom: 10px;
}
.product-details-content .product-details-price .afterpay-paragraph {
order: 3;
}
If it works, please like and mark it as a solution :")😄
Footnote: The anatomy of a good product page.
Thank you this has worked by pasting to my style.css file. I have one other question though as now from my collections page if i quick view a product the compare at price looks the same as my other price so 2 prices side by side the compare at price needs to show with the line through it.
Hey @Maj79,
To do so you have to change your sections/product-template.liquid code a little bit. Just move to compare price code next to the price.
Please check the screenshot given below.
Let me know if you can do that or provide me with code here.
Thanks!
@dmwwebartisan wrote:
Hey @Maj79,
To do so you have to change your sections/product-template.liquid code a little bit. Just move to compare price code next to the price.
Please check the screenshot given below.
Sorry my issue is now to do with no line through my compare at price in the product quick view clicking in from my home page.
But This is my whole code in that file i cant see anything like your above code.
{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
{%- assign on_sale = true -%}
{%- endif -%}
{%- assign sold_out = true -%}
{%- if product.available -%}
{%- assign sold_out = false -%}
{%- endif -%}
{%- assign current_variant = product.selected_or_first_available_variant -%}
<div class="product-details-area pt-100 pb-95">
<div class="container">
<div class="row{% if section.settings.content_handle == 'content_in_left' and section.settings.product_style != 'slider' %} flex-row-reverse{% endif %}">
{%- if section.settings.product_style == 'tab_style_1' -%}
{%- include 'tab-style-1' -%}
{%- elsif section.settings.product_style == 'tab_style_2' -%}
{%- include 'tab-style-2' -%}
{%- elsif section.settings.product_style == 'tab_style_3' -%}
{%- include 'tab-style-3' -%}
{%- elsif section.settings.product_style == 'gallery' -%}
{%- include 'gallery-style' -%}
{%- elsif section.settings.product_style == 'sticky' -%}
{%- include 'sticky-style' -%}
{%- elsif section.settings.product_style == 'slider' -%}
{%- include 'slider-style' -%}
{%- endif -%}
</div>
</div>
</div>
{% style %}
.dynamic_btn {
max-width: 340px;
margin-bottom: 20px;
}
.dynamic_btn button {
padding: 23px 38px;
border-radius: 0;
background-color: {{ section.settings.dynamic_btn_bg }};
font-size: {{ section.settings.dynamic_btn_size }}px;
}
.dynamic_btn button:hover {
background-color: {{ settings.color_primary }} !important;
}
{% if section.settings.show_variant_image %}
.swatch-element.color > label {
height: 30px;
width: 30px;
}
{% endif %}
{% endstyle %}
{% schema %}
{
"name": "Product",
"settings": [
{
"type": "header",
"content": "Product Style"
},
{
"type": "radio",
"id": "content_handle",
"label": "Content Position",
"options": [
{
"label": "Left",
"value": "content_in_left"
},
{
"label": "Right",
"value": "content_in_right"
}
],
"default": "content_in_right"
},
{
"type": "select",
"id": "product_style",
"label": "Product Style",
"options":[
{
"label": "Tab 1",
"value": "tab_style_1"
},
{
"label": "Tab 2",
"value": "tab_style_2"
},
{
"label": "Tab 3",
"value": "tab_style_3"
},
{
"label": "Gallery",
"value": "gallery"
},
{
"label": "Sticky",
"value": "sticky"
},
{
"label": "Slider",
"value": "slider"
}
],
"default": "tab_style_1"
},
{
"type": "header",
"content": "Product Zoom"
},
{
"type": "checkbox",
"id": "product_zoom_enable",
"label": "Product Zoom Enable",
"default": true
},
{
"type": "select",
"id": "zoom_type",
"label": "Zoom Type",
"options":[
{
"label": "Lens",
"value": "lens"
},
{
"label": "Window",
"value": "window"
},
{
"label": "Inner",
"value": "inner"
}
],
"default": "inner"
},
{
"type": "header",
"content": "Video Button"
},
{
"type": "checkbox",
"id": "show_video",
"label": "Enable Video Button",
"default": true
},
{
"type": "checkbox",
"id": "show_video_icon",
"label": "Show Video Icon",
"default": true
},
{
"type": "text",
"id": "video_btn",
"label": "Button Text",
"default": "View Video"
},
{
"type": "paragraph",
"content": "=> Use Shortcode in your product description to show Video tab- [product_video]Video ID[/product_video]"
},
{
"type": "paragraph",
"content": "[How to Get Video ID](https:\/\/image.prntscr.com/image/P7-HVQuzSlyPO2vOpHX5LQ.png)"
},
{
"type": "header",
"content": "Image Popup"
},
{
"type": "checkbox",
"id": "product_popup_enable",
"label": "Product Popup Enable",
"default": true,
"info": "When 'Product Zoom' enabled and product style 'Default' then it applicable"
},
{
"type": "header",
"content": "Product SKU"
},
{
"type": "checkbox",
"id": "product_sku_enable",
"label": "Show Product SKU",
"default": true
},
{
"type": "text",
"id": "product_sku_title",
"label": "SKU Title",
"default": "SKU:"
},
{
"type": "header",
"content": "Product Review"
},
{
"type": "paragraph",
"content": "To enable product review, go to 'Theme settings > Product Settings'"
},
{
"type": "header",
"content": "Product Description"
},
{
"type": "radio",
"id": "product_description_handle",
"label": "Description Handle",
"options":[
{
"label": "Full Description",
"value": "full_description"
},
{
"label": "Short Description",
"value": "short_description"
},
{
"label": "Without Description",
"value": "without_description"
}
],
"default": "short_description"
},
{
"type": "number",
"id": "truncatewords_count_handle",
"label": "Description Word Count",
"default": 35,
"info": "If 'Short Description' is selected and the shortcode is not used, then it will be applicable"
},
{
"type": "header",
"content": "Product Meta"
},
{
"type": "checkbox",
"id": "product_meta_enable",
"label": "Product Meta Enable",
"default": true
},
{
"type": "text",
"id": "product_meta_title",
"label": "Meta Title",
"default": "Book Name:"
},
{
"type": "text",
"id": "product_meta_author",
"label": "Meta Author",
"default": "Author Name"
},
{
"type": "text",
"id": "product_meta_type",
"label": "Meta Product Type",
"default": "Product Type"
},
{
"type": "text",
"id": "product_meta_date",
"label": "Meta Publish Date",
"default": "Item Publish Date"
},
{
"type": "text",
"id": "product_meta_barcode",
"label": "Meta Barcode",
"default": "Barcode"
},
{
"type": "header",
"content": "Product Variant"
},
{
"type": "radio",
"id": "product_variant_handle",
"label": "Variant Option",
"options":[
{
"label": "Select Option",
"value": "product_variant_select_option"
},
{
"label": "Swatch Option",
"value": "product_variant_swatch_option"
},
{
"label": "Without Variant",
"value": "product_variant_without_option"
}
],
"default": "product_variant_swatch_option"
},
{
"type": "checkbox",
"id": "show_variant_image",
"label": "Variant image enable",
"default": false,
"info": "The variant image will replace in color field if each variant each image selected. It's applicable for 'Swatch Option'"
},
{
"type": "header",
"content": "Dynamic Checkout Buttons"
},
{
"type": "checkbox",
"id": "dynamic_checkout_button_enable",
"label": "Enable Dynamic Checkout Buttons",
"default": true
},
{
"type": "color",
"id": "dynamic_btn_bg",
"label": "Button BG Color",
"default": "#1f2226"
},
{
"type": "range",
"id": "dynamic_btn_size",
"min": 12,
"max": 40,
"step": 1,
"label": "Button Font Size",
"unit": "px",
"default": 16
},
{
"type": "header",
"content": "Social Share Option"
},
{
"type": "checkbox",
"id": "social_share_enable",
"label": "Show Social Share",
"default": true
},
{
"type": "text",
"id": "social_share_title",
"label": "Social Share Title",
"default": "Share:"
},
{
"type": "header",
"content": "Category"
},
{
"type": "checkbox",
"id": "show_cat",
"label": "Show Category",
"default": true
},
{
"type": "text",
"id": "cat_title",
"label": "Category Title",
"default": "Categories: "
},
{
"type": "header",
"content": "Tag"
},
{
"type": "checkbox",
"id": "show_tag",
"label": "Show Tag",
"default": true
},
{
"type": "text",
"id": "tag_title",
"label": "Tag Title",
"default": "Tag: "
},
{
"type": "header",
"content": "Payment Option"
},
{
"type": "checkbox",
"id": "payment_option_enable",
"label": "Show Payment Option",
"default": true
},
{
"type": "text",
"id": "payment_information",
"label": "Information",
"default": "Guaranteed safe checkout"
},
{
"type": "image_picker",
"id": "payment_image",
"label": "Payment Image"
},
{
"type": "radio",
"id": "payment_icon",
"label": "Payment Icon",
"options":[
{
"label": "Automatic",
"value": "automatic"
},
{
"label": "Custom Icon",
"value": "custom_icon"
}
],
"default": "custom_icon"
}
],
"blocks":[
{
"type": "amazon_payments",
"name": "Amazon Payments",
"limit": 1
},
{
"type": "american_express",
"name": "American Express",
"limit": 1
},
{
"type": "apple_pay",
"name": "Apple Pay",
"limit": 1
},
{
"type": "bitcoin",
"name": "Bitcoin",
"limit": 1
},
{
"type": "dankort",
"name": "Dankort",
"limit": 1
},
{
"type": "diners_club",
"name": "Diners Club",
"limit": 1
},
{
"type": "discover",
"name": "Discover",
"limit": 1
},
{
"type": "dogecoin",
"name": "Dogecoin",
"limit": 1
},
{
"type": "dwolla",
"name": "Dwolla",
"limit": 1
},
{
"type": "forbrugsforeningen",
"name": "Forbrugsforeningen",
"limit": 1
},
{
"type": "google_pay",
"name": "Google Pay",
"limit": 1
},
{
"type": "jcb",
"name": "Jcb",
"limit": 1
},
{
"type": "klarna",
"name": "Klarna",
"limit": 1
},
{
"type": "litecoin",
"name": "Litecoin",
"limit": 1
},
{
"type": "maestro",
"name": "Maestro",
"limit": 1
},
{
"type": "master",
"name": "Master",
"limit": 1
},
{
"type": "paypal",
"name": "Paypal",
"limit": 1
},
{
"type": "shopify_pay",
"name": "Shopify Pay",
"limit": 1
},
{
"type": "sofort",
"name": "Sofort",
"limit": 1
},
{
"type": "visa",
"name": "Visa",
"limit": 1
}
]
}
{% endschema %}
{%- if section.settings.product_zoom_enable -%}
<script src="{{ 'jquery.elevateZoom-3.0.8.min.js' | asset_url }}"></script>
{%- endif -%}
{%- if section.settings.product_popup_enable -%}
{{ 'jquery.fancybox.css' | asset_url | stylesheet_tag }}
<script src="{{ 'jquery.fancybox.min.js' | asset_url }}"></script>
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
{%- endif -%}
{%- if section.settings.product_style == 'product_sticky' -%}
<script src="{{ 'ResizeSensor-StickySidebar.js' | asset_url }}"></script>
<script>
var sidebar = new StickySidebar('#product-content', {
containerSelector: '#product-details-with-gallery',
innerWrapperSelector: '.product-content-inner',
topSpacing: 20,
bottomSpacing: 20,
minWidth: 992,
});
</script>
{% endif %}
<script>
var selectCallback = function(variant, selector) {
timber.productPage({
money_format: "{{ shop.money_format }}",
variant: variant,
selector: selector
});
if (variant) {
// Current variant select+
var form = jQuery('#' + selector.domIdPrefix).closest('form');
for (var i=0,length=variant.options.length; i<length; i++) {
var val = variant.options[i].replace(/'/g,"'");
var radioButton = form.find(".swatch[data-option-index='" + i + "'] :radio[value='" + val +"']");
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}
// Current sku pass
$('.variant-sku').text(variant.sku);
}else {
$('.variant-sku').empty();
}
{% comment %}
// in stock / out stock product start
if (variant) {
if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
if (variant.inventory_quantity > 0) {
jQuery('#variant-inventory').text(variant.inventory_quantity + ' in stock');
} else {
jQuery('#variant-inventory').text("Out of stock");
}
} else {
jQuery('#variant-inventory').text("In stock");
}
} else {
jQuery('#variant-inventory').text("");
}
{% endcomment %}
{%- if section.settings.product_zoom_enable -%}
// product image zoom with variant
if (variant && variant.featured_image) {
jQuery('#ProductThumbs a[data-image-id="' + variant.featured_image.id + '"]').trigger('click');
}
{%- endif -%}
};
jQuery(function($) {
new Shopify.OptionSelectors('productSelect', {
product: {{ product | json }},
onVariantSelected: selectCallback,
enableHistoryState: true
});
// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
{% endif %}
// Hide selectors if we only have 1 variant and its title contains 'Default'.
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
$('.selector-wrapper').hide();
{% endif %}
});
{%- if section.settings.product_zoom_enable -%}
function productZoom(){
$(".product-zoom").elevateZoom({
gallery: 'ProductThumbs',
galleryActiveClass: "active",
zoomType: "{{ section.settings.zoom_type }}",
cursor: "crosshair"
});
{%- if section.settings.product_popup_enable -%}
$(".product-zoom").on("click", function(e) {
var ez = $('.product-zoom').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
{% endif %}
};
function productZoomDisable(){
if( $(window).width() < 767 ) {
$('.zoomContainer').remove();
$(".product-zoom").removeData('elevateZoom');
$(".product-zoom").removeData('zoomImage');
} else {
productZoom();
}
};
productZoomDisable();
$(window).resize(function() {
productZoomDisable();
});
{%- endif -%}
</script>
Hey @Maj79,
If your problem has been solved then no need to do that. 🙂
In that case, you have to modify the liquid code of sections/product-template.liquid file ( for your information ). Is this code of product-template liquid file?
But your problem solved then no need to change liquid code. If you feel that, you have problem with devices then you can think about it. But for now I can see everything is fine.
Thanks!
Am wondering if something like this can be done on our website. www.explrwear.com
The price is very large and bulky on the bottom of each product in the collection grid & also the product grid.
I want the small price ( just the price ) beside the product name. here is a photo of what am wanting.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024