Displaying offers on your website

How offers are displayed

Offers have two main aspects that can be displayed, the Offer Title and then Offer Description.

The example below shows the offer title and description displayed on a category page.

The example below shows the offer title and description displayed on the product page.

The example below shows the offer title displayed on the shopping basket page.

---

Other details

Other details about the offer can also be displayed, the Start Date, the End Date, the Discount Type (either fixed price or percentage discount and the Discount Amount.

Twig variables

The twig variables below will return details about the offer available on a particular product.

These variables are available on the product.offers object and are specific to the product.

offer.id

Returns the unique ID of the offer.

offer.title

Returns the title of the offer.

offer.description

Returns the description of the offer.

offer.start_date

Returns the start date of the offer. Use the date filter to return the date in the required format. You can read more about the date filter here.

offer.end_date

Returns the end date of the offer. Use the date filter to return the date in the required format. You can read more about the date filter here. An offer set to 'never expire' will return an end date of 0.

offer.discount_type

Returns the discount type, either fixed_price or percent.

offer.discount_amount

Returns the amount of the discount.

offer.item_count

Returns the Product Count set on the offer.

---

As part of the global object

The offers object is also part of the global object through global.offers (using the same properties as above).

When used, the array will display all active offers on the ShopWired account.

Installation instructions (for version 2 themes or earlier)

You'll need to make changes to three places on your theme in order to fully utilise the functionality of the offers system. The guidance below will tell you what Twig variables you need to use and how to use them.

In order for the details of the offer to display 'nicely' some CSS knowledge is required and will need to be used on your theme. The guidance below does not include CSS styling (because each ShopWired theme is different) but does include some hints on how to change the colour of the text.

To make the theme changes you'll need to use the page editor.

---

Category pages

Locate the /partials/products.twig file which will usually be within the products folder.

This guide assumes you are just outputting the offer title on category pages (but you can also output the offer description).

Locate the place where you'd like to display the offer title and use the code {% for offer in product.offers %}{{ offer.title }}{% endfor %}. Please note that more than one offer can apply to the same product, this code will output all offers that apply.

For example,

<span class="name">
	{{ product.title }}
</span>

Becomes,

<span class="name">
	{{ product.title }}
	{% for offer in product.offers %} 
		- {{ offer.title }}
	{% endfor %}
</span>

If you'd like to change the text colour of the offer title text, you can use some inline styling, as shown in the example below (you can change 'red' to a hexadecimal colour reference to better match your theme's branding).

<span class="name">
	{{ product.title }}
	{% for offer in product.offers %} 
		- <span style="color: red;">
			{{ offer.title }}
		</span>
	{% endfor %}
</span>

---

Product pages

Locate the product.twig file which will be within the products folder.

Locate where you would like to display the offer title and description and use the code {% for offer in product.offers %}{{ offer.title }} - {{ offer.title }}{% endfor %}.

For example,

<h1>{{ product.title }}</h1>
	

Becomes,

<h1>{{ product.title }}</h1>
{% for offer in product.offers %}
	<h3>{{ offer.title }}</h3>
	<p>{{ offer.description }}</p>
{% endfor %}

If you'd like to change the text colour of the offer title text and description, you can use some inline styling, as shown in the example below (you can change the colours to hexadecimal colour references to better match your theme's branding).

<h1>{{ product.title }}</h1>
{% for offer in product.offers %}
	<h3 style="color: red;">{{ offer.title }}</h3>
	<p style="color: blue;">{{ offer.description }}</p>
{% endfor %}

---

The basket page

The ShopWired platform will automatically output the discount the customer has achieved through any offers they've qualified for, your theme will therefore automatically show the discount amount in the discounts line total (theme changes are not required for this).

You can include a notification on each item in the basket that qualifies for an offer (and the offer title and/or description), for which theme changes are required.

Locate the checkout_basket.twig file which will be within the checkout pages folder.

You'll need to place the code example below in the appropriate place (use the section item.extras as a guide).

For example,

{% if item.extras %}
	{% for extra in item.extras %}
		<span class="custom">
			{{ extra.name }}:
			{{ currency_value(extra.price) }}
		</span>
	{% endfor %}
{% endif %}

Becomes,

{% if item.extras %}
	{% for extra in item.extras %}
		<span class="custom">
			{{ extra.name }}:
			{{ currency_value(extra.price) }}
		</span>
	{% endfor %}
{% endif %}
{% for offer in item.offers %}
	<span class="custom" style="color: red;">
		{{ offer.title }}
	</span>
{% endfor %}

In the example above we have used inline styling to show the offer title in red (you can replace this with a hexadecimal colour reference if you prefer).

Installation instructions (for version 3 themes)

You'll need to make changes to three places on your theme in order to fully utilise the functionality of the offers system. The guidance below will tell you what Twig variables you need to use and how to use them.

In order for the details of the offer to display 'nicely' some CSS knowledge is required and will need to be used on your theme. The guidance below does not include CSS styling (because each ShopWired theme is different) but does include some hints on how to change the colour of the text.

To make the theme changes you'll need to use the page editor.

---

Category pages

Locate the /partials/item.twig file which will usually be within the partials folder.

This guide assumes you are just outputting the offer title on category pages (but you can also output the offer description).

Locate the place where you'd like to display the offer title and use the code {% for offer in item.offers %}{{ offer.title }}{% endfor %}. Please note that more than one offer can apply to the same product, this code will output all offers that apply.

For example,

<h3 class="item-heading">
	<a href="{{ item.url }}">{{ title }}</a>
</h3>

Becomes,

<h3 class="item-heading">
	<a href="{{ item.url }}">{{ title }}</a>
</h3>
{% for offer in item.offers %}
	<p>
		{{ offer.title }}
	</p>
{% endfor %}

If you'd like to change the text colour of the offer title text you can use some inline styling, as shown in the example below (you can change 'red' to a hexadecimal colour reference to better match your theme's branding).

<h3 class="item-heading">
	<a href="{{ item.url }}">{{ title }}</a>
</h3>
{% for offer in item.offers %}
	<p style="color: red;">
		{{ offer.title }}
	</p>
{% endfor %}

---

Product pages

Locate the product_form.twig file which will be within the partials folder.

Locate where you would like to display the offer title and description and use the code {% for offer in product.offers %}{{ offer.title }} - {{ offer.title }}{% endfor %}.

For example,

<h2 class="show-for-large">
	{{ product.title }}
</h2>

Becomes,

<h2 class="show-for-large">
	{{ product.title }}
</h2>
{% for offer in product.offers %}
	<h3>{{ offer.title }}</h3>
	<p>{{ offer.description }}</p>
{% endfor %}

If you'd like to change the text colour of the offer title text and description, you can use some inline styling, as shown in the example below (you can change the colours to hexadecimal colour references to better match your theme's branding).

<h2 class="show-for-large">
	{{ product.title }}
</h2>
{% for offer in product.offers %}
	<h3 style="color: red;">{{ offer.title }}</h3>
	<p style="color: blue;">{{ offer.description }}</p>
{% endfor %}

---

The basket page

The ShopWired platform will automatically output the discount the customer has achieved through any offers they've qualified for, your theme will therefore automatically show the discount amount in the discounts line total (theme changes are not required for this).

You can include a notification on each item in the basket that qualifies for an offer (and the offer title and/or description), for which theme changes are required.

Locate the checkout_basket.twig file which will be within the checkout pages folder.

You'll need to place the code example below in the appropriate place.

For example,

<h4 class="basket-item-title">
	{% if item.is_gift_voucher %}
		{{ item.product.title|raw }}
	{% else %}
		{{ item.product.title }}
	{% endif %}
</h4>

Becomes,

<h4 class="basket-item-title">
	{% if item.is_gift_voucher %}
		{{ item.product.title|raw }}
	{% else %}
		{{ item.product.title }}
	{% endif %}
</h4>
{% for offer in item.offers %}
	<span class="custom" style="color: red;">
		{{ offer.title }}
	</span>
{% endfor %}

In the example above we have used inline styling to show the offer title in red (you can replace this with a hexadecimal colour reference if you prefer).